Once you have downloaded and activated the Contact Form 7 plugin and the CF7 Skins plugin, you are ready to get started.

1. Log in to your WordPress dashboard.

2. Under Contact > Contact Forms, click Add New.

Wordpress Menu - Contact Forms - Add New

3. Scroll down until you see the Skins section.  The Visual Form Editor will be open by default, showing a basic form structure.

CF7 Skins - Form Tab Visual Editor Starter Form Template

Notice that CF7 Skins has 3 main sections: Form, Template, and Style.

CF7 Skins - UI - Main Sections - Form, Template, Style

  • Form, a Visual Editor, is where you edit, build, and save your form.
  • Templates are common forms that act like easy to follow guides.
  • Styles are the aesthetic visual design of your form — what makes your form beautiful.

Template

1. First, click the Template tab.

2. Look for a template that most closely represents the fields that you need for your form.

Important: Selecting a template will erase and replace anything that is on the Form tab and the Contact Form 7 tag editor. If you are working on an existing form, make a copy of it as a backup.

CF7 Skins - Template - FIlter - Sort - Search

3. When you are ready to choose, click Select.

CF7 Skins - Template - Event - Selected

After selecting a template, the Visual Form Editor and the Contact Form 7 editor are automatically updated.

Style

1. Next, click the Style tab. Look for a style that you find visually appealing and aligns well with your site’s design.

Tip: To see what a style looks like on all form fields, click Details then Expand. Or, preview your form in WordPress by following the final steps in this tutorial.

CF7 Skins - Style - Berry Delight - Selected

2. When ready, click Select. The design is automatically applied to your form.

You can select and save a new style at any time.

Form (Visual Editor)

1. Click the Form tab. Here, the Visual Editor shows the form that was created based on your selected template.

2. Add new fields by dragging and dropping them onto your form.

CF7 Skins - Form Tab - Drag and Drop to Add New Field

3. Edit, duplicate, remove, and change the order of fields within the editor.

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

You can still use the traditional Contact Form 7 tag editor if you prefer.

4. When ready, click Save Visual.

CF7 Skins - Visual Form Editor - Save Visual Button

5. Once you save the visual editor, a code snippet will appear at the top of the page under the main title of your form. This is called a shortcode. Highlight this code and copy it.

Contact Form 7 - Shortcode

6. To add the form onto your WordPress page, edit the WordPress post/page where you want to have the form and paste the shortcode into your content.

7. Click Preview Changes to see your form in action.

Wordpress Post - Contact Form 7 Shortcode - Preview

%d bloggers like this: