Forms

Webflow Forms enable users to capture and collect information from visitors on a site.

Creating a form

Use the FormForm element preset to create a form.

1
// Get the currently selected element
2
let el = await Webflow.getSelectedElement();
3
4
// Create a form element
5
let form = await el.after(webflow.elementPresets.FormForm);

When you create a form using the FormForm preset, it automatically generates a complete form structure with default form fields, as well as a success and error message.

Form structure

A Webflow form consists of several nested elements that work together:

Form inputs

Form inputs are the individual fields that collect user information. It’s recommended to create a wrapper to contain each input and it’s corresponding label.

You can create form inputs using the following element presets:

• FormTextInput
• FormTextarea
• FormSelect
• FormCheckboxInput
• FormRadioInput

Example

1
// Get the currently selected element
2
let el = await Webflow.getSelectedElement();
3
4
// Create a form element
5
let formWrapper = await el.after(webflow.elementPresets.FormForm);
6
7
// Add a text input with a label
8
let formWrapperChildren = await formWrapper.getChildren(); // Get the form element
9
let formInputs = formWrapperChildren[0]; // Get the form element
10
let inputWrapper = await formInputs.append(webflow.elementPresets.DOMElement); // Create a wrapper for the input and label
11
let label = await inputWrapper.append(webflow.elementPresets.FormBlockLabel); // Create a label
12
let input = await inputWrapper.append(webflow.elementPresets.FormTextInput); // Create a text input

Form labels

Each input should have a label that describes the information it collects. Create a label using the FormBlockLabel element preset to label each input.

Methods

Form element methods

The Form Element supports the following specific methods:

Form input methods

The following methods apply to form input elements:

Properties