CMS: Setting Up a Custom Form Using Dropdown Input Elements

Learn how to use Wix to build your site and business.

Design and manage your site using intuitive Wix features.

Manage subscriptions, plans and invoices.

Run your business and connect with members.

Learn to purchase, connect or transfer a domain to your site.

Get tools to grow your business and web presence.

Boost your visibility with SEO and marketing tools.

Get advanced features to help you work more efficiently.

Find solutions, learn about known issues or contact us.

Improve your skills with our courses and tutorials.

Get tips for web design, marketing and more.

Learn to increase organic site traffic from search engines.

Build a custom site using our full-stack platform.

Get matched with a specialist to help you reach your goals.

Connecting user input elements to the CMS

CMS: Setting Up a Custom Form Using Dropdown Input Elements

24 min

In this article

Step 1 | Add the dropdown element
Step 2 | Connect to the CMS
Step 3 | Set the collection permissions
Step 4 | Create a submit button
Step 5 | Customize the dropdown element
FAQs

Create custom forms that allow visitors to use dropdown inputs to submit their selections directly to your CMS collections. This article walks you through the process of adding a dropdown input element and a 'Submit' button. You will connect both elements to a dataset that allows visitor submissions to be saved in your CMS collection.

After completing these steps, you can expand your form by adding more input elements and connecting them to the same dataset.

A screenshot of a dropdown input element in use on a live site.

Before you begin:

Make sure to add the CMS to your site if you haven't already.

Go to the page in your editor where you want to create a custom form, then add the dropdown element.

Wix Editor

Studio Editor

Go to your editor.
Go to the page in which you want to add input elements.
Click Add Elements on the left side of the editor.
Click Input.
Click Dropdown.
Click and drag the dropdown you want to use onto the page.

A screenshot of adding the dropdown element in the Editor.

Tip:

Add more input elements for each type of information visitors need to submit. The input elements you add determine the types of fields they can connect to and the type of data they can save.

Step 2 | Connect to the CMS

Connect your dropdown to a dataset that connects to a CMS collection where you will store the submissions.

For the options that appear in the dropdown list, you can add them manually, or use items from a different CMS collection. To use items from the CMS, connect the dropdown list options to a different dataset that connects to a field in another collection.

Wix Editor

Studio Editor

In your editor, add a dataset that connects to a collection where you will save the submissions:
1. Click CMS on the left.
2. Click Add Content Elements.
3. Click Form dataset.
4. Click the Choose a collection drop-down and select a collection for storing the submissions.
5. Give the dataset a name (e.g. 'Submissions').
6. Click Create.
Click the dropdown element and select Collect content in the Connect Dropdown panel on the right.

Screenshot of selecting 'Collect content' in the Connect Dropdown panel.

Click the Choose a dataset drop-down and select your 'Submissions' dataset.
Connect the dropdown input element to a new collection field for storing its submissions:
1. Click the Value connects to drop-down and select Add new field:
2. Enter the Field Name for the new collection field.
3. (Coding only) Enter the Field Key that identifies this field in your site's code. This cannot be changed later.
4. Click the Field Type drop-down and select the 'Text', 'Number', or 'Reference' field type depending on the type of data you want to collect.
  Tip: For 'Reference' field types, select the referenced collection from the drop-down.
5. Click Add.

Screenshot of connecting a dropdown input element to a new collection field.

Click the Show options from a collection toggle to choose where to manage the dropdown's choices:
- Enabled: Use a field from another CMS collection for the choices. Connect the relevant dataset and choose the fields to use from the Labels and values connect to drop-down.
- Disabled: Click Manage Choices to create static choices for the element separate from the CMS.

Screenshot of connecting the list options of a dropdown input element.

(If you added other input elements) Connect the inputs to your 'Submissions' dataset:
1. Click the relevant input element.
2. Click the Connect to CMS icon .
3. Repeat steps 3-4 above to connect the input to your 'Submissions' dataset.
4. Repeat this step for each input element you want to add to your custom CMS form.

What about the dataset modes?

If you added a 'Form dataset', it's already set correctly to the 'Write' mode. This mode allows the dataset to add new items to your 'Submissions' collection based on the dropdown input element's submissions.
If you connected the list options that visitors select in the dropdown element, make sure that separate dataset is in 'Read' or 'Read & Write' mode.
If you need your CMS form to update existing collection items, set the 'Submissions' dataset to 'Read & Write' mode. Make sure the collection permissions also allow people with the relevant roles to update content.

