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.
3. Scroll down until you see the Skins section. Under Skins, there are three tabs: Form, Template, and Style.
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.
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.
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).
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.
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.
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.
