When creating your CF7 Skins form, you may notice that your form is starting to get a little long or confusing to follow.
To help solve these problems, rather than creating separate forms or having one long form, you can section apart your content using the fieldset and legend elements.
The grouping and labelling of thematically related controls within a form is an important aspect of providing semantic information so users can understand and complete a form successfully.
About fieldsets and legends
CF7 Skins uses the HTML tags fieldset, legend, and lists as the foundation for all CF7 Skins Templates. Using these tags is a great way to improve your form’s overall readability.
Tip: Learn about all of the advantages of using fieldset, legend, and lists in your form.
If your form is becoming difficult to follow along with, too long, or confusing to read, you can resolve these problems by grouping related fields within a single form.
The FIELDSET item is what groups related items of your form into one section. It also draws a box around these related items.
The LEGEND item adds a title to your fieldset group.
Tip: For even better readability and customization with boxes, columns, and grids, be sure to take a look at our CF7 Skins Ready Classes.
Short Form – One Fieldset
If your form is short and without many fields, you can use a single fieldset and legend. For example, if you are only asking for a few details such as a name, email address, and a message.
Looking at the form structure on the left visual editor, see how the fieldset and legend (Contact Us) are the umbrella of the entire form. Imagine that the fieldset and legend are creating a box around the contents within to group them together. Inside the fieldset you have a list of the fields: Name, Email, and Message.
This grouping is made more clear when viewing the form on a WordPress page with a CF7 Skins Style selected:
Long Form – One Fieldset
Using the above Contact Form example, let’s say you had to make it longer by asking for business details.
You can see that the form is a little more difficult to read and follow along.
Long Form – Multiple Fieldsets
You can improve the usability of this form by using multiple Fieldsets. Look for items that you can logically group together. Each group can have it’s own fieldset.
In this example, the contact form has two groups: Personal and business. So you can create a Fieldset with a Legend for each group.
Tip: In total, the form has 3 fieldsets: Contact Us, Personal Details, and Company Details.