CMS: Setting Up a Custom Form Using Dropdown Input Elements

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.

Before you begin:

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

Step 1 | Add the dropdown element

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

Wix Editor

1. Go to your editor.

2. Go to the page in which you want to add input elements.

3. Click Add Elements

   

   on the left side of the editor.

4. Click Input.

5. Click Dropdown.

6. Click and drag the dropdown you want to use onto the page.

Studio Editor

1. Go to your editor.

2. Go to the page in which you want to add the dropdown element.

3. Click Add Elements

   

   on the left side of the editor.

4. Click Input.

5. Click Dropdowns.

6. Click and drag the dropdown you want to use onto the page.

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

1. 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.

2. Click the dropdown element and select Collect content in the Connect Dropdown panel on the right.

1. Click the Choose a dataset drop-down and select your 'Submissions' dataset.

2. 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:

   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.

1. 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.

1. (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.

Studio Editor

1. 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.

2. Click the dropdown element and select Collect content in the Connect Dropdown panel on the right.

1. Click the Choose a dataset drop-down and select your 'Submissions' dataset.

2. 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:

   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.

1. 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.

1. (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

1. Click CMS

   

   on the left of the editor.

2. Click Your Collections.

3. Hover over your 'Submissions' collection click the More Actions icon

   

   .

4. Click Permissions & privacy.

1. Choose which permissions to use for the collection:

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

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.

1. Click Advanced.

2. (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.

      

3. 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.

4. 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.

Studio Editor

1. Click CMS

   

   on the left of the editor.

2. Click Your Collections.

3. Hover over your 'Submissions' collection click the More Actions icon

   

   .

4. Click Permissions & privacy.

1. Choose which permissions to use for the collection:

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

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.

1. Click Advanced.

2. (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.

      

3. 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.

4. 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

1. Click Add Elements

   

   on the left side of the editor.

2. Click Button.

3. 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.

1. Click Change Text & Icon and enter the text you want to display on the button (e.g. "Submit").

2. Click the Connect to CMS icon

   

   .

3. Click the Choose a dataset drop-down and select the dataset connected to your submissions collection.

4. Click the Click action connects to drop-down and select Submit.

5. (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.

6. 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.

1. Click the button and select the Design icon

   

   to customize the appearance of your 'Submit' button.

Studio Editor

1. Click Add Elements

   

   on the left side of your editor.

2. Click Button, then drag the button to where you want it to appear.

   Tip: Alternatively, you can add an image and use it as your submit button.

3. Click Change Text and enter the text you want to display on the button (e.g. "Submit").

4. Click the Connect to CMS icon

   

   .

5. Click the Choose a dataset drop-down and select the dataset connected to your submissions collection.

6. Click the Click action connects to drop-down and select Submit.

7. (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.

8. 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.

1. Click the button and select the Design tab

   

   from the Inspector panel to customize the appearance of your submit button.

Step 5 | Customize the dropdown element

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

1. In your editor, click the dropdown element.

2. 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.

1. Click the Layout icon

   

   to adjust the text alignment and the element's padding and spacing.

2. Click the Design icon

   

   to choose a preset design, then select Customize Design to further adjust the appearance of the dropdown element.

3. (Optional) Click the Animation icon

   

   to add an animation to the dropdown element.

Studio Editor

1. In your editor, click the dropdown element.

2. 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.

1. Click the Layout icon

   

   to adjust the text alignment and the element's padding and spacing.

2. Click the Design tab

   

   in the Inspector panel to customize the appearance of 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.

FAQs

Click a question below for answers to the most common questions about connecting dropdown elements to the CMS.