CF7 Skins Visual

Last Updated on December 25, 2017 by Neil Murray

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