Fieldset, legend, ordered list, and list items are the foundation of all CF7 Skins Templates.

With these form field items, two main benefits are the ability to group together related fields and have more detailed styling.

Tip: For more information, take a look at Why we use fieldset, legend, and lists in CF7 Skins.

If you create a new Contact Form 7 form, the CF7 Skins Form tab will display a basic contact form:

Tip: CF7 Skins Items are shown as a light blue colour and Contact Form 7 Tags are green.

If you have already selected a template, your Form tab will look slightly different, but the template structure will follow the same pattern.

We always recommend selecting a Template and following it as a guide, helping you get the fields and structure that you want.

Template Structure

1. FIELDSET

• Groups related items of your form into one section.
• Draws a box around these related items.
• Can include your entire form and/or a section of your form.
• Best Practice: Fieldsets should be followed by a LIST-OL item.

Tip: Duplicating a FIELDSET item will include all of the lists and tags within it. This is a fast way to add entire sections to your form.

2. LEGEND

• A title for your fieldset.
• Provides context to the fieldset group.
• Best Practice: A legend should always contains text.

Tip: To edit the legend content, click the fieldset’s edit icon .

3. LIST-OL

• Acts as a container for multiple form fields.
• Group together related fields to allow more detailed styling and CSS customization.
• Best Practice: A LIST-OL is always followed by a LIST-LI.

Tip: Use [ICON] to minimize a LIST-OL section to hide sections of your form that you are not working on.

4. LIST-LI

• Holds single form field.
• Drag & drop them up and down to change the order they appear on your form.
• Best Practice: Every Contact Form 7 tag has its own LIST-LI item.

5. Contact Form 7 Tag

• Tags that provide the fields for your form.
• The full list of available tags are on the Form tab under Fields (CF7 Tags).
• Includes LABEL for each field.
• Best Practice: Use with the CF7 Skins Ready Add-on to put fields side-by-side and in columns.

Example Contact Form

To show you how this works in detail on a more complex form, let’s look how we would create the following form:

The example contact form has:

• 2 fieldsets with 1 legend per fieldset.
  • 1 fieldset groups the entire form (the blue box) and has a legend: Contact Form
  • 1 fieldset groups the message area (the green box) and has a legend: Your Message
• 2 list-ol groups (grey box) with 2 list-li items per group. Each list-li contains 1 field tag:
  • Text (short text) – First name
  • Text (short text) – Last name
  • Email – Email Address
  • Tel – Phone
• 1 list-ol group (inside the green box) with 1 list-li, containing 1 field tag:
  • Textarea – ‘Let us know what you …’
• 1 Contact Form 7 tag inside a fieldset (blue box):
  • Submit – Submit

The above form has additional styling that is not possible with the CF7 Skins free plugin version.

To build the form shown in this example, you can use the CF7 Skins Ready Add-on.

For information on this plugin and its additional styling, take a look at the CF7 Skins Ready Class documentation.

Form Structure

The Form tab shows all of form’s items in their order and group.

Tip: In the visual editor, click the minimize  icon beside an item to hide the entire group.