Step 3 | Set the collection permissions

Set the permissions for the collection where you will store the submissions. You can choose the preset Collect content setting that allows visitors to add content, then specify who can add it. Or you could choose Advanced permissions to control who can view, add, update, and delete the collection items.

Wix Editor

Studio Editor

Click CMS on the left of the editor.
Click Your Collections.
Hover over your 'Submissions' collection click the More Actions icon .
Click Permissions & privacy.

A screenshot of selecting the permissions and privacy settings for a CMS collection.

Choose which permissions to use for the collection:
Choose the type of permissions you want to use for your collection:

Collect content

Allow visitors to add content as new items in your collection. This does not allow visitors to add content to existing collection items. Use the Advanced permissions if you want to allow visitors to update existing content. See this FAQ section for more information.

Click Collect content.
Click the Who can add content to this collection? drop-down and choose an option:
- Everyone: Any site visitor can add new items to the collection from the live site. Collaborators with CMS access roles and admins can also add items from within the CMS.
- Members only: Only site members, collaborators with CMS access roles, and admins can add new items to the collection from the live site. Collaborators with CMS access and admins can also add items from within the CMS.
Click the Who can view this content? drop-down and choose an option:
- Collaborators: Admins and collaborators with CMS access roles can view the collection content in the CMS and the live site.
  Tip: To assign permissions for a specific collaborator role, use the Advanced collection permissions and click + Set permissions for specific roles.
- Members only: Only site members, collaborators with CMS access and admins can view the collection content on the live site. Collaborators with CMS access and admins can also view it within the CMS.
- Item's creator: Site members can only view items on the live site that they themselves added to the collection. Collaborators and admins can still view all the items on both the live site, and in the CMS.
- Everyone: Any site visitor can view the collection content on the live site. Collaborators with CMS access and admins can also view it within the CMS.
Click Save.

Note: With these 'Collect content' collection permissions, admins and collaborators with CMS access maintain full access to the collection. They can perform all actions, including viewing, adding, updating, and deleting collection content, whether from the live site or the CMS itself.

Advanced

With the 'Advanced' permissions, you can select different permissions for viewing, adding, updating, and deleting content for each role. This lets you control what people with each access level can do with your site's collection content.

For each user role, select the checkboxes to choose whether they can view content, add new items, update existing items, or delete items. You can also create permissions for specific collaborator roles for greater control over which collaborators can view, add, update, or delete items.

Click Advanced.
(Optional) Set permissions for specific collaborator roles:
Note: By default, all collaborators with CMS access roles share the same permissions unless you create permissions for specific collaborator roles.
1. Click + Set permissions for specific roles.
2. Click the checkbox next to each collaborator role that you want to set specific permissions for. Only roles that allow for CMS access are available. Click Roles & Permissions at the bottom if you need to create or modify any collaborator roles.
3. Click Done.
Click the relevant checkboxes next to each role to choose whether users with the role can view, add, update, or delete collection items:
- Everyone: This role applies to everyone who can access your live site. Selecting a permission for this role also selects it for the other roles in the table.
- Members: This role applies to site members only. Selecting a permission for this role also selects it for the 'Item's creator' role, the 'Collaborators' role, and any specific roles you add to the table.
- Item's creator: This role's permissions only apply to the specific items that a member creates themselves. For example, you can set permissions to allow the item's creator to update or delete only the items that they create. Selecting a permission for this role also selects it for the 'Collaborators' role and any specific roles you add to the table.
- Collaborators: This role applies to all collaborator roles with CMS access. Selecting a permission for this role also selects it for any specific collaborator roles you've set permissions for.
- Admin: This role applies to site owners and collaborator roles with CMS admin permissions. You cannot change the permissions of this 'Admin' role.
- Specific roles: If you add roles to the table, they apply to collaborators with specific CMS access roles. If you set permissions for a specific role, then deselect a permission in that role, the permission is also deselected in the main 'Collaborators' role.
Click Save.

In the table, you can choose from the following access levels for each role:

View: People with the relevant role(s) can view the collection content.
Add: People with the relevant role(s) can add new items to the collection.
Update: People with the relevant role(s) can edit existing collection items.
Delete: People with the relevant role(s) can remove existing collection items.

