Webflow Designer API: Form Element

Webflow Forms enable users to capture and collect information from visitors on a site. Forms are essential for gathering user data, feedback, and enabling key interactions.

Form structure

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

Element	Description
`FormWrapper`	The outermost container element that encapsulates the entire form structure
`FormForm`	The main form element containing all form fields and inputs (nested in `FormWrapper`)
`FormSuccessMessage`	Displays a success message after successful form submission (nested in `FormWrapper`)
`FormErrorMessage`	Shows error messages if form submission fails (nested in `FormWrapper`)

The methods documented below apply specifically to the FormForm and FormWrapper elements. For more information about creating and styling forms, see the Forms lesson in Webflow University.

Properties

Property	Description	Type	Example
`id`	The unique identifier for the form.	`object`	`{component: "64c813...", element: "5edf8e59-71f9..."}`
`type`	The type of the element.	`string`	`"FormForm" \|\| "FormWrapper`
`children`	Indicates if the element can contain child elements.	`boolean`	`true`
`customAttributes`	Indicates if the element can contain custom attributes.	`boolean`	`true`
`styles`	Indicates if the element can contain styles.	`boolean`	`true`
`textContent`	Indicates if the element can contain text content.	`boolean`	`false`
`appConnections`	Indicates if the element can contain app connections.	`boolean`	`true`

Methods

The methods documented below apply specifically to the FormForm and FormWrapper elements.

`form.getName()`

Retrieves the name of the form.

Syntax

1 form.getName(): Promise<string>

Returns

Promise<name>: String - The name of the form.

Example

