Creating a Custom User Input Form in Wix | Corvid Code | Wix Tutorial

In this article, I outline the steps to create a simple custom input form. I go over the specific database fields required. As well as the form design. I highlight the specific fields I use and the process of setting up the form itself.

Ready to get started? Here's your crash course in custom input form creation!

Things to Consider

What is a Custom Input Form?

A custom input form, when set up correctly, allows you to create a custom form on your live site. This form allows you to collect data from your site-visitors and store it in a database which is only visible to you if you so choose.

Why Use a Custom Input Form?

Custom import forms allow you to collect and store data from your site visitors free of charge. This form is yours since you created it from scratch. You can however, add applications that have pre-built forms.(Not Yours) Some examples of these applications include:

• Wix Forms

• 123-Form Builder

• Form Builder Plus

While applications like these can be useful, quick, and easy to use, they often come with limitations. Also, they all include some kind of monthly fee for premium form features.

When you build your forms from scratch. You have complete control and freedom to customize your form the way you want. Also, you won't get sucked into a monthly subscription fee.

Getting Started

Step 1: Activate Wix Developer Tools

First things first. To start creating your database you will need to enable corvid. Located inside the Wix editor:

1. Select Dev Mode from from the menu bar

2. Press the Enable Corvid button

Step 2: Create a database

The next step is to create a database. In the site structure panel located at the left side of the corvid enabled editor view, click the plus icon next to the word database to create a new database collection.

If you don't know the basics of creating a database yet, no worries, I wrote an article on how to do that using the link below.

https://www.wixtrainingacademy.com/post/how-to-create-corvid-databases-corvid-by-wix-tutorial

Step 3: Name your database collection

Your database collection will hold and store the information your site visitors input from your live site. Make sure to name it something that represents the data inside of it so it's easy to remember.

You can not put any spaces when naming your database collection. If you ever need to reference this collection inside your site/page code. You will use the collection name. Which is why there can be no spaces in the collection name.

Step 4: What is this database collection used for?

In this example we are using the database collection to collect potential client information using a form on our live site. We want anyone to be able to submit data to this collection regardless of their permissions. So from the drop down menu we will select the option "Form Submission."

The option you choose will depend on the type of form you are creating. Make sure to think carefully about what information you need to obtain from your site visitors. Also, make sure you know who is allowed to fill in that information on your site and what permissions they require.

For instance, If you are creating an application form that candidates will fill out to join your team. You might create fields for:

• First Name

• Last Name

• Address

• Phone Number

• Education

• Experience

• The ability to upload a resume.

The list goes on.

Make sure to spend some time thinking about what information you collect from your site visitors and how that information will be used. I've said this before but i will say it again. Building a solid foundation is the key to website stardom.

Step 5: Creating your fields

Like I mentioned earlier, the fields I use in this example are First Name, Last Name, Address, Phone Number, Education, and Upload resume. All the fields in this example are under the field type Text. Except for the upload resume button which is under the field type document. After the database and fields are created, it's time to design the form itself.

Step 6: Set Up Your Elements

Start by adding a new page in the editor by clicking the add button as seen in the image below. For this example we are adding a site page.

Next go to User Input and drag and drop the user input elements onto the page. These will be located under the text option as shown in the image below.

Step 7: Add a Dataset

Add a Form Dataset from the options menu as seen in the image below.

This dataset will not be seen on your live site. You can place it anywhere you like on the page.

Step 8: Connect Your Page Elements

Connect each input element to the appropriate corresponding field type in the database collection.

Step 9: Create a Submit Button

Next step would be to add a submit button. Simply drag and drop a button from the menu options. You can add any button you like and design it to your liking. Change the name of the button by double clicking it.

Under the option "Click action connects to": Connect your submit button to the dataset action "Submit". You can then choose where the site visitor is taken once they have successfully submitted the form.

Reading this article and realizing you'd like to save some of your time, stress and frustration? Don't worry, we get that a lot! If you'd like to work with our team on getting your development project off the ground, click here to submit your project request.

More of a visual learner? Check out the full video below.