Custom Contact Forms

Creating custom contact forms in Webflow allows you to move beyond basic layouts and build highly functional, branded experiences. Webflow provides a native "Form Block" that acts as a wrapper for all your inputs, which you can then style and connect to various workflows.

Basic Structure of a Webflow Form

When you drag a Form Block from the Add panel, Webflow automatically generates three core states that you can toggle between and style independently:

• Form Wrapper: The active state where users enter their data.
• Success Message: What users see after a successful submission (e.g., "Thanks! We'll be in touch.").
• Error Message: The state shown if the submission fails (e.g., "Oops! Something went wrong.").

Customising Form Elements

You can drag various elements into your Form Block to collect different types of data:

• Input & Text Area: For short text (names, emails) or long-form messages.
• Select (Dropdown): Useful for "How did you hear about us?" or choosing a department.
• Checkboxes & Radio Buttons: For multiple-choice or single-choice options.
• File Upload: (Available on Site plans) Allows users to attach resumes or project briefs.
• reCAPTCHA: Essential for preventing spam submissions.

Advanced Customisation & Logic

To take your forms further, you can implement advanced features without complex backend coding:

FeatureMethodMulti-Step FormsUse Webflow Interactions to hide the first set of questions and show the next when a "Next" button is clicked.Conditional LogicUse custom code or third-party tools (like Finsweet Attributes) to show/hide fields based on previous answers.Custom StylingUse the Style Panel to remove default browser styling (e.g., setting Appearance: none on dropdowns) and replace them with custom SVG arrows.Form ValidationSet fields as "Required" in the settings, or use custom JavaScript to validate specific patterns (like phone numbers).

Handling Submissions

Once a form is submitted, you need to decide where that data goes. Webflow offers several routing options:

• Email Notifications: Send submissions directly to your inbox (configured in Site Settings).

Pro Tip: To prevent "form fatigue," keep your contact forms as short as possible. According to conversion data, reducing form fields from 4 to 3 can increase conversions by nearly 50%.

‍

‍