How to Add a Custom Contact Form to Webflow

Webflow has a built-in form component, but it stores submissions inside Webflow itself — exporting them requires a manual CSV download, and integrating with tools like Slack or your CRM takes extra configuration. With Formboost and an HTML Embed, you get a form that sends you email notifications, filters spam, and forwards submissions anywhere you want.

What's Wrong with Webflow's Built-in Form?

• Submissions are locked inside Webflow — no API to read them programmatically
• Email notifications are basic; no custom templates
• No webhook support on lower plans
• No spam filtering beyond a basic honeypot

The Formboost approach uses Webflow's HTML Embed element — available on any plan that supports custom code — to add a plain HTML form that sends directly to Formboost.

Step 1: Create a Formboost Endpoint

Sign up at dashboard.formboost.app and create a new endpoint. You'll get a URL like:

Step 2: Add an HTML Embed in Webflow

1. Open your page in the Webflow Designer
2. In the left panel, go to Add Elements → Components → Embed
3. Drag the HTML Embed onto your page
4. Click the element and select Open Embed Code
5. Paste the following:

1<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST" class="fb-form">
2  <input type="text" name="name" placeholder="Your name" required />
3  <input type="email" name="email" placeholder="Email address" required />
4  <textarea name="message" placeholder="Your message" rows="5"></textarea>
5  <button type="submit">Send Message</button>
6</form>
7
8<style>
9  .fb-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
10  .fb-form input,
11  .fb-form textarea {
12    padding: 10px 14px;
13    border: 1px solid #ccc;
14    border-radius: 6px;
15    font-size: 15px;
16    font-family: inherit;
17  }
18  .fb-form button {
19    padding: 12px 24px;
20    background: #000;
21    color: #fff;
22    border: none;
23    border-radius: 6px;
24    font-size: 15px;
25    cursor: pointer;
26  }
27</style>

Replace YOUR_ENDPOINT_ID with your actual endpoint ID.

Step 3: Style to Match Your Webflow Site

Edit the <style> block to match your site's colors and fonts. The .fb-form class scopes the styles so they don't affect other elements on the page. You can also use Webflow's Custom CSS panel to style it there instead.

Step 4: Custom Redirect (Optional)

By default, Formboost shows a hosted confirmation page after submission. To redirect users to a Webflow thank-you page instead:

1<input type="hidden" name="_redirect" value="https://yoursite.webflow.io/thank-you" />

Step 5: Publish and Test

Publish your Webflow site and submit the form. The submission appears in your Formboost dashboard instantly, and you'll receive an email notification.

Connecting to Slack, Discord, or a CRM

Once submissions arrive in Formboost, you can forward them anywhere:

• Slack — paste a Slack Incoming Webhook URL in the Integrations tab
• Discord — paste a Discord webhook URL in the Integrations tab
• Zapier / Make — use the HTTP Webhook integration to trigger any automation

No additional Webflow plugins or apps needed.

Start collecting submissions for free →