Velo Tutorial: Creating a Form to Store User Input in a Database Collection
6 min read
Visit the Velo Documentation Center to onboard and continue learning.
In this tutorial, you’ll learn how to build a custom form to capture user input. We’ll show you how to lay out a form with User Input elements, create a database collection and connect it to these elements using a dataset. Finally, we’ll test the form in Preview mode and publish the site so that users can submit content.
1. Enable Velo
Velo adds advanced functionality to the Wix Editor, allowing you to create a more interactive and dynamic site.
To enable Velo:
On the Editor Top Bar, click Velo, and then click Enable Velo.
On the Editor Top Bar, click Velo, and then click Enable Velo.
Once you’ve done this, you’ll notice a few changes in the Editor:
- The Properties panel appears. If you close it, you can open it again from the Tools menu.
- The code panel is added to the bottom of the Editor.
- The Site Structure sidebar is added to the left of the Editor.
- More elements are available in the Add menu, including Database and User Input.
2. Create a Database Collection
A database collection is where you store the content you need for your site, or where you collect information submitted by your users. When you create a collection, you also need to define its permissions. These let you control what your users can do with the data in your collection. Here, we’re adding an empty collection that will store content that users submit through a form.
To create a collection:
To create a collection:
- In the Site Structure sidebar, click the + icon next to Database and select New Collection. If the Introducing Database Collections screen pops up, click Start Creating.
- In the Create a Database Collection screen, give your collection a name.
- From the dropdown, select the intended use for your collection. Consider which users you want to be able to read, write, modify, or delete your data. For your form, you would probably choose Form Submission, allowing anyone to submit content, but giving only you (the Admin) permission to read, modify, and delete its content.
- Click Create Collection.
Your new collection opens in the Data Manager, which is a spreadsheet-style table that lets you manage the content in your database collection.
3. Set Up Your Database Collection
Let’s assume that your site is offering a promotional giveaway, and you want visitors to be able to sign up for it by submitting their information. In this case, you need to add a field for each piece of information you want your users to submit.
To set up a collection:
To set up a collection:
- In the Data Manager on the right of the header row, click the + to add a field to your collection.
- Set up the field to match the information you want users to submit. Make sure to select the correct field type to match your field’s content.
- Create a field for each of your planned form elements.
4. Design Your Form
Your form must include elements that allow users to enter the information you want to collect. To set this up, you need to use User Input elements, which are available in the Add menu.
To get started:
To get started:
- Go to the Add menu and select User Input.
- Drag elements from User Input onto your page to design and lay out your form. You can select from elements like Input, Radio Buttons, Dropdown Lists, and Upload Buttons.
5. Set Up Your Elements
Once you add User Input elements, you’ll need to configure each element in its Settings panel. Settings include things like the type of the input, its placeholder text, its initial value, if the element is a required field, and if the element is read-only.
To set up your elements:
To set up your elements:
- Select a User Input element, click the Settings icon, and use the Options to configure it.
- Repeat this for each of the User Input elements in your form.
Now you’ll need to connect your User Input elements to your collection. We'll use a dataset to do that, which we’ll cover in the next few steps.
6. Add and Configure a Dataset
A dataset connects your elements to your collection. When you add a dataset, you'll need to decide which collection you want to connect to, whether you want your users to be able to read and/or write to your collection, and more.
To add a dataset to your page:
To add a dataset to your page:
- On the Add menu, click Database, and then Form Dataset.
- Select the dataset that was added to your page, and click Manage Dataset.
- In the Dataset Settings panel, under Connect a Collection, select your collection.
- Close the panel.
7. Connect Your Form Elements
Once you have your dataset configured, you can connect your elements to it. You need to go to each of the elements in your form and connect it to the same dataset. Each time you connect an element, you also define which field in your collection its value should connect to.
To connect your User Input elements:
To connect your User Input elements:
- Select an element and click its
Connect to Data button. - In the Connect panel, select the field in your collection where the user-entered information should be saved.
- Repeat this for each of the User Input elements in your form.
In the next step, we'll create a Submit button. The same dataset will handle saving the content that the user entered into the collection.
8. Create a Submit Button
Now that all your elements are connected to the same collection through the same dataset, you need to allow users to submit their information. To do this, add a button to your page, connect it to the same dataset as the other elements, and define its click action.
To create a Submit button:
To create a Submit button:
- Add a button to your page and change its text to Submit.
- Click the Connect to Data button.
- In the Connect Button panel, under Link connects to, select Submit.
- Optionally, create a Submit Message (step 5).
- Under When successful, navigate to, the default is Stay on this page. You can also choose A link... to send users to another page after submission is complete.
When users submit data, it will be validated before it is saved.
9. Test Your Form
Now you can test your form in Preview mode. The content you submit will be saved to your Sandbox Database, which is used only in the Wix Editor and is visible only in Preview mode.
To test your form:
To test your form:
- Click Preview.
- Fill in the fields and click the Submit button.
- Go back to the Editor and then check your collection to see the new item that was created.
10. Publish Your Site
Now it’s time to publish your site so that users can submit their content.
Publishing your site creates an empty version of your collection with all the fields from your Sandbox Database. The content your users submit is saved to your Live Database, which you can access from your dashboard.
In the Editor, click Publish to publish your site.
Publishing your site creates an empty version of your collection with all the fields from your Sandbox Database. The content your users submit is saved to your Live Database, which you can access from your dashboard.
In the Editor, click Publish to publish your site.
11. View Your Live Data
When you publish your site, your form will be available to your site visitors. When a user submits a form in the published site, the form data will be saved to your Live Database.
To view user-submitted information:
To view user-submitted information:
- Click Settings from the top bar, and then click My Dashboard.
- On the Sidebar Menu, click Database.
- Click the collection to view your live data.
You can sort and filter your data here. For example, you can display the Date Created system field and then sort by it so you can see the latest submissions.
Next Steps
With Velo you can add more functionality to your form:
- Create a form for editing the data in a collection.
- Enhance your form functionality with code.
- Add validations using dataset hooks and collection hooks.
- Add interactivity using the Velo API.
- Post the form to any web API-enabled 3rd party using web modules and dataset hooks.
Did this help?
|