Sign up

Webflow contact form

A Webflow form posts to Webflow unless you tell it otherwise. Pointing it at ezform is one attribute either way, and the rest of this page is the parts Webflow does for you that it stops doing once the form leaves.

Create the form in the console first. It gives you a form ID for the URL and the name of a honeypot field for your markup. Both end up in the page’s HTML, and neither is a secret.

On an exported site

The export wraps each form in a w-form div. Find the <form> inside it and set two attributes:

<div class="w-form">
  <form
    id="email-form"
    name="email-form"
    data-name="Email Form"
    action="https://api.ezform.io/f/YOUR_FORM_ID"
    method="POST"
  >
    <input class="w-input" name="Email" type="email" required>
    <textarea class="w-input" name="Message" required></textarea>

    <div style="position:absolute;left:-9999px" aria-hidden="true">
      <label for="YOUR_HONEYPOT_FIELD">Company website</label>
      <input
        id="YOUR_HONEYPOT_FIELD"
        name="YOUR_HONEYPOT_FIELD"
        type="text"
        tabindex="-1"
        autocomplete="off">
    </div>

    <input class="w-button" type="submit" value="Send">
  </form>

  <div class="w-form-done">Thank you! Your submission has been received!</div>
  <div class="w-form-fail">Oops! Something went wrong.</div>
</div>

Leave the name attributes as Webflow wrote them. ezform reserves no field names and declares none up front, so Email and Message arrive exactly as spelled, capitals and all, and renaming a field later changes nothing but the label on the email.

The w-form-done and w-form-fail divs are Webflow’s, shown by Webflow’s script after its own submit. A form posting to ezform navigates away instead, so neither is ever seen. Configure a redirect path on the form in the console and the browser lands on your own thank-you page; without one, ezform renders a short confirmation page of its own.

On a Webflow-hosted site

Select the form, open its settings, set the Action to https://api.ezform.io/f/YOUR_FORM_ID and the Method to POST. A form with an action pointing somewhere else is submitted by the browser rather than collected by Webflow, and the submissions stop appearing in your Webflow dashboard once it does.

The honeypot is a normal text field you make invisible: add one to the form, set its name to the honeypot name from the console, and give it position: absolute with a left offset of -9999px. Add aria-hidden="true", tabindex="-1" and autocomplete="off" as custom attributes in element settings.

Do not hide it by setting display to none. Some bots skip fields that are not displayed, and the trap only works on a field they can see in the markup but a person cannot see on the page. The reasoning, and what each attribute is doing, is in Spam and origins.

Publish, then submit the form once and watch what the browser does. It should leave the page for your redirect or for ezform’s confirmation page, and the submission should appear in the ezform console. If it stays put and shows Webflow’s own success message, the action did not take effect and the submission went to Webflow.

Allow your origins

Scheme and host, no path. On Webflow that is the .webflow.io staging domain, your custom domain, or both. They are separate origins and each needs its own entry, as do the apex and the www. host.

A submission from an origin that is not listed is discarded and never stored, which is what keeps someone who read your form ID out of your inbox. It is the first thing to check when a form appears to do nothing: see Responses and failure.

What does not carry over

  • Name
    File uploads
    Type
    not accepted
    Description

    ezform refuses multipart/form-data rather than accepting it and silently dropping the files inside. A Webflow file upload field cannot post to ezform.

  • Name
    reCAPTCHA
    Type
    not needed
    Description

    Webflow’s captcha only talks to Webflow. Remove it: the honeypot and the origin allowlist are the gate here, and neither asks your visitor to solve a puzzle.

  • Name
    Checkbox groups
    Type
    joined with commas
    Description

    Several checkboxes sharing one name arrive as a single comma-joined value rather than overwriting each other. Nothing to configure; it is worth knowing before you read the email.

Where to go next