A B2B SaaS company came to us after a product launch. They'd run paid campaigns to a Webflow landing page, got solid traffic, form completions looked fine in Webflow's dashboard - and almost nothing had made it into their CRM. Three weeks of leads, partially gone. The integration they'd assumed was working wasn't.
Webflow forms are deceptively simple to set up and surprisingly easy to misconfigure. The native form builder handles the basics well. The complexity is everything that comes after: where submissions go, how they reach your CRM, whether your analytics is actually tracking them, and what happens when your use case outgrows what Webflow provides natively.
This guide covers all of it - from building your first form to connecting it to HubSpot, tracking submissions in GA4, and knowing when to replace native Webflow forms with something else.
What Webflow's Native Form Element Does
Webflow's form component is built into the Designer - no plugins, no third-party setup. It handles the structural and functional basics of web forms out of the box.
Input Types Available
From the Add panel (+), a Webflow Form Block includes a form wrapper, a default text input, and a submit button. You can add any of the following input types from within the form:
- Text input - single-line text (name, company, job title)
- Email input - validates email format on submission
- Password input - obscures text, used for auth flows
- Telephone input - mobile-friendly number keyboard on touch devices
- Number input - numeric only, supports min/max/step attributes
- Textarea - multi-line text (message fields, comments)
- Checkbox - single boolean opt-in (GDPR consent, newsletter sign-up)
- Radio button - single selection from a group
- Select (dropdown) - dropdown list of options
- File upload - native file attachment (limited; see the Uploadcare section below)
- Date / time inputs - datepicker and time selector
- Range slider - numeric slider input
- Hidden field - passes data silently (UTM parameters, page source, user type)
For most B2B lead gen forms - name, work email, company, message - the native inputs cover everything. The gaps appear when you need conditional logic, file uploads with size/type controls, or anything that connects to your stack in real time.
Confirmation State and Error State
Every Webflow form has three states accessible in the Designer: the default form state, the success message shown after submission, and the error message shown if something fails. You can design all three independently - add custom copy, images, or CTA buttons, and clear validation states improve user experience and submission rates. The success state is frequently under-used: it's a conversion moment where buyers are engaged and receptive, and most teams leave the default "Thank you! Your submission has been received!" in place. Inline validation feedback helps users identify and fix errors quickly.
Replace it with something useful: a link to the relevant case study, a calendar embed for immediate booking, or a next-step CTA. On SaaS demo request pages, we often place a Calendly embed in the success state so qualified leads can book immediately without a follow-up email sequence.
Notification Emails
Site-level form notifications go to Site Settings → Forms → Email Notifications, where you manage notification settings. You can configure the recipient email address, reply-to address (set it to the form submitter's email so you can reply directly), and a custom subject line. For high-volume sites, pipe these to a shared inbox rather than an individual email address.
You can also set form-level notifications that override the site default - useful when different forms on the same site, including new forms, should route to different teams (a careers form routes to HR, a demo request routes to sales). When configured correctly, Webflow can receive form submissions on Webflow-hosted sites.
Spam Protection with hCaptcha
Webflow includes hCaptcha as a built-in spam protection option. Enable it under Site Settings → Forms. Unlike Google reCAPTCHA, hCaptcha doesn't share user data with Google, which matters for privacy-conscious enterprise buyers. It adds a verification challenge to form submissions, which reduces bot traffic to your submission inbox and your CRM.
For high-security forms (enterprise contact forms, partner applications), hCaptcha is worth enabling. For low-traffic forms where UX friction matters more than spam protection, it's optional.
Where Webflow Stores Submissions
By default, all form submissions are stored in Webflow's Forms dashboard (Project → Forms), where you can access both submitted data and form submission data. From here, you can view records, download form submissions in CSV format, and exported uploads appear as clickable URLs in the file. You can also delete form submissions individually or in bulk. Webflow stores submissions for as long as your plan is active.
This matters for compliance: if your form collects personal data, Webflow's storage is part of your data processing stack. For data protection, businesses that collect data from EU residents should review General Data Protection Regulation requirements, understand what data Webflow retains and how long, and consider whether you need a Data Processing Addendum with Webflow for forms collecting sensitive information.
Storing submissions in Webflow's dashboard is a fallback, not a strategy. For anything beyond a simple contact form, you need submissions flowing somewhere actionable.
Connecting Webflow Forms to Your Marketing Stack
This is where the real implementation work happens. A form that collects data but doesn't connect to your CRM, marketing automation platform, or analytics is a dead end.
HubSpot
HubSpot has a native Webflow integration via the HubSpot tracking code. The approach:
- Add the HubSpot tracking script to Site Settings → Head Code (HubSpot provides this in Settings → Tracking Code)
- Use HubSpot's Forms API to submit data to a HubSpot form on submission
The simplest implementation wraps your Webflow form's submission event and fires a fetch POST to HubSpot's form endpoint:
document.querySelector('#your-form-id').addEventListener('submit', function(e) {
const data = new FormData(e.target);
fetch('https://api.hsforms.com/submissions/v3/integration/submit/YOUR_PORTAL_ID/YOUR_FORM_GUID', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
fields: [
{ name: 'email', value: data.get('email') },
{ name: 'firstname', value: data.get('name') },
{ name: 'company', value: data.get('company') }
],
context: { pageUri: window.location.href }
})
});
});Place this via Webflow custom code in Page Settings footer, or in a script tied to the specific form page.
Alternatively, embed a HubSpot form natively in Webflow (see the "When to Use Third-Party Forms" section below) - this gives you HubSpot's form validation and CRM routing without custom code, at the cost of some design control.
Salesforce
Salesforce Web-to-Lead is Salesforce's built-in mechanism for capturing form submissions directly into Salesforce Leads. Salesforce generates a form action URL and a set of hidden fields (including your Organisation ID). Map your Webflow form's action URL and include the required hidden fields to route submissions.
For enterprise setups requiring routing rules, lead scoring, or more complex field mapping, a Salesforce integration via the API is more robust. We handle these as part of enterprise Webflow builds where form data needs to trigger workflows, assignment rules, or Pardot campaign membership.
ActiveCampaign
ActiveCampaign can receive Webflow form submissions via its API or via an embedded ActiveCampaign form. The API approach:
fetch('https://YOUR_ACCOUNT.api-us1.com/api/3/contacts', {
method: 'POST',
headers: {
'Api-Token': 'YOUR_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
contact: {
email: data.get('email'),
firstName: data.get('name'),
fieldValues: [{ field: '1', value: data.get('company') }]
}
})
});This creates or updates a contact in ActiveCampaign on every Webflow form submission. Pair it with ActiveCampaign automation to trigger welcome sequences, assign tags, or enroll contacts in nurture campaigns.
Make.com (Automated Workflows)
Make.com (formerly Integromat) connects Webflow forms and form integrations to essentially any tool in your stack via a visual scenario builder. The setup: use Webflow's Webhooks integration to POST submission data to a Make.comwebhook URL, then build your scenario to route that data - to your CRM, your Airtable base, your Slack channel, or anywhere else.
Webflow integrates with Zapier for automated workflows, and these form integrations are useful when you need a third party tool to process form submissions beyond Webflow's native setup or connect your Webflow forms to external tools.
This is the right approach when you need multi-step logic: for example, submit to CRM + send a Slack notification + add a row to an Airtable sheet + trigger a HubSpot deal creation - all from one form submission.
See our Webflow integrations page for the full range of systems we build connections to.
Formspree
Formspree is a form backend service that handles submissions without requiring a server. Point your Webflow form's action attribute to your Formspree endpoint, and Formspree handles forwarding, storage, and integrations. It supports email notifications, Stripe payments, file uploads, and webhook routing.
It's well-suited for static pages, multi-site setups, or scenarios where you want submission handling decoupled from Webflow. For teams without a developer on hand, Formspree's no-code integrations with Google Sheets or Notion are a practical way to get structured data somewhere usable.
Form Analytics: Tracking Submissions Properly
A form that submits successfully but isn't tracked in your analytics is a visibility problem. You can't optimise what you can't measure - and for high-value conversion events like demo requests, you need reliable data.
GA4 Custom Events
Google Analytics 4 doesn't automatically track Webflow form submissions. You need to fire a custom event on successful submission. Place this in Page Settings footer code:
<script>
document.querySelector('.w-form-done').addEventListener('DOMSubtreeModified', function() {
if (this.style.display !== 'none') {
gtag('event', 'form_submit', {
event_category: 'Lead Gen',
event_label: 'Demo Request Form',
page_location: window.location.href
});
}
});
</script>Webflow shows the .w-form-done div on successful submission. Watching for its visibility change is a reliable trigger. In GA4, this custom event will appear under Events - create a Conversion from it in Admin → Conversions.
For teams running paid campaigns, this conversion event is what feeds Google Ads or LinkedIn Ads conversion tracking. Without it, your ad platforms are optimising blind. This is one of the first things our CRO team checks on any site audit.
Segment
Segment sits between your Webflow forms and all your downstream tools. A single Segment tracking call on form submission routes the event to every connected destination - GA4, HubSpot, Amplitude, Intercom, and more - without separate integrations for each.
Add the Segment analytics.js snippet to Site Settings head code, then fire a analytics.track() call on successful form submission:
document.querySelector('.w-form-done').addEventListener('DOMSubtreeModified', function() {
if (this.style.display !== 'none') {
analytics.track('Form Submitted', {
form_name: 'Demo Request',
page: window.location.pathname
});
}
});Our Segment integration work typically involves mapping Webflow form events to Segment's identify and track calls, so form submissions build unified customer profiles from the first touch.
Amplitude
For product-led or data-driven teams using Amplitude for behavioural analytics, the implementation follows the same pattern: load the Amplitude SDK in head code, fire an event on submission. Amplitude's advantage is tying form submission events to user journeys - so you can see what a user did on your site before and after they submitted a form, enabling proper attribution analysis beyond last-click.
Advanced Form Patterns
Multi-Step Forms
Webflow's native form element is single-step, so teams that want multi-step flows with advanced features for demo requests, pricing calculators, or onboarding flows usually need custom JavaScript. The principle: create each step as a visible < div>, hide all but the first with CSS, and show/hide on button clicks.
We covered the implementation pattern in detail in our Webflow custom code guide. For production multi-step forms on enterprise or SaaS sites, we add real-time validation, step-level analytics events (so you can see where people drop off), and CRM partial-submission capture so leads who don't complete the form aren't entirely lost.
Conditional Fields
Conditional logic - showing or hiding dynamic form fields based on a previous answer - requires JavaScript. A simple example: show a "Company size" field only when the user selects "B2B" from a dropdown. Shorter forms generally create less friction for the user, and when conditional fields appear, logical layouts and easy navigation matter. Webflow doesn't support this natively, but it's achievable with a few lines of code watching for change events on your select element and toggling the visibility of dependent fields.
For complex conditional flows (multi-branch logic trees, calculation-based fields), a third-party form tool like HubSpot Forms or Typeform is often faster to implement and maintain than fully custom JS.
File Uploads
Webflow's native file upload input works for basic scenarios but has limited control over file types, sizes, and storage. For production file upload forms - client intake forms, portfolio submissions, application forms - we use Uploadcare, which provides a widget that integrates with Webflow via a script tag and handles file hosting, CDN delivery, and integration with storage services like AWS S3.
The Uploadcare widget renders inside a Webflow HTML Embed and passes file URLs (not the files themselves) to your form on submission. This keeps your form payload light and moves file handling to infrastructure built for it.
Hidden Fields for Attribution
Hidden fields are one of the most underused features in Webflow forms. They let you pass metadata - UTM parameters, the page the form was on, the user's referral source - alongside every submission, without showing any additional fields to the user.
Pass UTM parameters from the URL into hidden fields on page load:
const params = new URLSearchParams(window.location.search);
['utm_source', 'utm_medium', 'utm_campaign'].forEach(param => {
const field = document.querySelector(`input[name="${param}"]`);
if (field) field.value = params.get(param) || '';
});Frequently Asked Questions
How do I add a form in Webflow?
Open the Webflow Designer, go to the Add panel (+), and drag a Form Block onto your canvas. Webflow lets teams add and customize core form elements on a Webflow site. The form block includes a default text input and submit button. Add inputs from the Add panel or the form settings, style them in the Style panel, use visible labels instead of relying on placeholder text, pair every input with a <label> element, and keep sufficient color contrast. Generous field sizes and well-spaced touch targets also improve mobile usability. Connect notification emails in Site Settings → Forms. Your first form can be live in under ten minutes - the integration and analytics setup takes longer.
Where do Webflow form submissions go?
By default, submissions are stored in your Webflow dashboard under the Forms section and sent to the notification email address configured in Site Settings → Forms on a Webflow-hosted site, but with external hosting Webflow does not natively collect form submissions. A custom domain is not required to receive native submissions on the default webflow.io subdomain, but hosting outside Webflow requires another solution. To route submissions to your CRM or marketing automation platform, you need a direct integration (HubSpot API, Salesforce Web-to-Lead), a Make.comwebhook scenario, or a form backend service like Formspree. Form limits vary by site plan and site plans: the free Starter Site plan allows 50 form submissions, Basic allows up to 500 monthly form submissions, CMS allows up to 1,000 monthly form submissions, Business allows up to 2,500 monthly form submissions, and exceeding the monthly limit costs $1 per extra 100 submissions.
Can Webflow forms connect to HubSpot?
Yes. The most robust approach uses HubSpot's Forms API: on successful Webflow form submission, a custom JavaScript snippet POSTs the field data to your HubSpot form endpoint. This creates or updates a HubSpot contact and triggers any enrolled workflows. Alternatively, embed a native HubSpot form in Webflow via HubSpot's embed script - this gives you HubSpot's built-in CRM routing and progressive profiling, at the cost of some design flexibility.
How do I track Webflow form submissions in GA4?
GA4 doesn't track Webflow form submissions automatically. Add a custom gtag('event', ...) call that fires when Webflow's .w-form-done success element becomes visible. In GA4, mark this custom event as a Conversion under Admin → Events → Conversions. For paid campaigns, connect this conversion event to Google Ads or LinkedIn Ads so your ad platforms can optimise toward actual form submissions rather than page visits.
Can I create multi-step forms in Webflow?
Not natively - Webflow's form element is single-step. Multi-step forms require custom JavaScript that shows and hides different form sections based on button clicks, with validation logic before each step advances. For complex multi-step forms on high-traffic pages, working with a Webflow development team is significantly faster than building the logic from scratch and debugging edge cases.
What's the character limit for Webflow form field names?
Webflow doesn't publicly document a character limit for field names, but keep them short and use standard naming conventions (lowercase, hyphens or underscores) to ensure clean data in your CRM. Field names become the property names in your CRM or analytics platform - "first-name" is cleaner to map than "First Name (Required)".
Can I use Webflow forms with Stripe for payments?
Webflow Commerce has built-in payment processing via Stripe for e-commerce checkout flows. For custom payment forms outside of Webflow Commerce - subscription sign-ups, donation forms, one-time payments - you need to integrate Stripe's Elements or Payment Links separately. Our Stripe integration work typically involves embedding Stripe Elements in a Webflow HTML Embed and handling the payment intent via a serverless function or backend endpoint.
How do I stop Webflow form spam?
Enable hCaptcha in Site Settings → Forms. This adds a bot verification step to all form submissions across your site. For additional protection, add a hidden "honeypot" field that bots will fill but real users won't - any submission with that field populated can be filtered in your processing logic. If you're routing submissions via a form backend like Formspree, their spam filtering adds another layer.
Can I style Webflow forms to match my brand?
Yes, fully. Webflow form inputs, labels, button text, and the form button, plus error states and success states, are all styled through the Style panel like any other element. You can apply your brand colours, typography, border radius, and spacing. The submit button should be visually prominent with contrasting colors. Custom focus states, placeholder colour, and input hover effects are all achievable with CSS. Webflow gives you complete visual control over the form's appearance - more than most embedded third-party form tools. Teams also use forms to capture leads from potential clients, while surveys or contact flows can collect user feedback. You can also clone new forms from the Webflow community showcase as a starting point.
