Form Block

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

Goals

• Automatic compatibility with webflow.js, no added scripts

• Full Build mode support of custom forms assembly

• Support for Success and Fail blocks

• Action support

• Method support

Extras

• Programmatic support, e.g. readonly and disabled fields

Tradeoffs

Usage Notes

These are exposed as component properties.

Name

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

ID

Optional. Webflow auto sets this however it does not appear to be needed for anything related to Webflow.js.

Elements

Slot all of your elements here.

Success Message

Slot your elements for success messages here.

Fail Message

Slot your elements for fail messages here.

Action

TECHNICAL NOTE

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.

Method

Defaults to get

Change to post if you prefer

<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

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