Forms are the bridge between your website and its visitors. Whether you’re collecting customer inquiries, signing up subscribers, or gathering feedback, a well-designed form can make all the difference.
Wix Forms makes this process effortless, offering a range of ready-made templates and customizable options to fit your needs. From simple contact forms to fully tailored solutions, Wix gives you the flexibility to create, manage, and track submissions with ease.
In this guide, we’ll break down everything you need to know about Wix Forms—how they work, the different types available, and how to choose the best one for your website. Let’s dive in!
Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive 'Velo for Beginners' course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.
Need help with your site? The Wix Wiz team is at your side. Schedule a one-on-one consultation or have the entire team onboard with our development and support plans.
What is a Wix Form?
A Wix Form is a powerful tool that helps you collect and manage information from your website visitors. Whether you're gathering contact details, customer feedback, registrations, or inquiries, Wix Forms make the process seamless. Instead of manually handling submissions through emails or spreadsheets, these forms organize everything in one place, saving time and reducing errors.
What makes Wix Forms even better is their flexibility. You can customize them to match your brand, choose different question types, and even automate responses. Whether you're running a small business, a nonprofit, or an online store, a well-designed form ensures smooth communication and enhances user experience.
Types of Wix Forms
Wix provides three types of forms, each offering a different level of customization and control. The right choice depends on how much flexibility you need when creating, editing, and managing form submissions.
Wix Forms
Wix Forms are the default form-building option on Wix, designed for quick setup and ease of use. They come with pre-designed templates and a drag-and-drop editor, making them perfect for contact forms, surveys, and lead generation forms.
You don’t need technical skills—just pick a template, tweak the design, and start collecting responses.
This option works best for:
✔ Contact forms for businesses and personal websites.
✔ Basic lead generation and newsletter sign-ups.
✔ Event registrations and simple feedback collection.
However, not all Wix Forms are the same. There are Old Wix Forms and New Wix Forms, each with a slightly different approach.
Old Wix Forms lets you build and edit directly on your website. Everything happens within the website editor, making changes feel instant and seamless. But when it comes to handling submissions, they follow a basic structure—all responses are stored in a single table, making it harder to separate real entries from spam or accidental submissions.
New Wix Forms, on the other hand, are managed from the Wix dashboard. This means editing is done in a more centralized way, keeping things organized. When users submit responses, their data is automatically categorized into Submissions, Spam, and Trash, making it easier to filter through important entries without clutter.
This is especially useful for businesses that receive a high volume of form submissions and need a structured way to manage leads or customer inquiries.
Wix Forms are a great option for those who want a straightforward, no-fuss form solution. They are easy to set up and do the job well, but they might not be enough for users who need more customization beyond basic templates.
No-Code Custom Forms
Some businesses need more than just a simple contact form. They want complete control—how their forms look, how they function, and where the data goes. This is where No-Code Custom Forms come in.
Unlike Wix Forms, which are limited to predefined templates, No-Code Custom Forms allow you to build a form from scratch without writing a single line of code.
This option is ideal for:
✔ Businesses that require customized lead generation forms.
✔ Organizations needing advanced data collection and categorization.
✔ Users who want deeper customization beyond standard Wix Forms.
These forms are beneficial when you need to collect complex data, such as multi-step applications, booking forms with conditional logic, or detailed customer feedback.
Since they integrate directly with Wix’s database, they offer more advanced options for storing and organizing responses.
Instead of being limited to a standard submission table, users can connect forms to a dataset, automate workflows, or even link submissions to dynamic pages.
For businesses that rely heavily on data collection—like real estate agencies, event organizers, or e-commerce stores—No-Code Custom Forms provide a level of flexibility that standard Wix Forms simply can’t match.
They allow for deep customization while keeping everything user-friendly, ensuring that even without coding skills, you can create forms tailored to your exact needs.
Key Differences at a Glance
Editing Method: Old Wix Forms allow direct on-page editing, while New Wix Forms are edited through the dashboard. Custom Forms provide deeper customization beyond drag-and-drop tools.
Submission Management: New Wix Forms categorize submissions, while Old Wix Forms store them in a single table. Custom Forms offer advanced data structuring options.
Customization Level: Old and New Wix Forms provide limited styling, while Custom Forms allow full control over design and data collection.
Each form type serves different needs, so selecting the best one depends on how much control and functionality you require.
How to Create and Edit Wix Forms
Now that you understand the different types of Wix Forms, let’s walk you through the process of creating one. In this section, we’ll start with the old Wix Forms, showing you step-by-step how to build and customize your form directly on your website.
Creating and Editing a Wix Form Using the Old Form
To create and edit a Wix form using the old forms, follow these steps:
Step 1: Click the ‘Add element’ button at the top right corner.
Step 2: Click the ‘Contact & Forms’ button. From here, you'll see different options, but since we’re working with old Wix Forms, go ahead and select ‘Old Forms.’
Step 3: Now, it’s time to choose a template. Wix provides a variety of pre-designed forms, so pick one that fits your needs. Once you’ve made your choice, drag it onto the canvas—this is where the magic happens.
Step 4: With your form placed on the canvas, you can edit it directly on your website. Want to change a field label? Just click on it and type. Need to adjust the form’s layout? Simply drag and resize elements as needed. Everything happens in real-time, making it super easy to customize.
Step 5: You can make any edit, such as changing the text directly within your Wix website. To do this, double-tap on the text you wish to edit and make the edit directly.
You should have something like this. And that’s it! With just a few clicks, you have a fully functional form that’s ready to collect responses.
Creating and Editing a Wix Form Using the New Form
Now, let's switch things up a bit. Creating and editing a Wix form using the new form follows a slightly different approach, but don’t worry—it’s just as easy.
Step 1: Click the ‘Add element’ button at the top right corner of your Wix editor.
Step 2: Select ‘Contact & Forms’, then choose ‘Create New Form.’ This option gives you access to the updated form-building tools.
Step 3: Browse the available templates and pick one that suits your needs. Once you've chosen, drag it onto the canvas—just like you did with the old forms.
Step 4: Click ‘Edit Form.’ Instead of making edits directly on your site, Wix will now open a dedicated dashboard where you can fine-tune every detail. From adjusting form fields to customizing submission settings, you have full control over how your form looks and functions.
This is how the dashboard should look like:
Both types of forms allow you to create and edit your Wix form, but their approaches differ, enabling you to choose the best option for your needs.
ii. Form Submission: This is another key difference between the old and new types of forms. Both support form submission; however, there are slight differences in how submitted data is arranged.
For instance, the old form submission table presents submitted data in a single table without categorization. In contrast, the new form submission table categorizes submitted data into three tabs: Submission, Spam, and Trash.
This categorization helps filter the submitted data by separating valid submissions from potential spam and those you have moved to the trash.
To view the submission form using the old form, the steps are as follows:
Step 1: Navigate to your dashboard and scroll down to the ‘Customers & Leads’ section.
Step 2: Click the drop-down button and select ‘Forms & Submissions.’
Step 3: Click the ‘Old Form’ tab.
Step 4: Click ‘View submission table.’
Step 5: This table should appear on your screen.
The old form only displayed the submitted data without categorizing it into tabs.
To view the submission forms using the new form, the steps are as follows:
Step 1: Navigate to your dashboard and scroll down to the ‘Customers & Leads’ section.
Step 2: Click the drop-down button and select ‘Forms & Submissions.’
Step 3: Click ‘View Submission Tables.’
Step 4: This table should appear on your screen.
Notice how the new form categorized the submitted data into three tabs.
How to Build Custom Forms
In this section, you'll learn how to create a custom form in Wix from scratch. We'll guide you through the process of designing your form, setting up data collection, and ensuring seamless functionality.
Whether you're collecting customer inquiries or processing user submissions, you'll gain full control over your form’s structure and behavior. Get ready to dive in and build a form that fits your exact needs!
Follow these steps to build your custom form:
Step 1: Before we start building, you need to turn on Dev Mode in Wix. This unlocks advanced features that allow you to fully customize your form’s behavior.
Step 2: Once Dev Mode is enabled, click the ‘Add Elements’ icon on the left panel and navigate to the ‘Input’ section. This is where you'll find different types of fields like text inputs, dropdowns, checkboxes, and radio buttons.
Step 3: Decide what kind of information you want to collect. For example, if you need users to enter their name or email, drag a Text Input field onto the canvas. If you want them to select from multiple options, you can add a dropdown or radio button.
This should appear on your screen.
Step 4: Now, let's tweak these fields to match your needs. Click on any input field to edit its settings. If it's a Text Input, click the ‘Text’ drop-down and select the appropriate data type.
Step 5: You can add necessary edits to the form according to your needs.
For instance, to edit the text input data, double-click the ‘Text input.’.
Step 6: Click the ‘Text’ drop-down arrow to edit the text type. Then, apply the necessary text type to ensure the data type in your input is the same as the data type you want to get. For instance, if you're collecting an email, choose the email format to ensure users enter valid addresses.
Step 7: A form isn’t complete without a submit button. Head back to ‘Add Elements’, select ‘Button,’ and drag it onto your form. This button will handle form submissions and send user data to your database.
It should look like this after dragging a button to the form you are building.
Once your form is designed, you need a database collection to store the submitted data. In Wix, a collection acts as a database where all form entries are saved. Creating one allows you to easily view, manage, and process submissions.
At this point, your form interface is ready. Next, you'll connect it to a database and ensure it properly stores user data. Stay with me—we’re almost there!
How to Create a Collection
Since we've covered collections in a previous post, you already know that a collection is where your form submissions will be stored. If you need a refresher, you can check out our guide on creating and managing collections. But for now, let’s walk through the process step by step.
Step 1: Open the Database Panel
First, click on the Database icon in the left panel of the Wix Editor. This is where you’ll manage all your data collections.
Step 2: Add a New Collection
Click the plus (+) icon next to ‘Your Collection.’ This will open the setup panel where you can define how your data is stored.
Step 3: Confirm the Setup Screen
A new screen should appear, prompting you to create your collection. This is where you decide whether to start from scratch or use an existing template with the help of Ai.
Step 4: Choose ‘Start from Scratch’
Since we’re building a custom collection, select ‘Start from Scratch’ and then click the ‘Next’ button. This gives you full control over your database structure.
Step 5: Name Your Collection
Give your collection a relevant name—something that reflects its purpose. If this form is for collecting customer inquiries, you could name it ‘Contact Form Submissions.’ Once you’ve named it, click ‘Create.’
Step 6: Access the Database Editor
A new dashboard will appear, allowing you to set up your collection manually. This is where you define what type of data your form will store.
Step 7: Create Your Table
Think of your collection as a spreadsheet that holds user submissions. To structure it properly, double-click the ‘Title’ header to rename it.
Step 8: Edit Your Fields
Click the ‘Edit’ button to rename the field based on the form input. For instance, if you’re collecting email addresses, change the field name to ‘Email.’
Step 9: Add More Fields
Repeat the previous step for each form input—such as name, phone number, and message—so your database has all the necessary fields to store user submissions.
Setting Collection Permissions
Once your collection is structured properly, the next step is to configure permissions to control who can access and submit data.
Step 1: Open the Permissions Settings
Click ‘More Actions’ in the database panel, then select ‘Permissions & Privacy.’
Step 2: Adjust Permissions Based on Your Needs
Wix offers different permission settings:
‘Show Your Content’ – Controls who can view form submissions.
‘Collect Content’ – Determines who can submit data.
‘Custom’ – This lets you define specific rules, such as restricting access to admins or allowing only logged-in users to submit.
Step 3: Set Permissions for Your Form
For this example, set permissions so that anyone can enter their data. This is ideal for public forms like contact forms, feedback forms, or lead capture forms. Once permissions are set, your collection is ready to receive and store form submissions! Next, let’s connect it to your custom form.
Connecting Your Form to the CMS
Now that your collection is ready, the next step is to connect it to a CMS (Content Management System) so your form submissions are stored and managed properly.
This ensures your data is organized, accessible, and dynamic—allowing you to display, update, or manage form entries with ease.
Step 1: Open the CMS Panel
Click the ‘CMS’ icon on your Wix dashboard to access the content management tools.
Step 2: Add a New Content Element
Scroll through the available options and select ‘Add Content Elements.’ This will allow you to create a connection between your collection and the site elements.
Step 3: Create a Dataset
From the options, select ‘Dataset.’ This dataset acts as a bridge between your form and the collection, enabling data to flow smoothly.
Step 4: Link the Dataset to Your Collection
A setup window will appear. Select the collection you just created from the list and click ‘Create.’ This links the dataset to your database.
Now, it's time to connect each form field to the dataset, ensuring every piece of user input is stored properly.
Step 5: Link Each Form Field
Click on a specific form element (e.g., the Name input field) and select ‘Connect to CMS.’
Step 6: Set the Data Connection
In the ‘Connection’ settings, choose the appropriate collection field. For instance, if you are connecting the name field, select ‘Name’ as the corresponding data field.
Scroll to the ‘Connection’ setting and select the ‘Name’ option to connect the ‘name’ text field to a CMS.
Step 7: Repeat for Other Fields
Follow the same process to connect all remaining form fields (Email, Phone Number, Message, etc.) to your CMS.
Once all input fields are linked, you need to connect the Submit button so user data gets stored correctly.
Step 8: Configure the Button Settings
Click on the Submit button and navigate to the ‘Data Settings’ panel.
Step 9: Choose the Dataset Mode
Select the dataset mode based on how you want the data to function:
Read – Displays existing data but doesn’t allow changes.
Write – Allows users to submit new entries to the database.
Read & Write – Displays existing data while allowing users to edit or submit new entries.
For a form submission, select ‘Write.’
Step 10: Finalize Connection
Under the ‘Connections’ section, choose ‘Submit’ to finalize the setup.
Adding Success & Error Messages
To enhance user experience, add confirmation messages that notify users whether their submission was successful or if an error occurred.
Step 11: Add a Success Message
Click the ‘Add Success Message’ icon and enter a confirmation text (e.g., ‘Your form has been submitted successfully!’).
Click ‘Add Failure Message’ to set up an error notification in case the submission fails.
Once everything is set up, it's time to go live!
Step 12: Click ‘Publish’
Hit the ‘Publish’ button to make your form active and start collecting submissions in real-time.
Your custom Wix form is now fully functional, connected to a CMS, and ready to gather user data seamlessly! 🚀
Viewing Submitted Forms
Once your form is live and collecting responses, you'll want to access and manage the submitted data. Wix makes this easy by allowing you to view all form entries from your collection dashboard.
Step 1: Open the CMS Panel
Click on the ‘CMS’ button from your Wix dashboard to access your content collections.
Step 2: Select Your Collection
In the CMS panel, find ‘Your Collection’ and select the name of the collection linked to your form.
Step 3: View Submissions
Your submission dashboard will now display all entries submitted through the form. Here, you can review, filter, and manage user responses as needed.
That’s it! 🎉 You now have a fully functional custom Wix form that collects, stores, and displays user submissions seamlessly. 🚀
Custom Forms with Code
If you're looking for even more flexibility and control over your form, custom forms with code allow you to enhance functionality beyond the no-code options.
This approach is perfect for those who want to add dynamic features, automate processes, or fine-tune how their forms interact with data.
There are two key approaches to building custom forms with code in Wix:
1. Datasets + Velo Code
This method combines Wix datasets and Velo code to create a form that connects directly to a database collection while allowing you to add custom logic.
Datasets handle the connection between form fields and the database, allowing data to be stored and retrieved effortlessly.
Velo Code is used to enhance functionality, such as validating inputs, controlling how data is submitted, or creating dynamic interactions.
This is a great balance between no-code and code, offering more flexibility while keeping some automation intact.
2. Velo Code Only
For those who want complete control, you can build a fully custom form using only Velo Code, without relying on datasets.
This method allows you to manually handle data submission, validation, and storage.
You can customize every aspect of how your form works, from unique user interactions to integrating with third-party services.
It’s ideal when you need advanced features that datasets alone can’t provide.
Whichever method you choose, coding your form ensures maximum customization and full control over your form’s behavior and user experience. 🚀
How to Build Custom Forms With Dataset and Velo Code
If you want more control over how your form handles data, using Velo Code with a dataset is a great approach. This method allows you to manually handle data submission, giving you flexibility beyond the standard no-code setup. Follow these steps to build your custom form:
Step 1: Open the Velo IDE
At the bottom of your Wix Editor, locate and open the Velo IDE. This is where you’ll write the code that controls how your form functions.
Step 2: Connect Form Elements to a Dataset Using Velo Code
To link your form fields to a dataset using Velo Code, you’ll need to use functions from the dataset API. You can check Wix’s dataset documentation for a full list of available functions.
One of the key functions you’ll use is save(), which stores data in a database when triggered by an action.
For example, we’ll use save() to store the data in our form once the user clicks the Submit button. To demonstrate this, we’ll continue using the same form we created in the no-code method.
Step 3: Disconnect the Submit Button from the Dataset
Since we’ll be submitting the form manually using code, we first need to disconnect the Submit button from the dataset.
Click the Submit button.
Click Connect CMS to open the connection settings.
Step 4: Remove Dataset Connection from the Submit Button
Navigate to the Connection settings.
Click on Choose a dataset and select Not connected to remove the automatic dataset connection.
Step 5: Click ‘Not connected’ to disconnect your submit button from the collection dataset. At this point, the Submit button is no longer linked to Wix’s automatic submission system.
Step 6: Assign a Unique ID to the Submit Button
To reference the Submit button in your Velo Code, assign it a unique ID.
Click the Submit button.
Scroll down to the Properties & Events section in the Velo IDE.
Change the ID to a unique name, like submitBtn.
Step 7: Assign a Unique ID to the Dataset
The dataset also needs a unique ID so we can reference it in the code.
Click Dataset Settings in the CMS panel.
Change the dataset ID to something simple, such as myDataset.
Step 8: Create a Submit Function to Save Data
Now, let’s write a function that saves the form data to the database.
This function will:
Select the dataset using its ID (myDataset).
Use the save() function to store the data.
Step 9: Link the Submit Button to the Function
To make the Submit button trigger our function, we’ll use the onClick() function in Velo Code.
Select the Submit button using its ID (submitBtn).
Use onClick() to call the submit function when the button is clicked.
Step 10: Ensure the Form is Ready Before Submission
Before saving data, we need to check that the form is fully loaded.
Use the onReady() function to ensure all form elements are ready before users interact with them.
Before publishing, test your form to ensure everything works properly. Click Preview in the Wix Editor, fill out the form, and click Submit to confirm that the data is stored in your database. If everything works correctly, click Publish to make your form live.
Adding a Personalized Success Message
One of the many advantages of using Velo code is that you can add more dynamic features to your form without restrictions. A great example is displaying a custom success message after a user submits the form.
Instead of using a static message, you can make it more interactive and user-friendly. Follow these steps to set this up:
Step 1: Disconnect the success message text from the dataset
By default, Wix forms allow you to link a success message directly to a dataset, but we want to handle this manually using Velo code. To do this, click on the Success message text element, navigate to the Connection section, and find the Choose a Dataset option.
Change this setting to Not connected so that the message can be triggered dynamically through code instead.
Step 2: Assign a unique ID to the success message text
To control the success message using code, you need to give it a unique ID. Click on the success message text, then open the Velo IDE at the bottom of the screen. Scroll to the Properties & Events section and find the ID field.
Rename it to something meaningful, such as successMessage, so you can easily reference it in your code.
Step 3: Modify the success message text content
Since the message will be dynamically updated through code, you don’t need to worry about setting a final text here. However, it’s a good practice to add a placeholder message for now.
You can enter something like “Your submission was successful!” or any random text. The actual message will be displayed when the form is submitted.
Step 4: Hide the success message placeholder
You don’t want the success message to be visible at all times—it should only appear when a submission is successful. To hide it by default, click on the Success message text, then look for the Hidden option and enable it.
This ensures that the message only appears when triggered by the Velo code.
Step 5: Repeat the same steps for the error message
Just like the success message, you should also set up an error message for cases where the form submission fails. Click on the error message text, disconnect it from the dataset, assign a unique ID (e.g., errorMessage), and hide it by default.
This will allow you to show the error message dynamically if something goes wrong during submission.
Step 6: Use the ‘onAfterSave’ function to trigger the success message
Now that the success message is set up, it's time to make it work using Velo code. The onAfterSave() function will be used to display the message after the form submission is successful. Open the Velo IDE, locate your dataset, and write a function that listens for a successful save event.
When triggered, this function will display the hidden success message and ensure users know their form was submitted successfully.
The ‘#mydataset’ ID selects the dataset, and then the ‘onAfterSave’ function is applied to the dataset. The use of the ‘onAfterSave’ function is to execute an operation after the data has been saved successfully.
‘onAfterSave’ takes two parameters, which are ‘itemBeforeSave’ and ‘itemAfterSave.’
‘itemBeforeSave’ refers to the item before the form is saved, while ‘itemAfterSave’ refers to the item after it has been saved.
Then, the ‘successMessage’ ID gets the success message text, and the 'show’ function is applied to make the message visible.
Once the data has been saved successfully, then the success message will be displayed.
Step 7: Set a personalized message after a user submits the form.
The ‘name’ variable holds the user name by using the ‘itemAfterSave’ to select the user name after the form has been saved.
The username is then added dynamically to the success message text using the ‘success message’ ID.
The ‘show()’ function is applied to the ‘successmessage’ ID to make the success message visible.
Step 8: Publish your form and enter each field to see the functionality in action.
Notice the user name was added dynamically after submitting the form.
Step 9: Use the ‘onError’ function to add an error message in case an error occurs when submitting the form.
The ‘onError’ function is used to act after the dataset operation encounters an error. In this case, the ‘onError’ will be triggered if the validation fails, such as when a required field is not entered.
It takes two parameters, which are ‘operation’ and ‘error.’
‘Operation’ represents the name of the function that caused the error, and the ‘error’ represents the error that occurred.
Step 10: Set the error message.
The ‘errorMessage’ variable stores the error message using the error parameter and its child property of ‘message.’ This will display the cause of the error.
The ‘errormesage’ ID selects the error message text and applies the text element to set the error message. Then the ‘errorMessage’ variable is added to dynamically display the cause of the error.
The ‘show()’ function is applied to the ‘errormessage’ ID to make the error message visible.
Step 11: Publish your form and omit a field to see the functionality in action.
Notice the cause of the error was added dynamically to the error message after the submission failed.
Step 12: Click the CMS button and navigate to your collection to view all form submissions.
Using Dataset and Velo code to build your custom form is a great option if you intend to add more dynamic features and functionalities to your forms with simple lines of code and then a dataset to connect to your database collection content with your page element
How to Build Custom Forms With Only Velo Code
If you want full control over your form’s functionality, using only Velo code is the way to go. This approach allows you to create custom behaviors, add validations, and handle submissions dynamically without relying on datasets.
Follow these steps to build a custom form entirely with Velo code.
Step 1: Set up your form interface
Design your form by adding input fields, labels, and a submit button. Ensure each element has a unique ID for easy reference in your code.
Step 2: Add a Lottie animation for a page loader
To enhance user experience, add a Lottie animation as a loading indicator:
Click Elements > Embed > Lottie
Choose or upload an animation
Adjust its visibility settings to show only when the form is submitting
This should appear on your screen.
Step 3: Create a ‘Submit’ function to save form data
In Velo IDE, write a function to capture user input and store it in your database. Ensure the function includes validation checks and displays success or error messages based on the submission result.
The ‘async’ function handles the synchronous operation of submitting data to a database.
The ‘firstName’, ‘lastName’, and ‘email’ variables store the input value of each element, respectively, using their ID and the ‘value’ element.
Step 4: Add an event handler to the submit button.
The ‘onClick’ function triggers the 'submit’ function once the submit button is clicked.
Step 5: Create an object that holds all the items that will be saved.
The ‘formSubmission’ variable holds all the elements that will be submitted to the database rather than submitting them at once.
Step 6: Import the wixData API to save these elements.
Step 7: Use the ‘try-catch’ method to handle the synchronous process of submitting to the database gracefully.
The ‘await’ keyword pauses the execution of the code until the ‘wixData.save()’ operation completes.
Once the operation is complete, the result of the save (e.g., success confirmation or an error) is stored in the ‘saveSubmission’ variable to ensure the data in ‘formSubmission’ is saved to the ‘myCollection’ properly.
The ‘successMessage.text’ displays the success message, and the ‘successMessage.show’ makes the success message visible.
Step 8: Use the ‘catch’ method to display the error message.
The ‘errorMessage.text’ displays the error message, and the ‘errorMessage.show’ makes the error message visible.
Step 9: Add the loader to signify to the user that the data is processing.
The ‘button.disable’ operation disables the button to prevent users from clicking the submit button countless times when the form is loading. Then, the ‘loader.show’ operation makes the Lottie animation visible when the form is loading.
Step 10: Enable the submit button in the error block to enable the user to resubmit the form after they encounter an error.
Step 11: Hide the loader automatically to ensure it is only visible when the form is loading.
Step 12: Publish your site to see the form functionality in action.
Step 13: Clear all the input values after submitting the form.
Assigning each of the values in the input element to a null value will automatically clear the values after submitting the form.
The next step is to work on the form validation. Notice if you try submitting an empty value in the form, you will get a success message. To correct this, follow these steps:
Step 1: Create a function to ensure all fields are valid before submitting.
The ‘valid’ function checks if all input values are valid. It is applied to each element in the form to check if the inputted values are valid.
Then the logical AND operator ‘&&’ is applied to the variables, which checks the validity of each element. If all the elements are true, then the ‘valid’ variable becomes true. If one of the elements is false, then the ‘valid’ variable equals false.
Step 2: Apply the validation logic.
The value of the ‘checkValidity’ function is assigned to the ‘isValid’ variable. Then if the value of the ‘isValid’ variable is false, the code will be exited from the submit function to prevent the user from submitting the form when they omit any of the input fields.
The submit button is then enabled to allow the user to resubmit the form while the loader is hidden.
Step 3: Add an error message functionality to the form in case a user omits a field.
In the ‘checkValidity’ function, the ‘errorMessage’ variable holds a generic error message if any of the input fields are empty.
Then the ‘if’ statement checks if the value entered in each input element is valid; if true, it adds the specific cause of the error to the generic message in the ‘errorMessage’ variable. Then, the ‘valid’ variable is set to false.
Step 4: Display the error message.
If any of the input elements are omitted, the ‘valid’ variable becomes false. Then the ‘if (!valid)’ statement handles this case by displaying the error message to the user.
Step 5: Hit the publish button and test the functionality of the error message.
Step 6: Hide the error message after the user enters an input in the form field or when the required fields have been entered.
The ‘onInput’ function triggers an action when the input field receives input. Once the user inputs a value in any of the input fields, the error message will automatically be hidden.
```
```
Then, you can proceed to view all submissions in your CMS.
Building custom forms with only Velo code is a great option if you want to have total control over the functionalities and features of your forms.
Conclusion
In this tutorial, you have learned about the different types of forms in Wix, including the old and new forms that allow you to build forms by selecting from a range of available templates.
You have also learned how to build forms from scratch without writing a single line of code using the no-code custom form approach. The third type of form takes the functionality further by allowing you to create customized forms with additional features and functionalities using Velo Code and dataset connections or using only Velo Code to control your form.
At this point, you should be able to decide which type of form best suits your website’s needs and build them with ease. Kudos to you—you made it this far!
Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive 'Velo for Beginners' course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.
Need help with your site? The Wix Wiz team is at your side. Schedule a one-on-one consultation or have the entire team onboard with our development and support plans.
Kommentare