In order to see CF7 Skins in action you need to login to your WordPress admin area, and then click on Contact and select an existing Contact Form 7 form or create a new one (see How do I add a form with Contact Form 7).

cf7-wp-menu

Skins

This will bring you to the Contact Form 7’s form editor. Scroll down to the Skins section.

CF7 Skins User Interface

The Skins section, added by CF7 Skins to the Contact Form 7’s form editor, is divided into main tabs.

  • Templates
  • Styles

Templates

By default, the Template tab is selected and you can see screenshots of the available templates in grid view. Below each template’s screenshot there are two links Select and Details.

searching-templates

Clicking on the Details link will display a larger screenshot of the template with its description and usage details.

Event Pro Template in Expanded View

Tip: Taking your mouse over a question mark or clicking on it will display contextual help for that particular area of the user interface.

You can sort the listed templates by clicking on All, Featured, Popular, and Latest tabs on the top. You can also filter templates by feature.

Browsing templates in CF7Skins' template browser

There is also a Search box at the far right of the screen.

1. Using the Search option, type in the first two or three letters of what you are looking for. For example, ‘Reg’ will pull up two different Registration forms.

searching-templates

Styles

Tip: You can minimize each Section by clicking on the arrow button on the far right corner and drag & drop the sections to re-arrange them. Your revised layout will be saved and loaded when you use Contact Form 7.

Clicking on the Style tab will display available styles you can use with your forms. You can use the feature filter, and list styles by popularity, latest, and featured.

Browsing available styles in CF7 Skins Style browser

%d bloggers like this: