CF7 Skins

Last Updated on February 6, 2025 by Neil Murray

Table of Contents #

CF7 Skins Form Block #

Refer:

back to top

CF7 Skins Visual #

Visual Editor for Contact Form 7

CF7 Skins Visual makes creating & styling of Contact Form 7 forms much easier – even if you don’t have HTML + CSS skills. Requires Contact Form 7, Contact Form 7 Skins.

Problem

Contact Form 7 (CF7) is an extremely popular WordPress plugin with over 6 million Active Installs. The CF7 plugin is capable of creating complex forms if you understand HTML forms well.

However regular WordPress users are likely to find it difficult to use compared to the many other WordPress form plugins (free & premium) that include a Visual Editor as the main way of creating forms.

Many people would prefer to have an option to use the visual drag and drop interface that is available in other WP form plugins when creating their CF7 forms. They struggle to understand & use HTML and find editing HTML within the Form section of the CF7 interface difficult – especially for complex forms.

Idea

Create a Visual Editor which operates on top of CF7’s robust form engine.

Build CF7 Skins Visual Editor – Lite & Pro versions. Lite version would give access to large numbers of WordPress users who would find CF7 much easier with a basic visual editor.

Should work well with:

  • CF7 Skins Templates – which use fieldsets with legends and ordered lists (rather than paragraph elements) to create CF7 forms
  • CF7 Skins Add-ons – which bring extra functionality into the CF7 interface

Solution

CF7 Skins Visual Editor – Lite

Lite version should include ONLY the simple easy to use features of Contact Form 7 that a regular WordPress user is likely to use in making a simple contact form.

All CF7 tags & options supported:

  • All CF7 tags plus fieldsets with legends and ol & li (works with CF7 Skins Templates)
  • Required field
  • Default value incl. use as placeholder option
  • ID & Class attribute
  • Akismet
  • Select, Checkbox & Radio Button options
  • Acceptance options

Note: More advanced features can be added via the normal Contact Form 7 Form Tag Generator interface.

UPDATE: 2016-12-07 – All CF7 tags & options supported in CF7 Skins Visual Editor – Lite

In addition CF7 Skins Visual Lite also includes the following CF7 Skins features:

  • CF7 Skins Templates – description
  • Fieldsets with Legends – description

Add extra features to CF7 Skins that improve CF7:

  • Quick Tools
  • Being able to minimize the CF7 Meta Box that contains the CF7 tabs would be uselful step in this direction

CF7 Skins Visual Editor – Pro

Pro version should include ALL the features available in Contact Form 7 & CF7 Skins via an easy to use visual interface.

  • Advanced Contact Form 7 features
    • ID & Class attribute
    • Akismet
    • Select, Checkbox & Radio Button options
    • Acceptance options
  • CF7 Skins Add-ons
    • CF7 Skins Multi
    • CF7 Skins Ready
    • CF7 Skins Logic
    • CF7 Skins Valid
    • CF7 Skins Advanced Fields
    • CF7 Skins ..
  • Contact Form 7 Extensions
    • Tags from other CF7 Extension plugins incl. CF7 Honeypot, etc.
    • Item

UPDATE: 2016-12-07 – All CF7 tags & options supported in CF7 Skins Visual Editor – Lite

Method

Examine how Visual Editor is implemented in other form plugins. From this examination, select and develop a quick and easy Visual Editor for Contact Form 7 forms.

Examine how following plugins implement their Visual Editor:

Investigate using React.js (and/or Backbone.js) rather than jQuery to build interactive front end (React.js selected).

Need to find easy way of keeping Lite & Pro code separated so that maintenance of two separate plugins is simplified (webpack selected).

Refer: CF7 Skins Visual

back to top

CF7 Skins – ORIGINAL IDEA #

CF7 Skins is an extension to the very popular Contact Form 7 (CF7) plugin – it makes creating great looking CF7 forms easy.

CF7 Skins – great looking Contact Form 7 forms made easy!

The Problem

While Contact Form 7 forms are easy to create and implement – building complex forms and getting them to look how you want does take some skill.

Experienced WordPress users, skilled at using HTML and CSS are able to style their CF7 forms to their particular requirements, but this requires a level of skill beyond many WordPress users.

While CF7 forms are easy to create and implement – it’s not that easy to get them looking like you want (particularly if you are not skilled at using both HTML and CSS)

Our Solution

CF7 Skins – makes it easy for people (even if you don’t have HTML + CSS skills) to create great looking Contact Form 7 forms.

CF7 Skins works within the normal CF7 plugin interface. Users can simply select from a range of Templates & Styles to build a CF7 Skin for their CF7 form.

Each CF7 Skins provides a complete solution and includes:

  1. form content and layout (Template) – HTML
  2. form presentation (Style) – CSS

Template + Style = Contact Form 7 Skin

The Templates provided cover a range of commonly used forms. Each Template acts as an easy to follow guide, which can be adapted/modified/changed by the user – right within the standard CF7 plugin interface.

The range of compatible Styles provided gives users a choice of look and feels for their CF7 forms. Each Style covers the full range of standard form elements available within Contact Form 7 (via CF7 form tags).

Users with little or no HTML & CSS skills can use this system to create great looking Contact Form 7 forms – quickly and easily.

FREE VERSION

Includes Contact Form 7 Skins for a range of commonly used forms. Documentation is available at our website, together with regularly updated FAQ (based on questions from our Premium customers). Community based support offered via the WordPress.org Support Forum by other Contact Form 7 Skins users.

PREMIUM VERSION

Provides a wider range of commonly used forms which cover specific application areas. Includes range of Ready Styles which cover a number of commonly used styles that allow users to add things like single lines quickly & easily in their forms. Documentation is available at our website including regularly updated FAQ plus detailed Tutorials.

Premium Email Support is provided (manned by paid staff) to deal with Premium users individual site requirements and problems.

back to top