What are the Fieldset and List boxes on my Form tab?

Fieldset, legend, and list items are the foundation for all CF7 Skins Templates. They are a key part to the structure and style of your form.

  • The FIELDSET item groups together related form fields.
  • The LEGEND item helps provide context to each fieldset by adding a title.
  • LIST-OL items act like a group of related LIST-LI items.
  •  LIST-LI items act like containers for a form’s field tags (Contact Form 7 Tags), such as Checkbox, Text, Date, etc.

The fieldset at the top provides a title (legend) for the entire form. The list-ol groups together list-li items that are related.

Tip: If you duplicate a LIST-OL, it will duplicate all of the LIST-LI and tags inside. This can save a huge amount of time if you have similar sections on your form.

The main advantages behind using this syntax are:

  • Customization and options for the form layout is both easier and more versatile.
  • Contact Form 7 form tags are visually less cluttered and easier to tweak.
  • Advanced and detailed CSS styling is much easier.
  • W3C compliant.
  • Accessibility such as tabbing navigation for visual user agents and speech navigation for speech-oriented user agents.

Tip: You don’t need to fully understand these items in order to use CF7 Skins. We recommend selecting a Template and following it as a guide.

To see all of the advantages to using fieldset, legend, and list, go to Why we use fieldsets, legends, and lists in CF7 Skins.

For more in-depth explanations on CF7 Skins Items, take a look at the tutorial Understanding fieldset, legend, and list field items.

Related FAQs:

What is the Form section?

The CF7 Skins Form Section

CF7 Skins adds a drag-and-drop visual form editor to the Contact Form 7 plugin interface.

Also known as the Visual Editor, Visual Form Editor, or Form tab, this is where you can edit your form’s content and layout.

CF7 Skins - Full Visual Form Editor - Template - Contact Form

The tree diagram is an interactive, visual representation of your form’s structure. When you select a Template, the form section is populated for you. Each template acts as an easy to follow guide, which you can then customize in this section.

The Fields section has all of the Contact Form 7 tags needed to create your form plus the CF7 Skins items needed for our templates and styles.

Drag and drop fields up and down the tree to re-arrange the order, minimize sections that you are not focusing on, and click or drag and drop new fields onto your form. You can choose to edit, duplicate, or delete any of the fields.

CF7 Skins - Visual Form Editor - Field Tag Edit Duplicate Remove

CF7 Skins retains the original HTML based form editor of the Contact Form 7 plugin interface.

Contact Form 7 Form Section

The Contact Form 7 plugin interface is also known as the Tag editor or Form Tag Editor.

You can edit your form’s content and layout using the Contact Form 7 Admin Screen. Also, here is where you can use HTML tags and create Contact Form 7 form-tags using the tag generator.

Contact Form 7 - Default Contact Form

You may find this useful for making text based tweaks to forms created using the CF7 Skins drag-and-drop visual form editor.

Important: Changes made exclusively in the Contact Form 7 tag editor are not reflected on the CF7 Skins Form tab in the visual editor.

Related FAQs:

  1. How do I create a form with CF7 Skins?
  2. How to add a form to a WordPress post or page?
  3. How do I edit my CF7 Skins form on the Form tab (visual editor)?

Where can I get more Templates or Styles?

Additional form Templates and beautiful Styles are available instantly by purchasing the CF7 Skins Pro add-on.

CF7 Skins Pro, an add-on for the CF7 Skins free plugin, offers the usual free Templates and Styles plus more complex Templates and a huge variety of Styles that can be used with almost any website colour scheme. Additionally, you will have access to Premium Email Support.

For instant access to more Templates, Styles, and Premium Support, follow the steps to upgrade your account:

1. Go to the CF7 Skins Pricing page.

2. Under CF7 Skins Pro, select the package that works best for you. Packages are based on how many site licenses you need. If you have one website, you only need one license.

3. Go through the checkout process.

4. After purchasing, you’ll receive a Licence Key via email (or you can visit your Account.)

Once you have applied your new license key, your new Templates and Styles will be available in the same location as before.

Note: The CF7 Skins Pro Add-on is included when you purchase any other CF7 Skins add-on: Ready, Logic, or Multi. Take a look at the special Bundles to make the most of purchasing helpful add-ons.

Related FAQs

  1. What are the benefits of the CF7 Skins Add-ons?
  2. Can I upgrade my CF7 Skins licenses?
  3. License and payment information

How to add a form into a WordPress post or page?

To add a form to your WordPress post/page, copy and paste the shortcode generated by Contact Form 7 into your post/page.

1. In the CF7 Skins form tab, click Save Visual.

Tip: You only have to click Save Visual to save your work. You do not have to click any other save buttons.

f7skins-visualformeditor-savevisual

2. Once you save the visual editor, the Contact Form 7 form editor will be automatically updated and saved. A code snippet will appear at the top of the page under the main title of your form. This is called a shortcode.

cf7-form-shortcode

3. Highlight this code and copy it.

4. Edit the WordPress post/page where you want to have the form.

5. Paste the shortcode into your content where you want your form to appear.

4. After you save your post/page (for example, by updating or publishing) the form will appear on your live site.

Related FAQs:

  1. What is the Form section?
  2. How do I preview what my form will look like?
  3. How do I save my CF7 Skin?