CF7 Skins takes a different approach to form syntax than Contact Form 7. We use 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 and detailed CSS styling is much easier
- W3C compliant
- Accessibility
Form Syntax: Contact Form 7 vs. CF7 Skins
When you first begin creating a form with Contact Form 7, it starts you off with the most basic of contact forms.
The form uses label elements <label> Element Label </label> as the basis for the form. While this format is a fairly easy to use when creating a simple contact form, it has a number of shortcomings.
CF7 Skins Method
With CF7 Skins when you select a Template, the form is automatically created for you in both the CF7 Skins Visual Editor (the Form tab) and the Contact Form 7 Tag Editor.
Each template begins with a fieldset. This fieldset creates a box and that box has a legend that groups the elements within the fieldset. Elements are arranged into lists so that they can easily arranged, edited, and styled.
In the Visual Editor, you can drag-and-drop lists to re-arrange your form, or duplicate entire fieldsets or lists for longer, complex forms.
If you want to style your form with custom CSS, our CF7 Skins templates give you a big head-start advantage. Styling boxes (and boxes within other boxes) is comparatively easy and generally offers consistent presentation across different browsers.
Advantages of using Fieldset, Legend & Lists
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.
- Consistency in custom CSS styling across browsers is more easily maintained.
- Many more options for form layout, including grouping elements.
- Grouping elements facilitates tabbing navigation for visual user agents and speech navigation for speech-oriented user agents.
- More control over individual form elements.
- The legend element assigns a title to a fieldset. This improves accessibility when the fieldset is rendered non-visually.
- The Contact Form 7 form tags are visually less cluttered.
- It’s generally easier to look at and think “I could tweak this.”
HTML already has fieldsets and legends. 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.
Using the standard HTML ordered LIST-OL and LIST-LI elements as the basic building block for all CF7 Skins Templates offers many advantages in both form layout and styling. Many forms in print are actually numbered in a list. Semantically, it makes sense to have a list of form controls in a logical order.