CF7 Skins Visual Editor

This article now includes information on our drag & drop Visual Editor for Contact Form 7, which will be released shortly.

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.

CF7 Skins - Visual Form with Fieldset and WordPress Form with Fieldset

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.

CF7 Skins - Single Fieldset Contact Form

 

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:

F7 Skins Single Fieldset Contact Form on a WordPress Page

Long Form – One Fieldset

Using the above Contact Form example, let’s say you had to make it longer by asking for business details.

CF7 Skins Form - Single Fieldset - Long Contact Form - Editor View

F7 Skins - Single Fieldset - Long Contact Form View on WordPress

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.

CF7 Skins - Multiple Fields - Long Contact Form

CF7 Skins - WordPress - Multiple Fieldset Contact Form

Tip: In total, the form has 3 fieldsets: Contact Us, Personal Details, and Company Details.

%d bloggers like this: