Your forms are one of the main sources of direct communication between you and your users. You should take particular care while designing the Contact Form 7 (CF7) forms on your website.
However, creating a well-designed form is easier said than done. There are many factors that affect a user’s experience while filling out an online form.
To make it easier for you, we have compiled a list of tips you can use to improve the usability of your Contact Form 7 forms.
Before you begin
But before we get started, there are a few things you need to know.
- How to set up a CF7 Skins form
- Understanding fieldset, legend, and list field items
- Using CF7 Skins Ready to create a form grid
Remove unnecessary fields
Fields should only be added in a form if they provide value to the task in hand. Asking a user for their date of birth in the third line and their age in the fourth line does not make sense. Doing this might deteriorate the user experience on your website.
So, while designing a form, make sure that each and every field you add provides value, is not redundant, and does not demand extra effort from the users.
.
The form on the right lets the users choose whether their Shipping Address is the same as their Billing Address. If they are the same, they don’t need to fill in the three extra fields in the form. This reduces user effort and improves the usability of the form.
You can use CF7 Skins Logic to add conditional statements to your form. This lets you show/hide fields based on previous inputs as shown in the second example form.
Use checkbox, radio buttons, and dropdowns
Typing demands a certain amount of effort from the users. It is time-consuming as well as error prone. Therefore, you can reduce a considerable amount of user effort if you use dropdowns, radio buttons, or checkboxes.
.
The second form reduces the effort of the users by letting them choose their gender instead of typing up the whole word. Additionally, it also reduces your effort by already adding a certain level of validation to the input.
The Templates tab of CF7 Skins can come in handy in this case. Design your form, decide the type of input for each field, and select the template that best suits your form.
Templates Tab of CF7 Skins
Separate the form
A form that has no boundaries is hard to decipher and creates confusion among the users. Therefore, you should always separate your form from the rest of the content in your website.
Use a separate container for the form and clearly show its boundaries. You can use borders, background colors, and positioning to make it easy for the users to clearly determine where the form starts, and where it ends.
.
In this form, the use of background color and borders have clearly separated it from the rest of the content in the website.
The Styles tab of CF7 Skins can come in handy in this case. You can use it to add background colors and styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. your form to distinctly separate it from the rest of the content.
Styles Tab of CF7 Skins
Find the best size for the inputs
From this study, it was found that the users doubt their own understanding of a form label if the field is considerably longer or shorter than their input. Therefore, always make sure that the size of a field more or less matches the size of the value you expect from the user.
.
In this example, the size of the Card Number field more or less matches the size of the expected value from the users. This helps eliminate any confusion the users might have about their input size.
Using CF7 Skins Ready, you can add multiple input fields in a single row without any prior knowledge of HTML or CSS. In the form above, the grid class of CF7 Skins Ready has been used to customize the size of each input.
Use Placeholders
If you don’t want input fields of variable lengths, you can also use a placeholder text to let the users know the kind of input that you are expecting.
.
Refer to the following articles to see how you can efficiently use placeholders in your Contact Form 7 forms:
Group the inputs logically in Fieldsets
The information that you demand from the users should have a natural flow. Asking the user’s name in the first line, the credit card number in the second line, and their email address in the third line might be quite jarring to the users. Therefore, pay proper attention to how you group your fields.
You can also group the fields with their own group labels. Grouping name and email under Personal Information and the credit card number and type under Credit Card Details makes more sense.
.
The second form uses two different fieldsets with their respective legends to group similar fields together. Doing this eases the users into each field group.
Logically dividing inputs in such a way is also a good form design principle.
Using the fieldset and legend tags provided by CF7 Skins is one of the most efficient ways to logically group fields in a Contact Form 7 form.
Further reading
- Add Better Contact Form 7 Placeholders
- Why we use Fieldset, Legend & Lists in CF7 Skins
- Understanding fieldset, legend, and list field items
- Designing more efficient web forms
Have questions or need help?
If you are using the free version of CF7 Skins, you can get help via the CF7 Skins community and also the Contact Form 7 Support forum.
If you are using any of our Add-ons, we provide Premium Email Support to help with your questions and problems.
