For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
ReferenceGuidesExamplesChangelog
ReferenceGuidesExamplesChangelog
  • Designer API
    • Introduction
    • Getting Started
    • Webflow CLI
    • Error Handling
    • App Modes
  • Elements
    • Creating & Retrieving Elements
    • Element Properties & Methods
    • Element Types & Methods
      • Element Presets
      • DOM Elements
      • Strings
      • Components
      • Slots
      • Headings
      • Images
      • Links
      • Forms
        • Get Form Name
        • Set Form Name
        • Get Form Settings
        • Set Form Settings
        • Form Inputs
          • Get Required Field Status
          • Set Required Field Status
          • Get Input Name
          • Set Input Name
          • Get Input Type
          • Set Input Type
  • Styles
    • Managing Style Properties
    • Managing Variable Modes
  • Components
  • Variables & Collections
    • Variable Collections
    • Variables
    • Variable Modes
  • Assets
  • Pages & Folders
  • Utilities
    • User Events & Notifications
    • App Intents & Connections
  • Additional Resources
    • API Playground
    • FAQs
LogoLogo
Resources
Get started
On this page
  • Creating Form Inputs
  • Example
  • Form Input Methods
  • FAQs
ElementsElement Types & MethodsForms

Form Inputs

Was this page helpful?
Previous

Get Required Status

Next
Built with

Form inputs are the individual fields within a form that collect information from site visitors. With the Designer APIs, you can create various types of inputs, configure their properties, and manage their behavior.

Creating Form Inputs

You can create different types of form inputs using the following elementPresets:

  • FormTextInput
  • FormTextarea
  • FormSelect
  • FormCheckboxInput
  • FormRadioInput

It’s a best practice to wrap each input and its corresponding label (e.g. FormBlockLabel) in a container element, such as a DivBlock, to keep them organized.

Example

This example demonstrates how to add a new FormTextInput with a FormBlockLabel to an existing form.

1// Get the form element on the page
2const formEl = await webflow.getSelectedElement();
3
4// Ensure we have a form element selected
5if (formEl && formEl.type === "FormForm") {
6  // Create a wrapper for the new input and label
7  const inputWrapper = await formEl.append(webflow.elementPresets.DivBlock);
8
9  // Add a label to the wrapper
10  const label = await inputWrapper.append(
11    webflow.elementPresets.FormBlockLabel
12  );
13  await label.setText("Your Email");
14
15  // Add a text input to the wrapper
16  const input = await inputWrapper.append(webflow.elementPresets.FormTextInput);
17
18  // Configure the new input
19  await input.setName("Email");
20  await input.setInputType("email");
21  await input.setRequired(true);
22}

Form Input Methods

The following methods are available for interacting with form input elements. Note that supported element types may vary by method.

Get required status

Retrieves the required status of a form input.

Set required status

Sets the required status of a form input.

Get input name

Retrieves the name of the input field.

Set input name

Sets the name of the input field.

Get input type

Retrieves the type of the input field.

Only supported by FormTextInput.

Set input type

Sets the type of the input field.

Only supported by FormTextInput.

FAQs

Can I set placeholder text on a form input field?

Yes, you can set placeholder text using custom attributes. This overrides any placeholder text configured in the Designer’s Input Field settings.

For example:

1const el = await webflow.getSelectedElement()
2const input = await el.append(webflow.elementPresets.FormTextInput);
3
4await input.setCustomAttribute("placeholder", "Enter your email");
Can I set the options for a preset select input field?

No, currently setting the options for a preset select input field isn’t supported via the Designer API.

You can add a select input field with options by using the custom DOM element method to create a select input field with choices as children.

For example:

1  const selectedElement = await webflow.getSelectedElement()
2
3  if (selectedElement && selectedElement.children) {
4    // Create a wrapper div using the element builder
5    const wrapper = webflow.elementBuilder(webflow.elementPresets.DOM)
6    wrapper.setTag('div')
7
8    // Create a select element using the DOM preset and append it to the wrapper
9    const select = wrapper.append(webflow.elementPresets.DOM)
10    select.setTag('select')
11    select.setAttribute('name', 'custom-select')
12
13    // Define the options for the select field
14    const choices = [
15      { name: 'First choice', value: 'first' },
16      { name: 'Second choice', value: 'second' },
17      { name: 'Third choice', value: 'third' },
18    ]
19
20    // Create and append option elements
21    choices.forEach((choice) => {
22      const option = select.append(webflow.elementPresets.DOM)
23      option.setTag('option')
24      option.setAttribute('value', choice.value)
25      option.setTextContent(choice.name)
26    })
27
28    // Add the wrapper with the custom select element to the page
29    const wrapperElement = await selectedElement.append(wrapper)
30
31    if (wrapperElement && wrapperElement.children) {
32      // Prepend a FormBlockLabel to the wrapper
33      const label = await wrapperElement.prepend(
34        webflow.elementPresets.FormBlockLabel,
35      )
36      if (label.type === 'FormBlockLabel') {
37        await label.setTextContent('Custom Select Field')
38      }
39    }
40
41    console.log(
42      'Custom select field with wrapper and label created successfully.',
43    )
44  } else {
45    console.log('Please select an element that can contain child elements.')
46  }
Can I create a form with the Element Builder?

No, currently only DOM elements can be created with the Element Builder.