Overview of the CF7 Skins User Interface

CF7 Skins has a simple and easy to learn user interface.  Follow along to see the different sections and how they help you quickly create beautiful Contact Form 7 forms. First, since CF7 Skins is built within Contact Form 7, you need to create a new Contact Form 7 form: 1. Log in to your […]

Choosing a Style for Your Form

CF7 Skins comes with many Styles which you can apply to any form with just a click (See Understanding Templates and Styles). Create a new form or edit an existing Contact Form 7 form. Scroll down to the Skins section and click on the Style tab to view the list of available styles to choose […]

Edit your CF7 Skins Form (Contact Form 7 Editor)

This tutorial is about using the Contact Form 7 tag editor. To learn how to edit your form using the CF7 Skins visual editor, see Edit your CF7 Skins Form (CF7 Skins Visual Editor). Starting a new form with Contact Form 7 gives you a default Contact Form within Contact Form 7’s form tag editor: Select a Template […]

Making your form easy to read by using Fieldsets

When creating your CF7 Skins form, you may notice that your form is starting to get a little long or confusing to follow. To help solve these problems, rather than creating separate forms or having one long form, you can section apart your content using the fieldset and legend elements. The grouping and labelling of […]

Why we use Fieldset, Legend & Lists in CF7 Skins

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 […]

Choosing a Template for Your Form

When you select a CF7 Skins Template, it instantly generates a form with predefined HTML fields and Contact Form 7 tags. All of your available templates are on the Template tab. Choosing a Template To begin, select your Contact Form from the admin panel. Scroll down to the Skins section. Click the Template tab to begin exploring […]