CMS: Creating a Custom Form with Input Elements that Submit to Your Collection | Help Center

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: Creating a Custom Form with Input Elements that Submit to Your Collection

18 min

In this article

Step 1 | Create a collection and set the permissions
Step 2 | Add input elements to your site
Step 3 | Connect the input elements to your collection
Step 4 | Create a submit button
Step 5 | Customize the input elements
FAQs

Create a custom CMS form that allows visitors to use input elements to submit their info directly to your collection. Input elements include text boxes, dropdown selectors, date & time pickers and more. This article walks you through creating a collection to store the submissions, adding input elements and a submit button, and using datasets to connect it all.

A screenshot of using input elements to create a custom form.

Need a simpler, prebuilt custom form?

Check out Wix Forms to view template forms that require less setup such as contact forms, order forms, registration forms and more.

Before you begin:

Make sure to add the CMS to your site if you haven't already.
For an overview of this process, check out our Ultimate CMS Guide video.

Step 1 | Create a collection and set the permissions

Create a collection where you will store the custom form submissions and set the collection permissions. You can choose the Collect content permission settings, then choose who should be allowed to add or view the content from your live site. Or, you can choose Advanced to specify who can view, add, update, and delete content for each role (everyone, members, item's creator, and collaborators).

You can add fields to the collection at this point but we recommend adding them later (step 3) when you connect the input elements. That way you can be sure that you're only adding the types of fields that can connect to each type of input element.

To create a collection for storing form submissions:

Go to CMS in your site's dashboard.
Click Create Collection.
Click Start from scratch.
Tip: Alternatively, click Create with AI to let AI (Artificial Intelligence) create a collection for you.
Click Next.
Enter a name for your collection. Let's refer to this collection as your 'Submissions' collection.
(Coding only) Enter a collection ID to use in your code.
Leave Multiple item collection (Default) selected and click Create.
Click More Actions and select Permissions & privacy.

A screenshot of selecting Permissions & privacy in a collection.

Choose which permissions to use for the 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 2 | Add input elements to your site

Go to the page or section in your editor where you want to create the custom form. Then add all the input elements that visitors will use to submit their responses. Keep in mind that each input element has limitations to the types of data it can collect and the field types it can connect to.

Which input elements can be set to collect content?

You can choose from the following input elements that allow you to collect content: text input, text box, rich text, radio buttons, multi-checkboxes, single checkbox, dropdown, selection tags, date picker, time picker, slider, upload button, ratings input, address input, switch, and signature input.

Wix Editor

Studio Editor

Go to your editor.
Go to the page or section where you want to create a custom form.
Click Add Elements on the left side of the editor.
Click Input.
Click the type of input element you want to add.
Click and drag the relevant input element onto the page.

A screenshot of adding the dropdown element in the Editor.

Repeat steps 3-6 above to add as many input elements as your form needs.

A screenshot of many input elements added to a page.

Step 3 | Connect the input elements to your collection

Connect each of your input elements to a dataset that connects to your 'Submissions' collection. Then connect the input values to new collection fields that match the type of data you want to collect.

You can connect the options that visitors select in dropdown and selection tag elements to items from another CMS collection. To do so, connect their list options to a different dataset that connects to a field in another collection. This dataset should be in the 'Read' or 'Read & Write' mode.

Wix Editor

Studio Editor

In your editor, add a dataset that connects to your 'Submissions' collection:
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 the 'Submissions' collection.
5. Give the dataset a name (e.g. 'Submissions').
6. Click Create.
Click any of the input elements you added.
Click the Connect to CMS icon .
Click the Choose a dataset drop-down and select your 'Submissions' dataset.
Tip: First click Collect content if prompted to choose between 'Filter content' and 'Collect content'.
Connect the input element to a new collection field:
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. Select the Field Type from the drop-down. The field type determines what kind of data you can store in the field.
5. Click Add.

Screenshot of adding a new collection field where the data will be saved.

(If connecting the list of items in certain input elements) Click the Show options from a collection toggle to choose where to manage the element'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.

Repeat these steps for each of your custom CMS form's input elements.

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 the collection based on the input element submissions.
If you connected the options that visitors select in dropdown and selection tag elements, 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 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 all the input elements that 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.

A screenshot of adding a button to use as the submit button.

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.

Step 5 | Customize the input elements

You can customize each of your input elements to create a cohesive looking form that matches your site's look and feel.

Wix Editor

Studio Editor

In your editor, click any of the input elements that you want to customize.
Click Settings to enter the field title, set the field as required, or adjust various settings depending on the input type.

Screenshot of customizing a dropdown input element.

Click the Layout icon to adjust the text alignment and other layout options.
Click the Design icon to choose a preset design, then select Customize Design to further adjust the appearance of the element.
Repeat these steps for each input element you want to customize.

Ready to go live?

Click Preview at the top right of your editor to test out your new custom 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.