CMS: Adding and Setting Up a Text Input
Add a text input, text box or rich text box element to collect responses from your visitors such as an email or phone number. Connect the text element to the relevant collection field and add a 'Submit' button that visitors click to submit the data.
Before you begin:
Make sure to add the CMS (Content Management System) if you haven't already.
Step 1 | Add and set up a text input element
Add a text input that uses a single-line for inputs or a text box that provides a larger area to add multiple lines of text. Then customize the input's settings, layout, and design to match your site's needs.
Wix Editor
Click Add Elements
on the left side of the editor.
Click Input.
Click the type of text input you want to add:
Text Input: Let visitors enter or edit text in a field with a single line.
Text Box: Let visitors enter or edit text in a field that allows multiple lines of input.
Click and drag the text input element of your choice onto the page.
Click Settings on the input element and edit the following:
Type: (Text input element only) Select the type of information that the text input allows:
Text: Allow all character types in the input such as names, addresses, or any other info that does not follow a pattern.
Password: Conceal all characters entered in the password field.
Number: Allow only digits in the input.
Email: Allow email addresses only. If an invalid email address format is entered, a tooltip warns the user.
URL: Allow web addresses only. If an invalid URL format is entered, a tooltip warns the user.
Phone Number: Allow all character types in the input.
Field title: Enter a title that appears above the input element.
Show initial text: Choose the initial text that displays in the field and enter the placeholder and default text, if needed.
Validations: Choose from the following options:
Field type: Select the relevant options:
Required: Make it mandatory that visitors enter a value in the field before submitting.
Read only: Set the element to display content only. Visitors cannot edit the values but they can copy them.
Set character limit: Enable the toggle to limit visitor submissions to a set number of characters, then enter the maximum characters.
Add pattern validation: (Text input element only) Enable the toggle and enter regex code to add your own pattern validation to the browser's default validation.
Error message format: Choose how error messages appear: Inline or Tooltip.
Click the Layout icon
to edit the indentation, spacing, text direction and alignment.
Click the Design icon
to choose a preset design. Then click Customize Design to adjust the design further.
Studio Editor
Click Add Elements
on the left side of the editor.
Click Input.
Click the type of text input you want to add:
Text Input: Let visitors enter or edit text in a field with a single line.
Text Box: Let visitors enter or edit text in a field that allows multiple lines of input.
Click and drag the text input element of your choice onto the page.
Click Settings on the input element and edit the following:
Type: (Text input element only) Select the type of information that the text input allows:
Text: Allow all character types in the input such as names, addresses, or any other info that does not follow a pattern.
Password: Conceal all characters entered in the password field.
Number: Allow only digits in the input.
Email: Allow email addresses only. If an invalid email address format is entered, a tooltip warns the user.
URL: Allow web addresses only. If an invalid URL format is entered, a tooltip warns the user.
Phone Number: Allow all character types in the input.
Field title: Enter a title that appears above the input element.
Show initial text: Choose the initial text that displays in the field and enter the placeholder and default text, if needed.
Validations: Choose from the following options:
Field type: Select the relevant options:
Required: Make it mandatory that visitors enter a value in the field before submitting.
Read only: Set the element to display content only. Visitors cannot edit the values but they can copy them.
Set character limit: Enable the toggle to limit visitor submissions to a set number of characters, then enter the maximum characters.
Add pattern validation: (Text input element only) Enable the toggle and enter regex code to add your own pattern validation to the browser's default validation.
Error message format: Choose how error messages appear: Inline or Tooltip.
Click the Layout icon
to edit the indentation, spacing, text direction and alignment.
Click the Design icon
in the Inspector panel on the right to customize the design.
Step 2 | Connect the text input to the CMS
Connect your text input to a dataset that connects to the collection and the field in which you want to save the submissions. If necessary, adjust the dataset mode and collection permissions. Then, add a 'Submit' button that visitors must click to send their inputs to your collection.
Wix Editor
In your editor, click the relevant text input element.
Click the Connect to CMS icon
.
Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
Click the Value connects to drop-down and choose the collection field in which you want to store the text input submissions.
Tip: Select + Add to add a new collection field for storing the submissions.
Set the dataset mode and collection permissions:
Click Dataset Settings in the panel on the right.
(Optional) Click the permission type next to Permissions to determine who can view, add, update, or delete collection content.
Click the Dataset mode drop-down and select the relevant option:
Write: Connected input elements can add new items to the collection, but cannot edit existing items.
Read & Write: Connected elements can update existing items in the collection. If you connect a 'New' button, visitors can use it to update existing items and add new items to your collection.
Create a 'Submit' button that visitors click to submit their responses.
Studio Editor
In your editor, click the relevant text input element.
Click the Connect to CMS icon
.
Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
Click the Value connects to drop-down and choose the collection field in which you want to store the text input submissions.
Tip: Select + Add to add a new collection field for storing the submissions.
Set the dataset mode and collection permissions:
Click Dataset Settings in the panel on the right.
(Optional) Click the permission type next to Permissions to determine who can view, add, update, or delete collection content.
Click the Dataset mode drop-down and select the relevant option:
Write: Connected input elements can add new items to the collection, but cannot edit existing items.
Read & Write: Connected elements can update existing items in the collection. If you connect a 'New' button, visitors can use it to update existing items and add new items to your collection.
Create a 'Submit' button that visitors click to submit their responses.
FAQs
Click questions below for answers to common questions about the text input element.
Can I use the text input element as a filter or search bar?
Not without using coding. The text input element allows users to submit responses that get saved to your CMS collection. It's not set up to be used as a search bar or filter by default. If this is a feature you would like to see in the future, you can vote for it here.
Workarounds:
You can use coding to allow visitors to enter keywords in the text input element and search for dynamic content that appears on the page. View a tutorial on using the text input element to search your collection content.
You can add the Wix Site Search app to allow visitors to search throughout all of your site's content.
Why is my text input field grayed out when visitors try to enter text in it?
The input field may appear grayed out for multiple reasons. To troubleshoot, check the following:
Dataset mode: Make sure that the dataset mode is set to 'Write' or 'Read & Write'.
Collection permissions: Make sure that the collection permissions are set correctly to allow the relevant user types to add or update content in the collection.
Text input element settings: Make sure that the element is set to collect the type of info you need it to (e.g. text, number, email). Also make sure it's connected to the relevant field type (e.g. text, number, URL). Click Settings on the element to set the type of content it can accept. Click the Connect to CMS icon
to change the field that the input's value connects to.
Learn more about troubleshooting user input elements.
How do I troubleshoot form submissions not saving to the CMS collection?
To troubleshoot issues with custom CMS form submissions not saving to the collection, follow these key steps:
Check the dataset connection: Ensure that the dataset is connected to the correct CMS collection (e.g., the "Submissions" collection). Verify that the dataset mode is set to 'Write', enabling the data inputs to save as new items.
Tip: If the form is meant to update existing items, use 'Read & Write' mode and choose 'Advanced' collection permissions.
Review collection permissions: Check the permissions of the collection in the CMS. Verify that the correct user roles are allowed to add content using the 'Collect content' or 'Advanced' permissions.
Validate input element connections: Click the Connect to CMS icon
on each input element and confirm it's properly connected to relevant fields in the dataset. Ensure field types match the type of data you want to collect.
Check the 'Submit' button click action: Ensure the 'Submit' button is correctly connected to the dataset's 'Submit' action. Additionally, confirm that success/failure messages are set up correctly to track the submission's outcome.
Sync sandbox and live collections (if applicable): If you are testing the form in a sandbox environment, ensure that changes are synced with the live collection.
Preview and test: In the editor, preview the form and submit a test entry to confirm that data is saving to the collection. Debug any issues you encounter during this test phase.
Learn more about creating a form with input elements that submit to your collection.
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.
To set up automations for CMS form submissions, first ensure the input elements of your form are set up correctly. Then, go to Automations in your site's dashboard and select the CMS form submitted trigger. Set up the actions you want to automate, such as sending emails or creating contacts. This allows you to manage form submissions efficiently.
Learn more about creating automations for CMS form submissions.
Can I display form submissions in a table, gallery, or repeater?
Yes, you can display form submissions in various formats such as tables, galleries, or repeaters.
Connect your table, gallery or repeater to a dataset that connects to the collection with the submissions. Then make sure the dataset mode is set to 'Read' or 'Read & Write' and that the collection permissions allow the relevant people to view the content.
How can I allow members to update their own submissions?
To enable site members to update their own submissions, set your collection permissions to 'Advanced' and check the 'Update' option for the 'Item's creator' role. This allows members to edit only the items they created. Ensure your dataset mode is set to 'Read & Write' so that the connected elements can read and update content.
How do I connect multiple forms to a single CMS collection?
You can connect multiple forms to the same CMS collection by connecting their input elements to datasets that all submit to the same CMS collection. Ensure that each form has a unique 'Submit' button and dataset to prevent conflicts. This setup allows you to gather data from various sources while maintaining a single collection for easy management.
Learn more about creating custom CMS forms with input elements.
Need A Professional Website?
Contact Us Today!
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected