Webflow forms are built with the Form Block element and support visual styling of inputs, labels, and states through the Style Panel. Style the Success and Error states by switching between them in the Settings Panel Form State dropdown. Connect forms to webhooks, Zapier, or Make via Site Settings > Integrations — Webflow Logic was sunset June 2025.
Webflow Forms: Styling, Validation, Spam Prevention, and Integrations
Webflow's Form Block element gives you a fully visual form-building experience with built-in submission handling, spam protection, and integration hooks. Unlike building forms from scratch in HTML, Webflow handles the submit state, success/error UI, and even basic email notifications out of the box. This tutorial covers styling every aspect of a form — inputs, focus states, error messages, and the submit button waiting state — then connects the form to external tools via webhooks, Zapier, or Make for advanced automation workflows.
Prerequisites
- Any Webflow site plan (form submission storage requires a paid plan for unlimited submissions)
- For webhook or Zapier integrations: an active account on the target platform
- For reCAPTCHA: a Google account to generate Site Key and Secret Key
Step-by-step guide
Add a Form Block to your page
Add a Form Block to your page
Open the Add Elements panel (A key). Navigate to Elements > Forms and drag a 'Form Block' onto the canvas. The default structure includes: a Form (wrapper), a Label + Text Input for Name, a Label + Email Input for Email Address, a Submit Button, a Success Message, and an Error Message. The Form and its messages are siblings inside the Form Block — only the Form is visible by default; the Success and Error messages are display:none until they are triggered. Select the Form Block > rename it via Element Settings (D) > Form Name field (e.g., 'Contact Form') — this name appears in your Webflow Dashboard submissions.
Expected result: A Form Block appears on the canvas with default unstyled inputs, a submit button, and collapsed success/error messages visible in the Navigator.
Style input elements and labels
Style input elements and labels
Select a Text Input element. In the Style Panel (S), create a class (e.g., 'input-field'). Style as desired: Spacing → Padding (12px top/bottom, 16px left/right), Size → Width 100%, Borders → 1px solid #D1D5DB border, border-radius 8px, Backgrounds → white fill. For focus styles: Selector dropdown (top of Style Panel) > change to 'Focus' state > change border color to your brand color and add a box shadow (Effects > Box Shadows > e.g., 0 0 0 3px rgba(59,130,246,0.2)). For labels: select a Label element, create class 'form-label', set Typography → size 14px, weight 500, margin bottom 6px. Apply the same classes to all inputs and labels via the class input field.
Expected result: All form inputs have consistent padding, borders, and focus rings. Labels are properly sized and spaced above their inputs.
Style the Submit Button with a Waiting state
Style the Submit Button with a Waiting state
Select the Submit Button. In the Style Panel, create a class 'btn-submit'. Style the default state: Background color (brand primary), Typography (white, 16px, 600 weight), Spacing (padding 14px 28px), Borders (border-radius 8px), Effects (transition on background-color, 200ms). For the hover state: Selector > Hover > slightly darker background. To customize the Waiting state text: Select the Submit Button > Element Settings (D) > 'Wait text' field — change from default 'Please wait...' to your preferred text (e.g., 'Sending...'). The Waiting state styling inherits from the default state; use a custom 'waiting' class added via JavaScript if you need distinct visual treatment.
Expected result: The submit button looks polished in its default and hover states. During submission, the button text changes to your Waiting text automatically.
Style the Success and Error states
Style the Success and Error states
To style the Success Message: in the Settings Panel (D) for the Form Block, find the 'Form state' dropdown and change it from 'Normal' to 'Success' — the canvas now shows the Success Message and hides the form. Select the Success Message element and style it: Backgrounds → light green fill, Borders → 1px solid green, border-radius 8px, Spacing → padding 20px, Typography → success message text. Edit the text content directly on the canvas. Switch back to 'Normal' when done. Repeat for 'Error' state — switch to Error, style the Error Message in red/orange tones, edit the error text (e.g., 'Oops! Something went wrong. Please check your connection and try again.'). Switch back to 'Normal' before publishing.
Expected result: The Success and Error messages are styled with clear visual differentiation. The canvas preview shows each state accurately when the Form State dropdown is changed.
Enable reCAPTCHA v2 for spam prevention
Enable reCAPTCHA v2 for spam prevention
First, register your site with Google reCAPTCHA: visit google.com/recaptcha → Admin Console → create a new site → select reCAPTCHA v2 'I'm not a robot' checkbox → add your domain → copy the Site Key and Secret Key. In Webflow: Site Settings > Integrations > reCAPTCHA v2 > paste Site Key and Secret Key > Save. Return to the Designer, open Add Elements panel (A) > Forms section > drag a 'reCAPTCHA' element into your form (place it between the last input and the submit button). The reCAPTCHA checkbox will appear in the published site. Note: reCAPTCHA renders only in the published/preview URL, not the Designer canvas.
Expected result: The published form shows a reCAPTCHA checkbox. Form submissions are blocked unless the user completes the CAPTCHA challenge, reducing spam submissions.
Set up email notifications for form submissions
Set up email notifications for form submissions
Select the Form Block > Element Settings (D) > Submission destinations > click 'Email'. Enable email notifications. In the Email settings: 'To' field — the email address(es) that receive submission notifications (comma-separate multiple). 'Subject' — customize with static text or form field tokens (click the curly brace icon to insert a field value, e.g., 'New contact from {{Name}}'). 'Reply-to' — set to the submitter's Email field so you can reply directly from your email client. 'Body' — include all field tokens to see full submission data. Click 'Save'.
Expected result: After each form submission, an email is sent to the configured address with the submission data. The reply-to is set to the submitter's email for easy follow-up.
Connect the form to Zapier or Make (Integromat) for automation
Connect the form to Zapier or Make (Integromat) for automation
Webflow Logic was sunset on June 27, 2025. For automation workflows triggered by form submissions, use Zapier or Make. Method 1 — Zapier App Integration: Site Settings > Apps & Integrations > scroll to Zapier > click 'Install'. In Zapier, create a new Zap > Trigger: Webflow > Event: 'Form Submission' > connect your Webflow account > select your Site and the specific Form Name. Then add your action steps (e.g., add to a Google Sheet, send a Slack message, create a HubSpot contact). Method 2 — Webhook: Form Block > Element Settings (D) > Submission destinations > Webhook > enter your webhook endpoint URL and optional secret key. The form POSTs a JSON payload with all field values to your URL on each submission. Use this for custom backend processing.
Expected result: Each form submission triggers your automation workflow. Zapier/Make processes the data and performs downstream actions (CRM entry, Slack alert, spreadsheet row, etc.).
Complete working example
1WEBFLOW FORMS — VISUAL STEPS SUMMARY231. ADD FORM BLOCK4 Add panel (A) → Elements → Forms → Form Block5 Element Settings (D) → Form Name: set a descriptive name6 Navigator (Z) → confirm hierarchy: Form Block > Form + Success Message + Error Message782. STYLE INPUTS9 Select input → Style Panel (S) → create class 'input-field'10 Spacing: padding 12px 16px11 Size: Width 100%12 Borders: 1px solid, border-radius 8px13 Backgrounds: white14 State: Focus → border color change + box shadow ring15163. STYLE SUBMIT BUTTON17 Select button → class 'btn-submit'18 Default: brand bg color, white text, padding 14px 28px19 Hover state: slightly darker bg20 Waiting text: Element Settings (D) → 'Wait text' field21224. STYLE SUCCESS / ERROR STATES23 Form Block selected → Settings Panel (D) → Form state dropdown24 Switch to 'Success' → style Success Message element (green tones)25 Switch to 'Error' → style Error Message element (red/orange tones)26 Switch back to 'Normal' before publishing27285. RECAPTCHA29 google.com/recaptcha → get Site Key + Secret Key30 Site Settings > Integrations > reCAPTCHA v2 → paste keys31 Add panel (A) → Forms → reCAPTCHA → drag into form32336. EMAIL NOTIFICATIONS34 Form Block → Element Settings (D) → Submission destinations → Email35 Set To, Subject (with tokens), Reply-to, Body36377. INTEGRATIONS (post-Logic sunset June 2025)38 Zapier: Site Settings → Apps & Integrations → Zapier → Install39 Webhook: Element Settings (D) → Submission destinations → Webhook → paste URL40 Make/n8n: use webhook destination → parse JSON payloadCommon mistakes
Why it's a problem: Styling the form but seeing no Success or Error state styles applied after submission
How to avoid: The Success and Error message styles must be applied while those states are active in the Designer. Select Form Block → Element Settings (D) → change Form state to 'Success' → then select and style the Success Message element. Styles applied in 'Normal' state do not transfer to other states.
Why it's a problem: reCAPTCHA element shows nothing in the Designer canvas
How to avoid: reCAPTCHA only renders in the published site and the Webflow Preview URL (Share > Preview). The canvas never shows the reCAPTCHA widget. Confirm it works by opening your preview link and testing a form submission.
Why it's a problem: Form submissions are not triggering Zapier despite the integration being installed
How to avoid: Zapier requires the form to be submitted on the live published URL (not the Webflow staging preview with webflow.io domain in some configurations). Also confirm the Form Name in Webflow's Element Settings matches exactly the form name selected in the Zapier trigger setup.
Why it's a problem: Placeholder text styling not working with a normal class style
How to avoid: Placeholder text requires the 'Placeholder' pseudo-state, not a normal class style. Select the input element → Style Panel (S) → Selector states dropdown → choose 'Placeholder' → then set the Typography color. This generates the CSS ::placeholder rule.
Best practices
- Always style the Focus state on inputs — it is critical for keyboard accessibility and required for WCAG 2.1 AA compliance
- Set a descriptive Form Name in Element Settings so submissions are identifiable in the Webflow Dashboard and Zapier trigger setup
- Test the actual form submission on the published preview URL, not in the Designer — reCAPTCHA and success/error states only work live
- Use the Reply-to field token in email notifications to enable one-click replies from your email client
- Add Cloudflare Turnstile (invisible) as a first line of defense before adding visible reCAPTCHA — it stops most bots without friction
- Download form submissions as CSV from Site Settings > Forms before any platform migration — Webflow stores submissions indefinitely on paid plans
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a contact form in Webflow. I need: styled inputs with focus rings, a custom success message, reCAPTCHA spam protection, and the form connected to Zapier to add submissions to a Google Sheet. Walk me through each step using Webflow's visual Designer interface — specifically which panels to use (Style Panel, Element Settings, Site Settings) and in what order.
In Webflow, I've added a Form Block to my page. I need to: 1) style the input focus state with a blue ring, 2) customize the Success Message text and background, 3) change the submit button Waiting text, and 4) add a webhook destination to POST submissions to [my endpoint URL]. What are the exact steps in Webflow's Designer and Settings panels?
Frequently asked questions
How many form submissions does Webflow store, and can I download them?
Webflow stores form submissions indefinitely on paid plans. On the free Starter plan, a 50-submission lifetime cap applies — after that, new submissions are not stored (though you can still receive email notifications). Download all submissions as CSV from Site Settings > Forms > your form name > Export. Submissions can also be viewed and managed individually in the same location.
Can I add a date picker or file upload to a Webflow form?
File upload is supported natively via the File Upload input type, but requires a Business plan or higher. Date pickers are not a native Webflow input type — add one via an Embed element with a custom HTML date input or a JavaScript date picker library (e.g., Flatpickr). Range, color, and URL input types are also unsupported natively and require Embed elements.
What replaced Webflow Logic after it was sunset in June 2025?
Webflow Logic (the visual automation builder inside the Designer) was sunset on June 27, 2025. Webflow recommends Zapier and Make as direct replacements for form automation workflows. Both offer native Webflow triggers for form submissions. For custom server-side logic, use the Webhook destination in Element Settings to POST form data to your own endpoint or a tool like n8n.
Can I style the form differently on mobile without creating a separate form?
Yes — Webflow's breakpoint system applies to form elements exactly like any other element. Switch to the Tablet or Mobile Portrait breakpoint in the breakpoint bar (top of Designer) and adjust styling: change input padding, stacking direction, font sizes, or button width. These responsive styles override the Desktop styles at smaller viewports without duplicating the form element or structure.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation