If you’ve ever needed to collect user data, you know it starts with a form. This web form is intended to capture the necessary information you need to keep your CRM system updated, market and advertise effectively, and ensure your customers are benefiting from your products or services.
But now you’ve started to notice that the form doesn’t look right and feels disorganized or lengthy. You aren’t getting as many form-fills as you anticipated. In fact, many users seem to be abandoning your form halfway through and never return to complete it.
So, how can you resolve these problems? Simple! There are a set of web form best practices you need to know in order to make your forms more user-friendly and engaging. In this guide, you’ll learn how to build online forms that get the results you want.
Table of Contents
BUILD your forms
Unsure of where to start when first designing and building your web form? We’ve created a simple acronym to help you stay organized. Keep these “BUILD” web form best practices in mind when creating a new form:
Begin with a plan
Understand your users
Incremental building
Life cycle testing
Divide when necessary
Begin with a plan
You wouldn’t begin building a house without detailed, careful planning. The same goes for web forms. It’s important to only collect the data you need and no more. To keep your form simplified and targeted, answer the following questions before you start building:
- What type of respondent will complete the form?
- Which type of data will the respondent input?
- Why is gathering this data necessary?
- Will the web form require prefilling?
- Where will the published form live?
- How will I be storing respondent data?
How you answer these questions will help determine which fields you’ll need in your web form. The more organized your plan, the easier it will be to build your form. Measure twice, cut once!
Understand your users
Knowing who is filling out your web form is important, but so is the device they’ll most likely be using. Whether your respondents are customers, students, coworkers, or other businesses, consider their most-used device. Will it be a laptop or a mobile device? This can affect everything from what type of form you build to the experience your users will have.
Incremental building
Based on the style or length of your web form, you can benefit from two different ways you can build your form: systematic form building and minimum viable form building.
Systematic form building
This type of form building follows a linear progression as you move throughout your form, from section to section. For this type of building, make sure you wait to mark form fields “required” until the end, so you can easily stop and test your web form in the following instances:
- After finishing every page of your form
- After making a calculation on your form
- When creating a conditional rule
- Anytime a form has 15 or more fields
- After creating a step for a connector
Your objective is to test this type of form incrementally and as many times as possible. If an error occurs, you’ll be able to determine where it occurred and fix it quickly.
Minimum viable form building
A minimum viable form (“MVF”) is defined as the smallest iteration of your web form that is easy to test quickly before you add more fields. A MVF:
- Has all requirements to meet your use case needs
- Has no more than 10 form fields
- Has properly working connectors to Salesforce or other integrations
- Has no form fields labeled as “Required”
Before adding additional fields, images, sections, and text, be sure to take your MVF through one or two rounds of testing, as outlined below.
Life cycle testing
Once you’ve created your form, the next step is to test each step within the form’s life cycle. It’s a good idea to complete the life cycle testing at least twice to catch any errors before the form is published on your website.
Test your form by following these steps:
- Verify that form labels are concise, clear, and separated from other fields.
- Check that necessary fields are marked as required.
- Verify that email, phone, and other specific fields are properly validated.
- Check to see if data is saved to the corresponding fields in the database.
- Review the error message for an incomplete or inaccurate form submission.
- Verify that PDF or image attachments can be successfully uploaded.
- Check that reCAPTCHA is working properly, if enabled.
- Ensure the password field initially displays as dots or asterisks.
- Verify that the web form works correctly across multiple browsers.
- Test the web form again after it is officially published.
Additionally, it’s a best practice to consider the type of respondents who may have JavaScript turned off on their device and those who are using older web browsers. In these instances, Google reCAPTCHA can enforce JavaScript in the browsers of your respondents to ensure your form works properly. FormAssembly offers the reCAPTCHA feature in our form builder to improve the experience of users and prevent spam.
Divide when necessary
You may find that your form loads or runs slowly during the testing phase. This sometimes occurs if your form has custom code, conditionals, or calculations, or if it has multiple pages or fields. If respondents are using outdated browsers or have unreliable internet, this can make this slowdown even more pronounced.
To avoid unnecessary slowdowns and frustrated respondents, a multi-form workflow or a form with multiple pages is a good solution. This allows respondents to still provide the information you need with multiple connected web forms that load faster.
FormAssembly simplifies this process with the Workflow feature, which allows you to split forms into multiple smaller forms that have connectors. Data will be collected and connected to your CRM as the user travels through the forms. For shared accounts, a multi-form workflow with Redirect URLs follows conditional rules that send respondents to different forms depending on the information they submit.
Read through our BUILD infographic whenever you need a quick refresher!
Key elements of an online form
Now that you have a good understanding of how to BUILD a form and what good form design looks like, let’s learn about the essential elements that every form needs to have.
Title
The first thing anyone will see on your form is the title. It should be clear, specific, and let the user know exactly where they are.
Alignment
Rather than having fields scattered across your form, a simple left alignment can greatly improve the appearance and accessibility of your form.
Field labeling
In general, field labels should be placed above or below your fields, and not to the left or the right. This will make it much easier for your users to determine exactly what they are responding to when they’re filling in your fields.
Spacing
Make sure to give your respondents plenty of space, both vertical and horizontal. Adding space between items will make the form much less overwhelming.
Sections
Breaking your form up into sections will help the users better understand the variety of questions you’re asking them.
Content
If a form is meant to be like a conversation, the way you phrase your questions can have a big impact. For example, instead of “Date Available,” why not ask, “What day can you begin work?”
Pages
Like sections, pages can help split up your form and make it less intimidating. Pages can also help users see the complete progression of the form and give them a better idea of how long it will take to complete.
Layout
If your form is likely to be viewed on mobile, consider a one-column layout so that users don’t miss any form fields that may appear outside of the mobile frame.
Form best practices: Styling
Style is just as important as function when it comes to your web forms. A form’s design should reflect your company’s brand and be user friendly while meeting accessibility standards. Well-designed forms can be the deciding factor between a new customer and user that leaves your website without even completing the submission.
We’ve also made it easy to have these best practices and design guidelines right at your fingertips with our downloadable eBook!
Follow these web form best practices to keep respondents engaged and committed to your form:
Limit form fields
A large number of fields in your form is not only a security hazard, but it can deter respondents as well. Provide the minimal amount of fields to collect the data you need. Be sure these fields are also formatted properly. A zip code field, for example, should be five characters in length.
Keep the layout logical
Forms should be easy for the respondent to navigate from any device. A logical progression of questions is a best practice as well as grouping common information into sections or pages of your form. Be sure your forms are also mobile-friendly to keep users engaged.
Be conscious of colors
Colors on your form have multiple purposes, from representing your brand to assisting those with visual impairments like color blindness. Strategically, color choice can signal an error (red) or stand out in a CTA button. When aligned with your organization’s brand, they can provide a sense of familiarity with respondents.
Write clear and concise copy
The copy on your form should provide clear instructions, not cause confusion. Remind respondents about the perks of completing your form, such as receiving a complimentary eBook or starting a free trial. Keep CTA copy active and targeted, such as “Grab my free eBook” instead of simply “Submit.”
Simplify where possible
Giving respondents a positive user experience means more than minimizing form fields. If your form builder has the capability, use prefilling to assist users through the form by not requiring them to enter duplicate information. You’ll also want to take advantage of any form integrations so that data flows seamlessly from your form to your CRM. FormAssembly’s data collection platform offers both a Salesforce Prefill Connector and other powerful integrations with systems you already use.
Beyond the basics: Advanced techniques
Now that you’ve mastered the basic techniques when building web forms, it’s time to move onto more advanced web form best practices.
Using conditional questions
Sometimes it’s necessary to ask only a certain type of respondent a particular question. By using conditional logic, you can keep these fields hidden until the specific user triggers them. Conditional questions further simplify your forms and won’t bog down respondents with irrelevant information.
Repeated fields
When you want respondents to add multiple instances of the same information (such as adding family members to an insurance plan), a best practice is to use repeated fields. This advanced option eliminates extra fields while simplifying your form. Instead of having multiple repeatable sections, you can add a “Add New User” button, which when clicked, will provide a new repeated field.
Prefilling fields
Prefilling is another advanced technique that improves the experience for your respondents. With prefilling, basic user information such as their name or email is already integrated with the form. Similarly, if your web form asks the same information in multiple sections of the form, prefilling later sections will make it easier for respondents. Part of the work will already be done for them!
FormAssembly makes prefilling simple and easy with our Salesforce Prefill Connector. Once connected, you can pull user data from their Salesforce account and prefill this data directly into the form.
Question selection
Even if your web form seems short and sweet, don’t forget that question types matter too. If questions are too personal or you’re requesting sensitive data when it’s not necessary, respondents may not complete your form. Consider making these questions optional for easy skipping if a user doesn’t feel comfortable answering.
Required fields
Required fields can also be tricky in web forms, especially when it’s possible that a user will enter false information just to complete the form. Or worse, they may abandon your form completely. When writing questions, first ask: “Is no response better than a fake response?” This can help you determine which fields must be required and which may not need to be.
Color and image choices
When picking colors and images for your web form, less is more. Too much of a good thing is distracting and can make forms difficult to read. Stick with one or two complementary colors, and if using a background, be sure that the form fields are legible over the top.
Labels
Web form labels should always be as clear and concise as possible. It’s important to provide the right direction for your respondents without adding extra information that could be confusing. For example, a label that says “DOB” might be too vague for some users. On the other hand, a label that says “Please write out the day on which you were born, including the month and year” is much too long and complicated.
Hints
Along with providing clear and concise labels, you can leverage hints to help your respondents input information in the proper format. Hints are also beneficial for providing additional information a user may need to successfully complete the form field.
For example, if you need a birthday or a phone number in a specific format, providing a hint will alert users to add this information correctly. These hints can be directly below the form field and be as simple as DD/MM/YYYY or (XXX) XXX-XXXX.
Multiple choice fields
The way you choose your multiple choice fields can make a big difference in user experience. For example, it’d be much more complicated to scroll through a list of 52 different radio buttons to select your U.S. state of residence than it would be to search through a dropdown menu. Similarly, a dropdown menu wouldn’t be the best multiple choice option for a yes or no question. Here are some guidelines that will help you select the right type of multiple-choice field:
- Use radio buttons for questions that only require one answer
- Use checkboxes and lists for questions that can have multiple answers
- Use radio buttons and checkboxes for fields with only a few response options
- Use dropdown menus for questions with 5+ answer options
Noticing that your form builder doesn’t include all of these advanced options? FormAssembly’s robust platform provides all these unique features––and more––to enhance your data collection processes even further.
Web form best practices from our team
Our own team members have provided you with additional suggestions and tips to improve the efficiency and results of your FormAssembly web forms.
Think in sections
Depending on the needs of your organization, it’s likely that you’ll need the same form fields and labels across multiple, separate forms. Example sections that are used in many instances include contact information, updated account details, or membership data.
FormAssembly’s web form builder lets you save a list of Predefined Content that can easily be drag-and-dropped into your new web form. This will not only improve the speed your form building process, but it will also make it easy for anyone on your team to build a new form with fields and labels that are on-brand and optimized.
Share your knowledge
A not-so-obvious best practice when building your forms is to take notes during the building and designing phases. These notes will make it easier to collaborate with your team members and guide them through the form-building process.
Our team also suggests the Version Description feature, which can be accessed on the Revisions page of your web form builder. Any time you create a substantial revision to a form, you’re able to record notes to keep your team members informed about the changes. This option also allows you to revert to a previous version.
Save often
All FormAssembly forms come with an autosave feature within the Form Builder. However, it’s a best practice to manually save your form any time you make a major change. It’s also a good idea to save often in form connectors and for notification emails. There’s nothing worse than accidentally losing all of your hard work!
Tips for Salesforce success
To determine which fields are required for each object and what information each Salesforce field requires, you can check your object references within the form connector. Navigate to the configuration page of your connector and select “Salesforce Objects Reference” from the “Go to…” menu found at the top right corner of the page.
If possible, it’s a good idea to work within Salesforce Developer or Sandbox rather than your Salesforce.org’s production instance. You can then change the settings of your connector after testing before connecting. Always take the time to test your forms again once connected!
If no custom field or object option is in your Salesforce connector, navigate to the “Go to…” menu and click “Get New Salesforce Objects” so the schema refreshes. You can also make a separate Salesforce user for FormAssembly to help eliminate problems with permissions.
Start building better web forms today
Ready to put these new web form best practices to good use? The next step in creating on-brand and user-friendly forms is to start using our powerful web form builder. Start your 14-day free trial today––no credit card required. As always, if you have questions or run into roadblocks in your form building, our Support team is always here to help.
