The Webflow rulebook

Form rules

Webflow's form export looks for specific wrappers and attributes. Miss one and the field arrives as plain markup instead of a Webflow form element.

The expected markup

Element	Required shape
Form tag	`<form name="contact-form" id="contact-form" method="post" class="contact-form" data-ht-form>`
Checkbox	wrap each `<input type="checkbox">` in `<div data-wf-checkbox>`
Radio	wrap each `<input type="radio">` in `<div data-wf-radio>`
Submit	`<button type="submit" data-wait="Please wait...">Send</button>`
Success / error	`<div data-wf-success>` and `<div data-wf-error>`
Select	`<select id="topic" name="topic"><option value="">Select...</option></select>`

Always space your attributes

Attributes must be separated by real spaces. The export parser is strict about it.

html

<input type="text" id="name" name="name">

A complete form

html

<form name="contact-form" id="contact-form" method="post" class="contact-form" data-ht-form>
  <label class="contact-form__label" for="name">Name</label>
  <input class="contact-form__input" type="text" id="name" name="name" required>

  <div data-wf-checkbox>
    <input type="checkbox" id="subscribe" name="subscribe">
    <label class="contact-form__check" for="subscribe">Keep me posted</label>
  </div>

  <button class="contact-form__submit" type="submit" data-wait="Please wait...">Send</button>
</form>

<div data-wf-success>Thanks — we will reply within 24 hours.</div>
<div data-wf-error>Something went wrong. Please try again.</div>