How to Create an Online Form for Your Website
By thatonesupport
Online forms are conveniently there for us throughout many of the actions that we perform online. Whether signing up or logging in, providing our shipping information or subscribing to a newsletter, online forms can be trusted to guide us along the way.
And if you’re in the process of creating a website for your business, it’s very likely that you’ll need to incorporate a form or two in order to better cater to your site visitors’ needs – as well as your own needs as a business owner.
When done well, online forms become a seamless part of the browsing experience, adding ease and efficiency to our online activities. This guide covers everything you need to know about online forms, from what they are, to an explanation of their major components, and how to add them to your website.
What is an online form?
An online form, also known as a web form or an HTML form, is an interactive web page that allows for user input. The data received through the form is then automatically sent to a server for processing.
There are many types of online forms, ranging from contact forms to the RSVP section of an event website, to forms that manage online orders and payments on an online store, and much more.
In essence, forms can be used on your website, wherever you’d like to collect information from your site visitors, be it their email address or an answer on whether they’ll be attending the party or not. Another possible use for an online form is to gate some of your content to certain site visitors only, by requiring them to sign in to a members area.
The main elements of online forms
Online forms, much like their paper counterparts, are usually composed of a question or a series of questions. These are paired with fields in which users can either type in their answer, or select the most appropriate response out of several available ones.
Online forms can be composed of just one or several types of fields, mixed and matched. The main types of fields in online forms are:
- Text boxes: Also known as input fields, text boxes are blank fields meant for text to be typed freely into them. For example, typing in a password during login. Best for: Open-ended questions or questions with an infinite amount of possible answers (such as a name or password).
- Drop-down lists: Drop-down lists are fields that once clicked, open up into a list. The list includes several items from which a single item can then be chosen. Best for:Picking one option out of a list.
- Check boxes: Small square boxes that are ticked or unticked when clicked. Most forms allow users to pick more than one option per check box field (also known as multi selection). An example of a check box is the box you tick to approve the terms and conditions of a web service. Best for: Picking one or more options out of a list.
- Radio buttons: Small circular buttons. Radio buttons usually come in a list of two or more optional answers, out of which the user can select the single most appropriate answer by clicking it. Once selected, radio buttons show an added dot in their center. Best for: Picking one option out of several options.
- Submit button: The last button at the bottom of an online form is usually reserved for submitting the answers upon completion. The button copy can vary from “Send” to “Get in Touch” or “Request a Price Quote,” but the intention stays the same throughout – the provided information will now be sent over to the website owner. Acting as the call to action of the form, the submit button will usually stand out in its design from the rest of the page, in order to draw attention. Best for: The very end of an online form.
- Feedback message: An automated feedback message that shows up once the submit button is clicked, signaling that the form went through successfully, or alternatively notifying of a problem in its completion. It usually appears on the same page as the form itself, but can also open in a separate pop-up window. Best for:Once the form has been submitted.
Best practices for creating online forms
A good online form is one that follows these three golden rules: it should be intuitive to use, quick to complete, and require little effort on the user’s part. A form that manages all three of these factors should experience lower abandonment rates, leading to more answers submitted. While there are many tips on creating online forms, below are the three main ones explained:
1. Make it intuitive to use
Online forms should leave no room for misinterpretation. Be sure to craft every element in your form to perfection, so that all users are instantaneously clear on what they’re being asked to fill in, how, and why. Your questions and prompts, the form’s structure, and the order in which the different questions are placed, should all guide users in the right direction, so as to avoid any possible confusion.
2. Minimize the number of fields
In order to guarantee that site visitors will fill out the form from start to finish, make sure it isn’t lengthy and cumbersome to complete. Keep the amount of fields and steps to a minimum and eliminate any step that isn’t absolutely necessary. For example, creating a single field for the users’ “Full Name” is preferable over two separate steps for both “First Name” and “Last Name.”
3. Design it to be effortless
Filling out an online form should feel easy and effortless. Reduce the amount of manual typing to a minimum, and opt for check boxes, radio buttons, or drop-down lists whenever possible. For example, in case you’re asking for a date, providing a date picker in the form of a calendar can improve your user experience much more than having visitors type in a day, month, and year.
How to add a form to your site:
- Access the Wix Editor.
- Click the ‘Add’ (+) button on the left hand side.
- Select ‘Contact.’
- Choose from a variety of Wix Forms, including contact, payment, and feedback forms.
- Drag and drop to add the form to your website.
- Click on the form to customize its text, design and more.
How to build a customized form on your site:
A different option is to create your own form from scratch, using the many components available on the Wix Editor. Under ‘Add’ >> ‘User Input,’ you can explore a variety of text boxes, radio buttons, address bars and many other features, that can be played around with and put together to create your own tailor-made form that suits your needs.
Creating advanced and customized online forms
Using Corvid, you can combine different input fields with lines of code, to build more complex types of forms. Below are a few examples of forms that can be created using Corvid:
- Connecting a form to a database: Creating an online form that’s connected to a database allows you to fully manage the data gathered from site visitors. The user generated content that you collect can then be displayed as a directory on your site, or used as a data spreadsheet that can be managed, exported and edited by you as the site owner.
- Collapsing forms: Hide and reveal (or collapse and expand) certain stages of the form based on user selections. Collapsed forms allow you to split your form into smaller chunks, and reveal additional steps only when needed.
- Multistage forms: A multistage form is a long form that’s broken down into multiple steps, making it less daunting. Site visitors can progress through the form’s different steps gradually as they continue to fill it in. While each step is submitted separately, the stages have to be filled in their right order.
- Custom validations: Form validation can prevent site visitors from entering invalid values. For example, it can ensure that a phone number entered will follow the (555) 555-5555 formatting.