When selecting a Template for your form, CF7 Skins builds the basic HTML of the form you selected and populates the Form section.

You may have noticed that a CF7 Skin form looks a bit different than the default Contact Form 7 form.

CF7 Skins uses Fieldsets, Legends, and Lists

CF7 Skins takes a different approach to form syntax and uses Fieldsets, Legends, and Lists as the foundation for all CF7 Skins Templates.

The main reasons behind using this syntax are:

  • The Fieldset element allows grouping of related form fields
  • The Legend element helps provide context to each fieldset
  • Advanced CSS styling is much easier
  • W3C compliant
  • Accessible

This approach also overcomes a number of inherent difficulties which arise when using paragraph elements (<p>Paragraph Content</p>) for Contact Form 7 form fields.

Contact Form 7 Method

When you first begin creating a form with Contact Form 7, it starts you off with the most basic of contact forms:

Default CF7 Form

The form uses paragraph elements (<p>Paragraph Content</p>) as the basis for the form. While this is probably the simpliest way to create a simple contact form, it has a number of shortcomings.

While it looks easy, building on top of it to create more complex forms and styling it using CSS requires quite a bit of skill. You will soon find yourself wrestling with trying to use <p> tags in ways they were not intended for.

It’s also not semantic. Paragraphs are meant to be used for a distinct portion of text dealing with a particular idea – not form fields.

CF7 Skins Method

CF7 Skins provides a list of common Templates to build off of easily, such as the Suggestion form:

Suggestion Template

With each Template, you start off with a form in a fieldset. This fieldset creates a box and that box already has a legend.

This means you’re already starting at an advantage when you want to style your form. Styling boxes (and boxes within other boxes) is comparatively easy within CSS and generally offers consistent presentation across different browsers.

Although the question of how to semantically mark up forms is still up for debate, CF7 Skins has found that for every day customization and ease of use, fieldsets, legends, and lists are the easiest way to structure your form, style it across browsers, and have it be the most accessible.

CF7 Skins has found that for both simple and complex forms, using fieldsets, legends, and lists means:

  • Customizing the form layout is both easier and more versatile
  • Consistentcy in styling via CSS across browsers is more easily maintained
  • Users have many more options for form layout & more control over individual form elements
  • The Contact Form 7 form tags are normally less cluttered
  • It’s generally easier to look at and think “I could tweak this.”

HTML already has fieldsets and labels, so why not use them? They were added to the range of standard HTML form elements in the HTML 4.1 specification to make it easier for users to understand forms while simultaneously improving accessibility.

Semantically, it makes sense to have a list of form controls in a logical order. Many forms in print are actually numbered in a list. Using the standard HTML ordered list <li> element as the basic building block for all CF7 Skins Templates offers many advantages in both form layout and styling.

Extra reading:

W3C – Providing a description for groups of form controls using fieldset and legend elements

%d bloggers like this: