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

21 min read
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. 
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. 

Step 1 | Create a collection and set the permissions

Create a collection where you will store the custom form submissions and set the permissions for the collection. You can choose from preset permission settings such as Form Submissions that allow visitors to add content. If needed, you can customize the permissions to control who can add, edit, view, and delete the collection items. 

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:

  1. Go to CMS in your site's dashboard.
  2. Click + Create Collection.
  3. Enter a name for your collection. 
  4. Leave Multiple items (Default) selected and click Create
  5. Click More Actions and select Permissions & privacy.
A screenshot of selecting Permissions & privacy in a collection.
  1. Click the What type of content will you store in this collection? drop-down, and select Form submissions. If necessary, you can choose another option and click the drop-downs to adjust who can view, add, delete, and update content. Learn more about setting collection permissions
  2. Click Save.
A screenshot of setting collection permissions and privacy.

Step 2 | Add input elements to your site

Go the page or section in your site 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. 
Wix Editor
Editor X
Studio Editor
  1. Go to your Editor.
  2. Go to the page or section where you want to create a custom form. 
  3. Click Add Elements  on the left side of the Editor.
  4. Click Input.
  5. Click the type of input element you want to add.
  6. Click and drag the relevant input element onto the page. 
A screenshot of adding the dropdown element in the Editor.
  1. 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 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 Editor
Editor X
Studio Editor
  1. In your Editor, click any of the input elements you just added. 
  2. Click the Connect to CMS icon
  3. (If necessary) Click Collect content to use the input element for saving visitor submissions.
A screenshot of setting an input element to collect content.
  1. Create a new dataset or connect an existing one: 
    • Create a new dataset: 
      1. Click Create Dataset. If you already have a dataset on your page, click the Choose a dataset drop-down and select Create a New Dataset.
      2. Click the Choose a collection drop-down and select the relevant collection.
      3. (Optional) Click the Dataset name field and enter a name for the dataset. 
      4. Click Create
    • Connect an existing dataset: 
      1. Click the Choose a dataset drop-down.
      2. Select the dataset you want to connect.  
A screenshot of selecting a dropdown element and create a dataset to connect it to.
  1. Connect the input element to a new collection field:
    1. Click the Value connects to drop-down and select Add new field
    2. Enter a Field Name for the new collection field. 
    3. Select the Field Type from the drop-down. The field type determines what kind of data you can store in the field
    4. Click Add
A screenshot of adding a new field when connecting a dropdown input element.
  1. (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. 
A screenshot of connecting the list of choices in a dropdown element to a collection.
  1. Repeat these steps for each of your custom form's input elements. 

Step 4 | Set the dataset modes

Datasets 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 Editor
Editor X
Studio Editor
  1. In your Editor, select the dataset that connects to the collection that will store the submissions.
  2. Click Settings
  3. Click the Dataset mode drop-down and select Write.
  4. (If you connected list items to the CMS) Set the mode for the dataset connected to the list items:
    1. Select the dataset you connected to the list items. 
    2. Click Settings.
    3. Click the Mode drop-down and select Read & Write or Read.
    4. (Optional) Click + Add Filter if you want to create a filter to exclude certain items from appearing in the list of choices.
    5. (Optional) Click + Add Sort if you want to choose the order in which the items appear in the list of choices.
A screenshot of selecting the mode in the dataset connected to the list items.

Step 5 | Create a submit button

After 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 Editor
Editor X
Studio 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. 
A screenshot of adding a button to use as the 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. 
A screenshot of the Connect Button settings for a submit button.
  1. Click the button and select the Design icon  to customize the appearance of your submit button

Step 6 | 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
Editor X
Studio Editor
  1. In your Editor, click any of the input elements that you want to customize. 
  2. Click Settings to enter the field title, set the field as required, or adjust various settings depending on the input type. 
A screenshot of customizing the dropdown element settings.
  1. Click the Layout icon  to adjust the text alignment and other layout options.
  2. Click the Design icon  to choose a preset design, then select Customize Design to further adjust the appearance of the element. 
  3. (Optional) Click the Animation icon  to add an animation to the element. 
  4. 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. 

FAQs

Click a question below for answers to the most common questions about creating custom forms using input elements.

Did this help?

|