Last Updated on

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)?