CMS: Creating a Custom Form with Input Elements that Submit to Your Collection
Create a custom form that allows visitors to use input elements to submit their info directly to your CMS collections. 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. 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 permissionsCreate 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 Custom to specify who can view, add, update, and delete content for each role (admin, item's creator, members only, or everyone).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. Enter a name for your collection.  Leave Multiple items (Default) selected and click Create.  Click More Actions and select Permissions & privacy.
Choose which permissions to use for the collection: 
Note: Site owners and collaborators are always treated as admins when logged in to the live site. This means they can always view, add, update, and delete collection content from the live site. This rule applies no matter which collection permission you select. Collect contentAllow visitors to add content to the collection with input elements or API.  Note: This permission does not allow visitors to update existing content in the collection. Use the Custom 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 content to the collection from the live site.  Members only: Only site members can add content to the collection from the live site.    Click the Who can view this content? drop-down and choose an option: 
    
Admin: Site owners and collaborators can view the collection content from the live site.  Members only: Only site members can view the collection content from the live site.  Everyone: Any site visitor can view the collection content from the live site.    Click Save.CustomSet custom permissions to control who can view, add, update, and delete content. You can choose different permissions for item creators, site members, and everyone else. 
Click Custom. Click the relevant checkboxes next to each role to choose whether visitors with the role can view, add, update, or delete collection content from the live site:
    
Admin: Site owners and collaborators always have view, add, update, and delete permissions from the live site. You cannot change the permissions associated with this admin role.  Item's creator: This role's permissions only apply to the specific items that a member creates themselves. For example, the item's creator can only view, add, update, or delete collection items they created. Members only: This role applies to members of your site only. Selecting a permission for this role also selects the permission for the "Item's creator" role.  Everyone: This role applies to everyone who can access your live site. Selecting a permission for this role also selects the permission for the "Members only" and "Item's creator" role.    Click Save. Step 2 | Add input elements to your siteGo 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 EditorStudio 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. 
Repeat steps 3-6 above to add as many input elements as your form needs. 
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. 
Repeat steps 3-6 above to add as many input elements as your form needs. Step 3 | Connect the input elements to your collectionConnect each of your input elements to a dataset that connects to your collection. Then connect the input values to new collection fields that match the type of data you want to collect. For the options that appear in the dropdown and selection tag lists, you can use items from a different collection. To do so, connect their list items to a different dataset that connects to a field in another collection. Wix EditorStudio Editor
In your editor, click any of the input elements you just added.  Click the Connect to CMS icon  .  Connect to a dataset that binds to the collection where you will store the submissions: 
    
If you do not have a dataset on the page: 

Click + Add a Dataset on the right. Then choose the collection to connect, enter the dataset name and click Create.   Click Collect content.
   If you already have a dataset on the page:

Click Collect content.  Click the Choose a dataset drop-down and select the relevant dataset. Alternatively, click Add a Dataset to create a new one, then choose the collection to connect, enter the dataset name and click Create.
     Connect the input element to a new collection field:
    
Click the Value connects to drop-down and select Add new field: Enter a Field Name for the new collection field.  Select the Field Type from the drop-down. The field type determines what kind of data you can store in the field.  Click Add.   
(If necessary) Click the Connect list items 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 the choices for the element separate from the CMS.   
Repeat these steps for each of your custom form's input elements. 
In your editor, click any of the input elements you just added.  Click the Connect to CMS icon . Add or connect a dataset by clicking an option from the Inspector panel on the right:
Note: The options vary, based on your total collections and datasets on the page. 
    
Add a Dataset: Choose the collection in which you will store the submissions, give the dataset a name and click Create. Then select Collect content.  Collect content: Select this option then click the Choose a dataset drop-down and select the dataset you want to connect or select Add a Dataset to connect a new one.  Choose a dataset: Click the drop-down and select the dataset you want to connect.   Connect the element to a new collection field:
    
Click the Value connects to drop-down and select Add new field. Enter a Field Name for the new collection field. Select the Field Type from the drop-down. The field type determines what kind of data you can store in the field. Click Add.   (If necessary) Click the Connect list items toggle to choose where to manage the element's choices:
    
Enabled: Use a field from another CMS collection for the choices: 
        
Click the Choose a dataset drop-down under List Connections and choose a different dataset or select Add a Dataset to create a new one.  Click the Labels and values connect to drop-down and choose the field to use as choices.    Disabled: Click Manage Choices to create the choices for the element separate from the CMS.   
Repeat these steps for each of your custom form's input elements. Step 4 | Set the dataset modesDatasets control the connection between your page elements and collections, so make sure each dataset is in the correct mode. Set the mode to Write in the dataset that connects to your submissions collection so the inputs can add items to the collection.If you connected the dropdown or selection tag lists to another dataset and collection, the dataset should be automatically set correctly to Read & Write. However, if you connected them to an existing dataset, make sure to set its mode to Read & Write or Read. This allows the lists of choices to show items from the other collection.Wix EditorStudio Editor
In the panel on the right, click Dataset Settings under the first Choose a dataset drop-down. This dataset connects to the collection you will store the submissions in. 
Click the Dataset mode drop-down and select Write.
(If you connected list items to the CMS) Set the mode for the dataset connected to the list items:
    
Click Back to dropdown element at the top of the panel.  Click Dataset Settings under the dataset selected in the List Connections section.  Click the Dataset mode drop-down and select Read or Read & Write. (Optional) Click + Add Filter if you want to create a filter to exclude certain items from appearing in the list of choices.  (Optional) Click + Add new sort if you want to choose the order in which the items appear in the list of choices.   
In the CMS connections tab of the Inspector panel, click Dataset Settings under the 1st Choose a dataset drop-down. This dataset connects to the collection you will store the submissions in. 
Click the Dataset mode drop-down and select Write. (If you connected list items to the CMS) Set the mode for the dataset connected to the list items:
    
Click Back to element at the top of the panel.  Click Dataset Settings under List Connections.  Click the Dataset mode drop-down and select Read or Read & Write. (Optional) Click + Add Filter if you want to create a filter to exclude certain items from appearing in the list of choices.  (Optional) Click + Add new sort if you want to choose the order in which the items appear in the list of choices.   Step 5 | Create a submit buttonAfter visitors interact with your custom form input elements, they need a way to submit their responses. Add a button or image and connect it to the same dataset that connects to your submissions collection. Then set the click action for the button or image to Submit. When visitors click the submit button, a new item is created in the collection with values from each input element in the relevant fields.Wix EditorStudio 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. 
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:
    
Click + Add success message then click + Add failure message. 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. 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.   
Click the button and select the Design icon  to customize the appearance of your submit button. 
Click Add Elements  on the left side of the editor. 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.  Click Change Text 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:
    
Click + Add success message then click + Add failure message.  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.  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.   
Click the button and select the Design tab  from the Inspector panel to customize the appearance of your submit button.Step 6 | Customize the input elementsYou can customize each of your input elements to create a cohesive looking form that matches your site's look and feel. Wix EditorStudio 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. 
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.  (Optional) Click the Animation icon  to add an animation to the element.  Repeat these steps for each input element you want to customize.
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.
Click the Layout icon  to adjust the text alignment and other layout options. Click the Design tab  in the Inspector panel to customize 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. FAQsClick a question below for answers to the most common questions about creating custom forms using input elements.How do I find my submit button's success/failure messages in the editor?If you added and can't find the success/failure messages for your submit button, test out submitting your form in preview mode. This should cause the messages to reappear so you can go back to the editor to select and edit them. You can also use the Layers panel in the Wix Editor Toolbar to locate the messages and rearrange them. Can I automate what happens when I receive form submissions?Yes. With Wix Automations, you can choose from a variety of actions that you want to happen when you receive new submissions from your custom form. For example, you could receive an email, send data via webhooks, connect third-party web apps like Google Sheets, or automatically reply back. Learn how to create automations for CMS form submissions. Can I export the submissions that get saved to my collection?Yes. You can export any CMS collection as a CSV file to use the data outside of the Wix CMS (e.g. in Microsoft Excel or Google Sheets). Can site visitors use input elements to filter the content that appears on my site?Yes. You can connect input elements to repeaters, galleries, tables, and other dynamic elements to allow visitors to filter what they see on the page. View a step-by-step tutorial for allowing visitors to filter content with input elements.Where do the list items come from if I connect dropdown or selection tag lists to reference fields?If you connect your dropdown or selection tag list items to a reference field, the list of items comes from the primary field of the referenced collection. Learn more about using reference fields to display content from multiple collections. Can I set up my collection fields first before adding input elements?Yes. If you prefer, you can set up your collection fields first, then connect the input elements to them. You can add fields to your collection manually, or by uploading a CSV file.