Basics of Forms in Webflow

Forms represent one of the most potent tools on the internet, enabling you to efficiently gather information, whether it involves collecting email newsletter subscriptions or business inquiries from potential customers. Through Webflow, you have the capability to extensively personalize and enhance your forms to suit your specific requirements.

This tutorial covers the following:

Adding a form
Form structure
Configuration of form components
Feedback for success and errors
Handling form submissions
Form data and compliance with GDPR
Addressing issues

How to integrate a form

You can include a form from the Insert section (A)> Components > Forms category.

The Form block element is highlighted within the Forms section of the Add panel.

Drag a Form block onto the canvas.

The default Form block element on the Webflow canvas, with the Form block settings modal window open.

Form structure

The Form block adopts the full width of its containing element and incorporates 3 sub-elements:

Form — includes all your form inputs and components
Success message — the message displayed upon successful form submission
Error message — the message shown in case of submission issues

The Form block element expanded in the Navigator panel to reveal its child elements: Form, Success message, and Error message.

Additionally, the Form block element features a Source option, enabling you to link your form to Logic. This permits you to transmit data from form submissions to other platforms via Logic, or direct form submissions to distinct content editors or contributors within your Workspace based on the submitted form or its content. Discover more about Logic.

The Form block Source is set to “Default form.”

Arrangement of your form

Within the Form, you have the flexibility to append or remove any form component, such as an Entry or a Tick box, to adapt your form as required.

Form components

Field description — A description is utilized to define the functionality or significance of a form field. Descriptions are indispensable for easy navigation through your form, hence it’s vital that you do not eliminate them.
Entry — The Entry field gathers single-line data, such as a single-word answer to a query (e.g., name or email address).
File attachment — The File attachment button enables visitors to attach files to their form submissions. Explore more about the File attachment button and how you can modify it.
Text region — The Text region field allows users to input multi-line data, like a lengthy message.
Tick box — Tick boxes are optimal for input data where users can select one or more options. Learn more about tick boxes.
Selection button — The Selection button field is perfect for input data where users can pick only one from many options. Learn more about selection buttons.
Option — The Option input behaves similarly to a dropdown component, offering a list of various choices for users to select from. It also allows for multiple selections. Learn more about option inputs.
reCAPTCHA — reCAPTCHA is a Google service that aids in preventing form spam. Find out how to integrate reCAPTCHA into your forms.
Submit button — No form is functional without the Submit button! Upon clicking, this button submits all the accumulated data in the form.

Need to know: FormOnly Form block allows the inclusion of elements.

Configuring Form components

To adjust Form components (e.g., Input, Submit button), you can open their settings by double-clicking on them. Alternatively, selecting an element and pressing Enter/Return will also bring up the settings.

Customizing Inputs

Different input settings are available for each form element based on its type.

Title — Every form element includes a Title field, used to identify the field in form submissions. The default title for all forms is set to “Email Form.”
Mandatory — Each form element offers the Mandatory choice. When selected, site visitors cannot submit the form without completing this field.
Temporary Text— For Input and Text area fields, the Temporary Text is the initial text displayed in an empty input field, getting replaced once the user starts typing. It can be a sample text or a brief description of the required data. You can style temporary text from the states menu.

Crucial: To avoid issues, it is recommended not to use Temporary Text as a substitute for a Title or for providing important details or instructions for its corresponding input field (e.g., “Password must be between 8-20 characters”), because temporary text may not be translated for site visitors utilizing translation tools and isn’t accessible to assistive technology like screen readers. Furthermore, as temporary text disappears when users start typing in the field, its usage instead of a Title can confuse users on the expected information for that field.

Text style — The Text style allows you to specify the type of input being collected. For instance, an Input field with Text style:email will exclusively accept email addresses. A Phone text style accepts phone numbers and text characters (while the phone text style displays a keypad on mobile devices). A Password text style will conceal the entered characters in the input field.
Initial focus — If you wish for an Input to be focused (i.e., the user’s cursor to automatically land in the Input field) when the page loads, enabling the Initial focus option in the Form settings is necessary. When an element in the form has Initial focus enabled, the page will load and scroll to that element if the form lies within the part of the page requiring scrolling to view.

Reminder: If your webpage automatically scrolls down upon loading, it might be due to the Initial focus being activated on an Input field within a form located in the segment of the page necessitating scrolling to view. To prevent this behavior, ensure to deactivate the Initial focus for all Input fields in your form. It is also crucial to ensure the Initial focus is disabled for any hidden form fields, as this can lead to submission complications.

Settings for an Input field, including Title, Temporary Text, Text Style, and options to set the Input as Mandatory and initially focused.

For further insights on input configurations, refer to our detailed guide on checkboxes, radio buttons, and select inputs.

Submission Button

The settings of the Submissionbutton allow you to specify the Button text and Waiting text.

Settings for the Submit button. The default button text is 'Submit' and during processing, it changes to 'Please wait...'

By double-clicking the Submission button, its settings modal will appear. Here, you can modify 2 key elements:

Button text — the text displayed on the submission button. The default Button text is “Submit”
Waiting text — the text that takes the button’s place after clicking the submit button and prior to form submission. The default Waiting text is “Please wait…”

Acknowledgment and error indications

To access the acknowledgment and error indicators, select the Form inside the Form block and open the Settings (D) > Form settings. Within this section, you will find the available State choices. Click on the State you wish to modify.

Standard — the default state before users interact with the form
Confirmation — the message shown upon successful form submission. You can personalize and customize this text as needed.
Issue — the message displayed when an error occurs during form submission. Once again, customization of the error state is possible.

Handy tip: It is advisable to include an email address in the error state for cases where users encounter issues with the form.

The standard Form block success state displayed on the Webflow canvas. The default success message is shown instead of the Form block and reads, “Thanks! Your submission has been successfully received!”

The standard Form block error state displayed on the Webflow canvas. The default error message shown under the Form block reads, “Uh-oh! An error occurred while submitting the form.”

What are You Looking for?

How to integrate a form