Skip to content
Formwire
Framework guide

Add a contact form to a Webflow site

Webflow forms can post to any URL, so a form on your Webflow site can send its submissions to Formwire instead of Webflow's form handler. This guide covers the native form block and the custom code embed.

4 min read

The form

Replace YOUR-ACCESS-KEY with the key from your form's page. The highlighted line is the one that points the form at Formwire.

Embed element 

            1
            <form action="https://formwire.io/submit" method="POST">
          
            2
              <input type="hidden" name="access_key" value="YOUR-ACCESS-KEY" />
          
            3
              <input type="hidden" name="redirect" value="https://example.com/thanks" />
          
            4
              <input type="text" name="fax" tabindex="-1" autocomplete="off" style="display:none" />
          
            5
             
          
            6
              <label for="name">Name</label>
          
            7
              <input id="name" type="text" name="name" required />
          
            8
             
          
            9
              <label for="email">Email</label>
          
            10
              <input id="email" type="email" name="email" required />
          
            11
             
          
            12
              <label for="message">Message</label>
          
            13
              <textarea id="message" name="message" rows="5" required></textarea>
          
            14
             
          
            15
              <button type="submit">Send</button>
          
            16
            </form>

Steps

  1. 1

    Create a form and copy its access key

    Sign up at app.formwire.com and create a form. Your sign-in address receives its submissions from the start. The access key is on the form's Settings tab, under General.

  2. 2

    Set the form's action in Webflow

    Select the Form Block, open Form settings in the right panel, and set Action to https://formwire.io/submit with Method POST. Webflow then posts to Formwire instead of its own handler.

  3. 3

    Add the hidden access_key field

    Webflow's form block has no hidden input, so drag an Embed element inside the form and paste one line: <input type="hidden" name="access_key" value="YOUR-ACCESS-KEY">. Add the hidden redirect and fax inputs the same way if you want a thank-you page on your site and the honeypot.

  4. 4

    Or paste the whole form as an embed

    If you would rather not use the form block, drag an Embed element onto the page and paste the complete form above. Style the fields with a Custom code style block or your site's CSS.

  5. 5

    Send a test submission

    Open the published site, fill the form in and send it. The submission appears in the form's inbox in the dashboard within a few seconds and the notification email follows, with Reply-To set to the address the visitor typed.

Notes for Webflow

  • Webflow's own form submission limits and the Site plan's form features do not apply when the action points elsewhere; submissions never reach Webflow.
  • Webflow's success and error states only show when Webflow handles the post. Use the hidden redirect field to send visitors to a thank-you page on your site instead.
  • Field names come from each input's Name setting in Webflow, not its label. Set them to name, email and message so the inbox columns read clearly.
  • Forms inside Webflow Symbols or Components only need the embed once; every instance carries it.

Questions

Do I need a Webflow plan with form submissions?

No. Formwire receives the submissions, so the Webflow form plan and its monthly limit do not matter. The free Formwire plan includes 250 submissions a month.

Will Webflow still show its success message?

No. Webflow only shows it when its own handler receives the form. Set the hidden redirect field to a thank-you page on your site and Formwire sends the visitor there.

Is the access key safe to put in client-side code?

Yes. The access key is a public ID that can only deliver submissions to the inbox you verified. It cannot read submissions or change settings, and you can rotate it from the form's settings if it is ever abused.

How does the form stop spam without a captcha?

The hidden fax field is a honeypot: a submission that fills it in goes to the Spam folder and nobody is emailed. A spam filter and rate limits also run on every form. Settings, Spam & security has the filter level, and on Pro, allowed domains.

Related guides

All guides