Last Updated on

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. Under Skins, there are three tabs: Form, Template, and Style.

CF7 Skins - Form tab - New form

These tabs are the three steps to creating your own form:

  • Selecting a Template.
  • Choosing a Style.
  • Editing and saving your form on the Form tab (the visual form editor).

4. Click the Template tab.

5. Find a template that most closely represents the fields that you need for your form. Click Select.

Warning: Choosing a template will erase and replace an existing form on your Form tab. We recommend making a copy of the contact form first, just in case you want it back.

6. If you’d like to see some more information on this template, click Details below each template preview image.

CF7 Skins Template Tab

7. Once you have selected a template, click the Style tab. Find a style that you like and click Select.

Tip: We recommend you begin with the Default Style. This will let you see what your form looks like with CF7 Skins added to your current WordPress theme.

CF7 Skins - Style tab

8. After selecting a Template and Style, click the Form tab.

9. On the Form tab, your new template guide and structure is displayed visually, rather than in written tags and code. You can drag-and-drop fields onto the form, up and down to change their order, edit fields, duplicate them, or delete them.

Tip: For more in-depth instructions, follow along the tutorial: Edit your CF7 Skins form (using Visual Editor).

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

10. To save your new form and style, click Save Visual.

Important: You must click Save Visual to save any changes made on the Template or Form tab. You do not need to use any other save buttons on the page.

CF7 Skins - Visual Form Editor - Save Visual Button

11. 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.

Contact Form 7 - Shortcode

12. Highlight this code and copy it. Edit the WordPress post/page where you want to have the form.

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

14. On the right hand side under Publish, click Preview Changes to see your form in action.

Wordpress Post - Contact Form 7 Shortcode - Preview

Related FAQs:

  1. How do I edit my CF7 Skins form (using visual editor)?
  2. Where can I get more templates or styles?
  3. How does CF7 Skins differ from Contact Form 7?
  4. What is the form section?