Note: With these 'Advanced' collection permissions, admins and collaborators with CMS access maintain full access to the collection. However, you can set permissions for specific collaborator roles to restrict them from having view, add, update, or delete access to the collection.

Step 4 | Create a submit button

You need to create a way for visitors to submit the input element responses they entered or selected. Create a 'Submit' button by adding a regular button or image and connecting it to the dataset's 'Submit' click action. When visitors click the 'Submit' button, the values from your dropdown input and any other inputs you connect to your 'Submissions' dataset are saved to your collection. Depending on the dataset mode and your collection permissions, the values are either added as new items or used to update existing items.

You can also create separate buttons for the following dataset actions:

New: Add or update the collection items (depending on the dataset mode) and reset the inputs to accept new values.
Revert: Reset the values in the input elements that have not yet been submitted.
Delete: Remove selected items from your collection ('Read & Write' mode only).
Next page/ Previous page: If you are displaying the items that visitors are editing in a gallery or repeater, you can add these buttons to let visitors navigate through "pages" of items. If you created your form on a dynamic item page, use the Next dynamic page / Previous dynamic page click action instead.

Wix Editor

Studio Editor

Click Add Elements on the left side of the editor.
Click Button.
Click and drag the button you want to use as your submit button onto the page. You can use any of the following button types: Themed Buttons, Text & Icon Buttons, Icon Buttons, or Image Buttons.
Tip: Alternatively, you can add an image and use it as your submit button.

Screenshot of adding a button in the Wix Editor.

Click Change Text & Icon and enter the text you want to display on the button (e.g. "Submit").
Click the Connect to CMS icon .
Click the Choose a dataset drop-down and select the dataset connected to your submissions collection.
Click the Click action connects to drop-down and select Submit.
(Optional) Add success and failure messages that appear when submissions are submitted successfully or unsuccessfully:
1. Click + Add success message then click + Add failure message.
2. Click and drag both messages to the place where you want them to appear. They can overlap because the messages do not display at the same time.
3. Click Edit Text on each message to edit the messages.
Select the button and click the Connect to CMS icon . Then click the When successful, navigate to drop-down, and select an option:
- Stay on this page: The visitor stays on the same page after submitting the form.
- A link: The visitor is redirected to another page after submitting the form. Click Choose under Choose a link and set up the link.

Screenshot of setting up a 'Submit' button.

Click the button and select the Design icon to customize the appearance of your submit button.

Set the title, placeholder text and other options from the dropdown settings. Customize the element's look and feel from the Design panel and adjust alignment, spacing and padding from the Layout panel.

Wix Editor

Studio Editor

In your editor, click the dropdown element.
Click Settings and edit the following:
- Field title: Enter a title that will appear at the top of the dropdown element.
- Show initial text: Choose the initial text visitors see before they click the dropdown element:
  - None: Visitors see a blank box before they click the dropdown element.
  - Placeholder text: Use your own text on the dropdown element (e.g. "Choose your color"). Enter the text in the Placeholder text field.
  - Item from dropdown: Show an item from the dropdown list. If you connected the list to the CMS, the item that appears is the first dropdown choice visitors can select. If you did not connect the list items to the CMS, click the Select an item from your list to choose which item appears.
  - Autocomplete: Click the toggle to determine what happens when visitors type to search in the dropdown:
    - Enabled: Only choices that match the typed text appear in the dropdown.
    - Disabled: All choices appear in the dropdown.
- Dropdown list type: Choose an option:
  - Custom: Customize the dropdown element in the Design panel. On mobile, the list type is always set to Browser.
  - Browser: Use the browser's default theme on the dropdown element.
- This field is: Select the Required checkbox to require that visitors select an item from this dropdown list before their submission can be submitted.

Screenshot of the dropdown input element's settings.

Click the Layout icon to adjust the text alignment and the element's padding and spacing.
Click the Design icon to choose a preset design, then select Customize Design to further adjust the appearance of the dropdown element.
(Optional) Click the Animation icon to add an animation to the dropdown element.

Ready to go live?

Click Preview at the top right of your editor to test out your new custom dropdown form. When everything looks great and works perfectly, click Publish to make the changes go live.

If you've enabled Sandbox, sync your Sandbox collection to the live collection to make the database changes go live.