Creating a website form is essential if you want visitors to make a purchase, sign up for a demo, or download a white paper from your website. However, the design, messaging, and functionality of your web forms play a significant role in whether a visitor completes the form and converts. By making small adjustments to your WordPress forms, you can reduce the cognitive load for visitors and boost form conversions. In this guide, we’ll be sharing tips for Gravity Forms and the free Contact Form 7 plugin.
1. Utilize Strong Color Contrast in the Form Design
When a web visitor lands on your site, they are typically looking for the fastest and easiest way to achieve their goal. One way to increase form conversions is to make the form design and layout easy to review for all visitors. A common mistake on WordPress sites is to set up a default website form design with a white form background and thin gray boxes as form fields.
Consider creating a form design where there is a strong color contrast between the form background, the form labels, and the white form fields. When selecting colors for your form, follow the WCAG guidelines on color contrast with a contrast ratio of at least 4:5:1. This helps visitors with disabilities or visual impairments clearly differentiate the form fields from the background color of the web page. You can refer to the Gravity Forms developer accessibility guide as a resource.
If you are utilizing the free Contact Form 7 plugin, the Accessible Defaults extension can help you implement accessibility best practices on all your forms.
2. Reduce the Number of Optional Fields
Long website forms can deter conversions as they often take a longer time to fill out. When a visitor encounters a form, they are subconsciously calculating whether the effort it takes filling out the form is worth the benefit that they’ll receive.
In general, reduce the number of fields as much as possible. If you need to include a few optional form fields, clearly label the required versus optional fields in order to reduce user errors when submitting the form. With long web forms, visitors also have to consider whether they want to share all of that personal information. Consider adding a link to your privacy policy on the web form and following the GDPR best practices for data protection in order to establish trust with potential customers.
3. Consider a Multi-step / Multi-Page Form
If you need to have a long form on your website for an in-depth registration process or application, consider converting it into a multi-step or multi-page form. By breaking up a long process into small steps, the perceived effort is reduced, and this encourages more visitors to begin the process. With multi-page forms, it’s helpful to set up a progress bar below the form on each page, indicating where the visitor is in the process while filling out the form.
If you are utilizing the paid Gravity Forms plugin, you can utilize the built-in plugin options to create a multi-page form and group the form fields by page. Use core options when adding fields for “begin paging,” “page break,” and “end paging” to create your own multistep forms.
There are also paid plugin extensions for Contact Form 7 that allow you to add a multi-step form process on your site. Multi-Step pro enables you to break up long forms into a step-by-step process. When setting up the different pages of the form, consider the user experience as someone goes through the form. Start by requesting basic information and try to group similar data together. This can reduce the amount of effort and create a smooth flow to the form.
4. Automatically Format the Data in Form Entries
Some form fields may require a specific format, such as phone numbers, dates, and credit card numbers. By automatically formatting the form field entries, you can speed up the process for visitors, getting them to convert faster.
In Gravity Forms, you can select either a US or International phone number format style when setting up a phone field. If you don’t want to limit visitors to a specific phone format, you can also consider providing an example of the data entry as the placeholder text of the form field. This can help visitors quickly determine the correct format for dates or addresses. In Contact Form 7, you can include a placeholder watermark in the HTML code for a number field to do this.
However, avoid using placeholder text in lieu of form field labels. This is an important web accessibility practice as the placeholder text disappears when you click into the field, and some visitors may need the label as a reference.
5. Avoid Misleading Calls to Action
Misleading calls to action can hurt conversions. Remember that a visitor is assessing subconsciously what benefit they’ll receive from providing their information in the website form. A call to action or CTA is the messaging on your website that prompts someone to take an immediate action.
Some common CTA examples are Request a Demo, Get a Free Consultation, or Add to Cart. There is a balance between reducing the fields on a form and requesting enough information to meet the client’s request. If you promise to deliver a calculation or estimate, the customer will expect you to request enough information in the form to instantly provide that request. If all of those fields are missing, the visitor may think the form is misleading, and instead of being delivered a calculation, they’ll receive a call from a salesperson.
In addition to the form messaging, review the thank you page or confirmation message that a visitor sees after submitting the form. The messaging should provide a positive user experience by confirming that their form submission has been processed. Setting up a specific thank you or confirmation page for each form can also assist with conversion tracking in analytics.
With Gravity Forms, you can define a “Redirect URL” under Setting > Confirmations when creating your form. For Contact Form 7, the free add-on Redirection for Contact Form 7 adds the option to redirect a user once they’ve successfully submitted the contact form.
WordPress Tools for Form Conversion
From color contrast to field entry formatting, you can boost the number of form conversions on your WordPress site. By harnessing different WordPress tools and following UX design best practices, you can increase the odds that a visitor will put in the effort to submit a form on your website.
