# Form Block

<https://x-form-component-test.design.webflow.com/?workflow=canvas>

## Goals

* Automatic compatibility with webflow\.js, no added scripts&#x20;
* Full Build mode support of custom forms assembly&#x20;
* Support for Success and Fail blocks&#x20;
* Action support&#x20;
* Method support&#x20;

### Extras&#x20;

* Programmatic support, e.g. readonly and disabled fields&#x20;

### Tradeoffs&#x20;

*

## Usage Notes

These are exposed as component properties.&#x20;

### Name

The form name.  You must specify this in order for Webflow to properly capture your form data.&#x20;

### ID&#x20;

Optional.  Webflow auto sets this however it does not appear to be needed for anything related to Webflow\.js.&#x20;

### Elements&#x20;

Slot all of your elements here. &#x20;

### Success Message&#x20;

Slot your elements for success messages here.&#x20;

### Fail Message&#x20;

Slot your elements for fail messages here.&#x20;

### Action &#x20;

{% hint style="info" %}
**TECHNICAL NOTE**&#x20;

The action attribute can only be added to forms if its being used.  Even an empty value will change how Webflow\.js handles the form.&#x20;
{% endhint %}

### Method&#x20;

Defaults to get&#x20;

Change to post if you prefer&#x20;

```html
<form
  id="email-form"
  name="email-form"
  method="get"
  data-name="Email Form"
  data-wf-page-id="683164ae0cf15d617354c238"
  data-wf-element-id="825348f2-493e-4526-129f-9299543c4179"
  aria-label="Email Form"
>
</form> 
```

## Technical Notes&#x20;

```
  data-wf-page-id="683164ae0cf15d617354c238"
  data-wf-element-id="825348f2-493e-4526-129f-9299543c4179"
```