Form Integration

Webflow forms with a custom action

Webflow lets you set a custom action on a form block. Point it at your Formbold endpoint and submissions go to your inbox and your Formbold dashboard, with integrations on paid plans.

Contact Form for Webflow

What do I paste into Webflow?

You have two options. Keep your designed form and paste your endpoint into the Action field of the form block settings, or drop this HTML into a Code Embed element. Replace FORM_ID either way.

webflow.html
<!-- For a Webflow Code Embed element. Replace FORM_ID. -->
<form
  action="https://formbold.com/s/FORM_ID"
  method="POST"
  class="flex flex-col gap-4 max-w-[452px] mx-auto"
>
  <!-- Full Name -->
  <div class="flex flex-col gap-2">
    <label for="name" class="text-sm font-medium text-gray-700">
      Full Name<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="name"
      id="name"
      placeholder="Enter your full name"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Email Address -->
  <div class="flex flex-col gap-2">
    <label for="email" class="text-sm font-medium text-gray-700">
      Email Address<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="email"
      name="email"
      id="email"
      placeholder="Enter your email"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Subject -->
  <div class="flex flex-col gap-2">
    <label for="subject" class="text-sm font-medium text-gray-700">
      Subject<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="subject"
      id="subject"
      placeholder="Enter your subject"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Message -->
  <div class="flex flex-col gap-2">
    <label for="message" class="text-sm font-medium text-gray-700">
      Message<span class="ml-0.5 text-red-500">*</span>
    </label>
    <textarea
      name="message"
      id="message"
      rows="5"
      placeholder="Type your message..."
      required
      class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    ></textarea>
  </div>

  <!-- Submit Button -->
  <button
    type="submit"
    class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
  >
    Submit Message
  </button>
</form>
How it works

Three changes in the Designer

Three steps in the Designer, about two minutes.

1

Create a form

Sign up and click Create New Form in Formbold. Free gives you 10 forms.

2

Set Action and Method

Select the Form Block, open its settings, paste https://formbold.com/s/FORM_ID into Action and set Method to POST.

3

Publish and test

Publish the site, submit the form once and check Submissions in Formbold.

Features

What does Formbold add to a Webflow form?

A backend you control: storage, email, spam settings and integrations, without changing your design.

Keep your Webflow design

Only the form's Action and Method change. Your styling and layout stay as they are.

Automatic reCAPTCHA

A form block posts natively, so Automatic reCAPTCHA works with no keys. Turn on Basic Spam Filter too.

File uploads

With the Code Embed version, add a file input and enctype="multipart/form-data". Starter and higher.

Integrations

Starter and higher send entries to Slack, HubSpot, Mailchimp, Google Sheets, Zapier, Make and more.

FAQs

Webflow form questions

Field names, where submissions go and spam.

No. With a custom action the data goes to Formbold instead, so you'll find entries in Formbold's Submissions tab and your inbox.

Still have a question?

The docs cover setup, framework guides, integrations and spam protection, step by step.

Read the docs