Webflow maintenance

How do I add a select field to a Webflow form?

Add a select dropdown inside a Webflow form, name the field, and set the choices visitors can pick from.

THE SHORT ANSWER

Drag Select from Add panel, Forms, into the Form wrapper. A select only works inside that wrapper. In Select field settings, set Name so you can recognize the field in submissions. Add choices with the plus button, or paste a list. Text is what people see. Value is the underlying value, and it matches the text if you leave it blank. Turn Required on when a choice is mandatory.

Place the select inside the form

A select field is the form control for a dropdown list of choices. It is not the navbar dropdown. The navbar element opens a menu of links. The select element submits a value with the form, and it only works inside a form block.

Open the Add panel, on the Elements tab, scroll to Forms, and drag Select into the Form wrapper. You can drop it on the canvas inside the form or onto the wrapper in the Navigator. If the page has no form yet, drag a Form block in first. The default block already has a name field, an email field, and a submit button. The select joins that group.

Keep a field label with the select. Webflow's form guide says labels tell people, including people using screen readers, what the field is for. Do not delete the label and rely on placeholder text. Placeholder text is for single-line inputs, and it disappears while someone types.

Example: a contact form needs a department. The choices are Sales, Support, and Billing. The select sits under Email, still inside the same Form wrapper, with a label that reads Department.

Name the field and add choices

Select the element and open Select field settings in the Element settings panel. Set Name to something you will recognize later, such as Department. Webflow recommends a name so the field is identifiable in the submission data. A second form on the site should not reuse a vague name like Field if both forms ask different questions.

Add choices with the plus icon. Each choice has Text and Value. Text is what visitors see on the canvas. Value is the underlying value. Leave Value blank and it matches the text, which is the right setup when Sales should be stored as Sales.

Drag the dotted handle beside a choice to reorder the list. Put the most common department first if that is the one most people need. The order in these settings is the order in the dropdown.

Paste choices and mark the field required

A long list does not have to be typed one row at a time. Click into Choices and paste. Put each option on its own line. To set text and value separately, put a comma between them, such as United Kingdom, UK. Webflow flags a line that is formatted wrong, so you can fix that line without rereading the whole list. A paste from a spreadsheet comes in as tab-separated values and works without reformatting.

Turn on Required when the message is not useful without a department. The form should not send until a choice is selected. Required on a select does not make the other fields required. Set those on their own elements.

Give the form its own name in the form settings too, not only the select. The default name is Email Form. A name like Contact keeps this submission separate from a newsletter form when you open Site settings, then Forms.

Choose one answer or several

Leave Allow multiple selection off when the visitor should pick one department. The closed list is the point of a select: the choices stay hidden until someone opens them.

Turn Allow multiple selection on only when more than one choice is valid. Webflow's select article says visitors then select extra choices with Command + Click on Mac or Control + Click on Windows. That modifier is awkward on a phone. For a small set of visible options, use radio buttons when one answer is allowed, and checkboxes when several are allowed. Those controls also have to sit inside the Form wrapper. A radio group needs one group name, and only one radio in the group has to be Required for the group to be required.

Custom styling is available for checkboxes and radio buttons, under Style, by choosing Custom. The select article does not offer that same Custom switch for the select list. Style the label and the spacing around the select. Do not expect the open system menu to take on your heading font.

Publish and read the submission

Publish the page, then submit the form on the live domain once for each important choice. Open Site settings, then Forms, and find the submission. The Department name should be on the row, with the value you set. If the field is missing, the select was outside the wrapper, or you published a different page than the one you edited.

Submit again with the select left on its empty state, if Required is on. The form should not complete. If a real visitor still cannot send, check the causes that block every field, including a site-wide reCAPTCHA rule with no reCAPTCHA element on this form.

If you pasted United Kingdom, UK and the stored value looks wrong, open Choices and read that line. A formatting flag means the comma split did not land where you expected. Fix the line, publish, and send one more test before you rely on the list.

Questions & answers

I dropped the select on the page and it will not submit. Why?

Form fields have to live inside the Form wrapper. A select placed beside the form, or in a div outside that wrapper, is not part of the submission. Move it into the wrapper and publish again.

What is the difference between Text and Value?

Text is the label shown in the dropdown on the canvas. Value is the underlying value for that choice. If you leave Value empty, Webflow uses the same words as Text.

How do people pick more than one option?

Turn on Allow multiple selection. Webflow's select article says visitors then use Command + Click on Mac or Control + Click on Windows. For several choices on a phone, checkboxes do not need that modifier key.

Can I paste the list from a spreadsheet?

Yes. Paste into Choices. A spreadsheet paste arrives as tab-separated values and does not need to be reformatted. One option per line also works. A comma between text and value sets them separately, as in United Kingdom, UK.

Sources & further reading

Need a hand with your Webflow site?

View membership