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 and click on Contact in the Dashboard menu.

Wordpress Menu - Contact Form 7 - Contact

2. Now, select an existing Contact Form 7 form or create a new one (see How do I start a form with Contact Form 7).

3. Scroll down to the Skins section where you can create your form.

CF7 Skins - UI - Inside Contact Form 7

4.  Click the Template tab. Choose one that most closely matches the fields that you need for your form, then click Select.

CF7 Skins - Contact Form Template - Selected

If you’d like to see some more information on this template first, click Details.

5. Once you select a template, click the Form tab.

On the Visual Editor, you can modify the form by re-arranging, adding, editing, and deleting fields (see How do I edit my CF7 Skins Form using Visual Editor?)

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

6. Click the Style tab. Find a style that you like and click Select.

CF7 Skins - Style - Berry Delight - Selected

7. When you are ready to save your changes, go to the Form tab and click Save Visual.

CF7 Skins - Form Tab Visual Editor - Save Visual Button

8. After saving, a code snippet will appear under the main title of your form. This is called a shortcode.

Contact Form 7 Shortcode - New Contact Form

Highlight this code and copy it.

9. Go to the WordPress post/page where you want to have your form. Paste the Shortcode in the location where you want your form to be displayed.

wordpress-example-post-shortcode

10. Save your post or page and visit your WordPress website to see your form in action.

Wordpress - Contact Form 7 with CF7 Skins - Contact Form

%d bloggers like this: