Content Manager: Creating a Custom Form

Build a custom form on your page by adding the Content Manager and user input elements to your site. Input elements accept content including text, numbers, and file uploads from site visitors. Your collection holds all the data and content submitted through the form.

If you just need a quick preset form with less customization and setup, check out Wix Forms.

Before you begin:

Make sure to add the Content Manager to your site. Learn how to add the Content Manager:

Step 1 | Create a collection in the Content Manager

Create a collection in the Content Manager that will store your form submissions.

To create a collection:

Go to the Content Manager in your Editor:
- Wix Editor: Click Content Manager on the left of the Editor.
- Editor X: Click Content Manager at the top of Editor X.
Click Create a Collection.
Enter a name for the collection (this collection will hold the data that users enter).
Click the How many items do you want in your collection? drop-down, and select Multiple items (Default).
Click Create.
Click More Actions.
Click Collection settings.
Click Permissions & Privacy.
Click the What type of content will you store in this collection? drop-down, and select Form submissions.
Click Save.

Tip:

Take a look at your new collection, but you can close it for now. You can come back to view the data that visitors enter in your form at any time. To return, simply go to the Content Manager in the Editor (step 1 above), click Collections, and select the collection.

Step 2 | Add user input elements to your site

Now it's time to create your form. Add any of the available user input elements and design the form exactly as you want.

To add user input elements:

Go to the Add panel:
- Wix Editor: Click Add on the left side of the Editor.
- Editor X: Click Add Elements at the top of Editor X.
Click Input.
Click and drag the elements you want to use and arrange them however you want.

Step 3 | Set up and connect your user input elements

Each element that you add has its own settings options. For example, for a text field, you can choose the placeholder text whether the field is mandatory or not. Learn more about working with user input elements.

In addition, you'll need to connect each element to a field in your collection so that the relevant info can be stored. To do this, you'll need to create a dataset, which links the elements on the page to the collection.

To set up and connect your elements:

Click the first user input element in the Editor.
Click Settings.
Fill in the relevant information and close the Settings panel.
(If applicable) Some elements require additional information. For example, the drop-down element also has a Manage Choices panel, which allows you to enter and organize the choices you want to offer.
(Optional) Click the Layout and Design icons for additional customization options.
Click the Connect to Data icon (or in Editor X).
(First time only) Create a dataset:
1. Click Create Dataset.
2. Click the Choose a collection drop-down and select the collection you created in step 1.
3. (Optional) Edit the name of the dataset.
4. Click Create.
Click the Value connects to drop-down, and select a field in your collection (or add a new one) to store the relevant data.

Perform these steps for each user input element. However, you'll only need to create the dataset the first time. For all additional elements on your form, you can simply select the new dataset from the Connect a dataset drop-down.

Note:

For this custom form, the dataset mode is set to Write-only. This is because you created the collection using Form Submissions under Permissions & Privacy.

Learn more about the dataset

Step 4 | Add a submit button

Add a submit button that visitors can click when they finish filling out the form. Connect it to your dataset so that all the info visitors enter is saved in your collection.

To add a submit button:

Go to the Add panel:
- Wix Editor: Click Add on the left side of the Editor.
- Editor X: Click Add Elements at the top of Editor X.
Click Button.
Select a button and drag it onto the page.
Click Change Text & Icon and change the text to Submit.
Click the Connect to Data icon (or in Editor X).
Make sure the correct dataset is selected under Connect a dataset (by default, it should be connected to the dataset you added in step 3).
Click the Click action connects to drop-down and select Submit.
(Optional) Add a success message that appears when visitors finish uploading their documents:
1. Click + Add success message.
2. Select the success message in your Editor and edit the message.
3. Click and drag the success message to the location where you want it to appear.
(Optional) Add a failure message that appears if the document fails to upload:
1. Select the submit button and click the Connect to Data icon (or in Editor X).
2. Click + Add failure message.
3. Select the failure message in your Editor and edit the message.
4. Click and drag the failure message to the location where you want it to appear.
Click the When successful, navigate to drop-down, and select an option:
- Stay on this page: The visitor stays on this 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.

Troubleshooting missing success/failure messages in the Editor

In rare circumstances, your submit button's success or failure messages do not appear in your Editor when you click to add them. If you experience this, test the button in Preview mode. This should cause the success/failure messages to reappear in your Editor so you can edit them.

To troubleshoot missing success/failure messages:

Click Preview on the page that contains the form.
Click the submit button - this will trigger a success or failure message.
Click Back to Editor to exit Preview mode.

You should now see your submit button's success/failure messages. Click to edit them.

For Velo users

Still not working?

If the problem persists, contact us, and we will be happy to help.