Form Integration

Contact Form for Webflow Sites

Create and integrate contact forms into your Webflow site—no backend or custom code required. Simply use FormBold’s API endpoint to start collecting submissions instantly.

Webflow Contact Form with Backend API

Add a fully functional contact form to your Webflow project without writing any backend code. With FormBold, it’s easy—just insert your unique API endpoint into your Webflow form’s action attribute, and you’re all set.

webflow.html

<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

See How It Works

Setting up your Webflow form with FormBold is simple and doesn’t require complex configurations.

Create an Account

Paste the Action URL

Use Webflow’s form builder and replace the action URL with your FormBold endpoint.

Start Receiving Submissions

Form submissions are sent to the dashboard, inbox, or any connected app (e.g., Slack, Notion).

Features

Key Features of FormBold

FormBold empowers your Webflow forms with robust backend features, all without the need for custom code.

No Backend Required

Works flawlessly with Webflow—no server setup, scripts, or backend code necessary.

Instant Email Notifications

Receive real-time form submissions directly to your inbox or connected third-party apps.

Spam Protection Included

Server-side validation and optional Google reCAPTCHA help keep bots away.

File Upload Support

Allow users to attach files, and FormBold will generate secure CDN links for downloads.

Integrate with 5+ Apps

Connect your form to Slack, Notion, Google Sheets, and more—no code required.

FAQ's

Frequently Asked Questions

Here are answers to common questions about using FormBold with Webflow.

Simply set the action attribute of your Webflow form to the FormBold API endpoint and choose the POST method. No backend code or JavaScript required.