A website form, also known as an HTML form, is a feature of your website that collects data shared by website visitors. This data is then sent to a server, stored, and used later on. Common examples include a signup box for a newsletter, an account creation page, and a customer feedback form.

The purpose of a website form is to gather volunteered information from your website visitors that you can then use to provide them with a benefit. This may sound a little broad, and that's because there are several different uses for web forms. But the core concept is that someone gives you an email, phone number, address, or comment that you then turn into a deliverable.

The different types of website forms

• Newsletter signup. As mentioned, this is a form used to sign a person up for a newsletter, and it usually only requires an email address.
• Contact form. These are forms that allow website visitors to contact your sales or support team.
• Account registration. Another common use of a website form is to register an account. It usually requires at least an email and password, and sometimes a username, a person's real name, and a phone number.
• Payment order. These are the forms that are filled out when someone is checking out on your website. They require standard credit card information.
• Feedback. Feedback forms give customers the opportunity to provide you with feedback on their experience. This can be a public review for a product or a private suggestion on your service.

The 5 key features of a web form

1. Structure. The structure of a web form is how it's arranged, where it's located, and the order of its information. Applying design principles to the structure, such as ordering the fields in a way that flows, allows people to easily fill it out.
2. Input. The input fields are where users fill in your requested information. They can be mandatory or optional and can include text, a checkmark, or a rating.
3. Labels. Labels tell the user what kind of information is going to be requested in an input field. It's important to label a field as clearly and succinctly as possible.
4. Buttons. Buttons are used to submit the information from a web form or to move on to the next segment of the form.
5. Feedback. The feedback element of your web form confirms to the user that you have received the information. This is typically a confirmation page, email, or text message that lets the user know the form was submitted. Feedback can also be used to tell someone when they left out an important piece of information.

How to drive traffic to your forms

One of the most important things to consider when creating a web form is how you're going to get people to actually use it. Some visitors will fill out a form no matter what, but for the most part, getting form feedback is just like any other type of conversion.

Three factors will impact whether anyone engages with your web forms: design, placement, and timing. Design is pretty straightforward — make sure your web form is easy to find, fill out, and view.

Placement and timing are a little bit trickier. With placement, you want your web form to appear where someone is in the most likely state to fill out the form. For instance, putting a product review form on the front page of your site probably isn't a good idea. Placing it at the bottom of a product page makes more sense. It goes the same for timing as well. You want to present the form at the time when someone is most likely to respond to it.

Keeping these considerations in mind when creating a web form will prevent it from coming across as spam and instead encourage users to complete it.

The best website form platforms

1.Google Forms

Google Forms is one of the most popular web form platforms and for good reason. Like most of Google's cloud-based software, it's completely free and it integrates with Google Sheets by default. All you need is a Google account to get the service up and running.

The only drawback to Google Forms is that it's fairly limited. You can't take payments or integrate it directly with your website, so it will always have a third-party feel. Still, it's incredibly easy to use and great if your needs are simple.

2.SurveyMonkey

No list of forms would be complete without SurveyMonkey. It’s an incredibly popular web form tool and has the features that every other web form has and much more. Of course, this comes at a cost, and you can expect to pay anywhere between $25/month up to hundreds of dollars a month.

However, you get web form templates that look much more natural, can be embedded directly into your website, are more likely to generate traffic, and will integrate with just about anything. If you want to web form standard, SurveyMonkey is a great option.

3.JotForm

You can think of JotForm as SurveyMonkey lite. It comes with many of the same features as SurveyMonkey without the hefty price tag. It has over 10,000 web form templates available to users for free, and you only have to pay for upgrades when you get more than 100 form submissions each month. Even then, the pricing starts at $25/month and never breaches $100/month.

4.Microsoft Forms

Microsoft Forms is a little bit lower on the list because it's essentially the same service as Google Forms, except made by Microsoft. This means you get a more Office-centric design approach that integrates with Microsoft Excel rather than Google Sheets.

Like Google Forms, Microsoft Forms is super easy to use, taking all of the work out of creating a web form. You can send direct links to the form or embed it on your website, and best of all, it's free.

5.123FormBuilder

123FormBuilder is the option for someone who has the customization and flexibility of a paid web form platform without the high price tag. It's a great budget option, with the most expensive tier being $45/month.

It features a drag-and-drop editor, Zapier integration, and plenty of templates to help you hit the ground running. The only drawback is that while other services allow you to increase those features as you increase the price, 123FormBuilder lets you accept more submissions as the tiers increase.

Website form security

Before you start using a web form template or building your own, it's crucial to address the issue of security. Just about every form asks for sensitive information from your users, everything from their name and contact info to their credit card information.

It is essential that you consider security when choosing a web form platform and storing web form data. A secure form starts with a secure website. Ensure that you have an SSL certificate, which encrypts the data your users send to you and consider implementing CSRF protection, especially if your users are sharing financial info. From there, familiarize yourself with the web form platform's security policies before you sign up.

Best practices for creating a website form

Use fewer fields

According to a study by HubSpot, decreasing the number of fields in a web form can increase your conversions by up to 25%. Decreasing the number of fields in a form reduces how long someone spends filling it out, making them more likely to fill it out. The study found that five fields or less are optimal.

When looking to reduce fields in a form, try to remove as many "optional" fields as you can. These are fields that can be left blank without affecting the form's function. If you don't need the info, you probably shouldn't ask for it.

Mobile-friendly

Like any service based on the web, it must be mobile-friendly. According to a report published by WARC, it's expected that 72% of internet users will only use mobile devices to access the internet by 2025.

In other words, being mobile-friendly is no longer a trend or a nice feature — it's essential, and that applies to your web forms just as much as it does to your website. Make sure the web form platform you choose has a mobile-friendly design.

Automated feedback

This is an aspect of website forms that's easily overlooked: feedback. And we're not talking about feedback from your users, we're talking about feedback from you. Your users need confirmation that you've seen their messages, that you're keeping up with and replying to their form submissions.

There are a couple of ways to do this, all of which are valid and useful. For payment forms, you almost always want to stick to email or SMS and include a receipt. For submissions where you're asking for an email, sending an email is appropriate. And if someone is simply leaving a review or feedback, a simple confirmation page will do the trick.

Real-time validation

Validation is an important aspect of web forms. It's what ensures that the information entered (or not entered) by the user is the information you requested and prevents a user from putting their name where a phone number should be.

There are two ways to validate a user's form. The first is to deny the form submission after they press the submit button and to tell them where the error occurred. Though this gets the job done, it's not ideal.

The second and better option is to indicate that a field hasn't been filled out correctly as the person is filling out the form. For instance, if someone puts their name in the phone number field, a red "X" appears with a short message letting them know that they can only enter numbers in that field. This method speeds up and simplifies the submission experience, saving your visitors some frustration.

Build your website today

Adding features like website forms to your site is an important part of updating it over time. It's also a great way to engage with your customers and get feedback. When you work with B12 on your website, our experts will help you add or embed forms that allow you to work more efficiently and improve your site’s user experience.

If you want to build a website or simply want more information on web design and marketing principles, check out the rest of the B12 Resource Center for tips.