1 const selectedElement = await webflow.getSelectedElement()
2 
3 if (selectedElement?.type === 'FormForm' || selectedElement?.type === 'FormWrapper'){
4 
5   const name = await selectedElement.getName()
6   console.log(name)
7 
8 } else {
9   console.log("Selected Element is not a Form Element")
10 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Ant	Any	Any	Any

`form.setName(name: string)`

Sets the name of the form.

Syntax

1 form.setName(name: string): Promise<null>

Parameters

name: String - The name of the form.

Returns

Promise<null>

A Promise that resolves to null.

Example

1 const selectedElement = await webflow.getSelectedElement()
2 
3 if (selectedElement?.type === 'FormForm' || selectedElement?.type === 'FormWrapper'){
4 
5   await selectedElement.setName("My Form")
6 
7 } else {
8   console.log("Selected Element is not a Form Element")
9 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canEdit	Any	Any	canvas	Any

`form.getSettings()`

Retrieves the settings of the form.

To get the settings of the form in a specific state, first use the form.setSettings() method to set form to the desired state. Then use form.getSettings() to retrieve the settings of the form.

Syntax

1 form.getSettings(): Promise<FormSettings>

Returns

Promise<FormSettings>: Object - A promise that resolves to the settings of the form.

FormSettings Properties

Property	Type	Description
state	FormState	The current state of the form (‘normal’, ‘success’, or ‘error’)
name	string	The name of the form
redirect	string	The URL to redirect to after form submission
action	string	The URL where the form data will be submitted
method	FormMethod	The HTTP method used for form submission (‘get’ or ‘post’)

Example

1 const selectedElement = await webflow.getSelectedElement()
2 
3 if (selectedElement?.type === 'FormForm' || selectedElement?.type === 'FormWrapper'){
4 
5   const formSettings = await selectedElement.getSettings()
6   console.log(formSettings)
7 
8   /* Example Response
9   {
10     state: "success",
11     name: "My Form",
12     redirect: "https://my-site.com/thank-you",
13     action: "https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members",
14     method: "post"
15   */
16 
17 } else {
18   console.log("Selected Element is not a Form Element")
19 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

`form.setSettings(settings: FormSettings)`

Sets the settings of the form.

Syntax

1 form.setSettings(settings: Partial<FormSettings>): Promise<null>

Parameters

settings: Partial<FormSettings> - The settings to set for the form.

FormSettings Properties

Property	Type	Description
state	FormState	The current state of the form (‘normal’, ‘success’, or ‘error’)
name	string	The name of the form
redirect	string	The URL to redirect to after form submission
action	string	The URL where the form data will be submitted
method	FormMethod	The HTTP method used for form submission (‘get’ or ‘post’)

Returns

Promise<null>

A Promise that resolves to null.

Example

1 const selectedElement = await webflow.getSelectedElement()  
2 
3 if (selectedElement?.type === 'FormForm' || selectedElement?.type === 'FormWrapper'){
4 
5   await selectedElement.setSettings({
6     state: "success",
7     name: "My Form",
8     redirect: "https://www.my-site.com/thank-you",
9     action: "https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members", 
10     method: "post"
11   })
12 
13 } else {
14   console.log("Selected Element is not a Form Element")
15 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canEdit	Any	Any	canvas	Any

`formInput.getRequired()`

Retrieves the required status of a form input.

This method is applicable to the following form input types:

FormCheckboxInput
FormFileUploadWrapper
FormRadioInput
FormSelect
FormTextarea
FormTextInput

Syntax

1 formInput.getRequired(): Promise<boolean>

Returns

Promise<boolean>: Boolean - A promise that resolves to the required status of the form input.

Example

1 const selectedElement = await webflow.getSelectedElement()
2 
3 const formInputTypes = [
4   'FormCheckboxInput',
5   'FormFileUploadWrapper', 
6   'FormRadioInput',
7   'FormSelect',
8   'FormTextarea',
9   'FormTextInput'
10 ];
11 
12 if (selectedElement?.type && formInputTypes.includes(selectedElement.type)) {
13 
14   const required = await selectedElement.getRequired()
15   console.log(required)
16 
17 } else {
18   console.log("Selected Element is not a Form Input Element")
19 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

`formInput.setRequired(required: boolean)`

Sets the required status of a form input.

This method is applicable to the following form input types:

FormCheckboxInput
FormFileUploadWrapper
FormRadioInput
FormSelect
FormTextarea
FormTextInput

Syntax

1 formInput.setRequired(value: boolean): Promise<null>

Parameters

value: Boolean - The required status of the form input.

Returns

Promise<null>

A Promise that resolves to null.

Example

1 const selectedElement = await webflow.getSelectedElement()
2 
3 const formInputTypes = [
4   'FormCheckboxInput',
5   'FormFileUploadWrapper', 
6   'FormRadioInput',
7   'FormSelect',
8   'FormTextarea',
9   'FormTextInput'
10 ];
11 
12 if (selectedElement?.type && formInputTypes.includes(selectedElement.type)) {
13   await selectedElement.setRequired(true)
14 
15 } else {
16   console.log("Selected Element is not a Form Input Element")
17 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canEdit	Any	Any	canvas	Any

1	const selectedElement = await webflow.getSelectedElement()
2
3	if (selectedElement?.type === 'FormForm' \|\| selectedElement?.type === 'FormWrapper'){
4
5	const name = await selectedElement.getName()
6	console.log(name)
7
8	} else {
9	console.log("Selected Element is not a Form Element")
10	}

1	const selectedElement = await webflow.getSelectedElement()
2
3	if (selectedElement?.type === 'FormForm' \|\| selectedElement?.type === 'FormWrapper'){
4
5	await selectedElement.setName("My Form")
6
7	} else {
8	console.log("Selected Element is not a Form Element")
9	}

1	const selectedElement = await webflow.getSelectedElement()
2
3	if (selectedElement?.type === 'FormForm' \|\| selectedElement?.type === 'FormWrapper'){
4
5	const formSettings = await selectedElement.getSettings()
6	console.log(formSettings)
7
8	/* Example Response
9	{
10	state: "success",
11	name: "My Form",
12	redirect: "https://my-site.com/thank-you",
13	action: "https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members",
14	method: "post"
15	*/
16
17	} else {
18	console.log("Selected Element is not a Form Element")
19	}

1	const selectedElement = await webflow.getSelectedElement()
2
3	if (selectedElement?.type === 'FormForm' \|\| selectedElement?.type === 'FormWrapper'){
4
5	await selectedElement.setSettings({
6	state: "success",
7	name: "My Form",
8	redirect: "https://www.my-site.com/thank-you",
9	action: "https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members",
10	method: "post"
11	})
12
13	} else {
14	console.log("Selected Element is not a Form Element")
15	}

1	const selectedElement = await webflow.getSelectedElement()
2
3	const formInputTypes = [
4	'FormCheckboxInput',
5	'FormFileUploadWrapper',
6	'FormRadioInput',
7	'FormSelect',
8	'FormTextarea',
9	'FormTextInput'
10	];
11
12	if (selectedElement?.type && formInputTypes.includes(selectedElement.type)) {
13
14	const required = await selectedElement.getRequired()
15	console.log(required)
16
17	} else {
18	console.log("Selected Element is not a Form Input Element")
19	}