Recommended

Featured

Articles

team

support

code

forms

freemium

docs & writing

other form plugins & apps

gutenberg

Extra

Podcasts

Videos

Slides

Ebooks

Plugins

Release CF7 Skins Visual

I'm thinking about & planning how we do the following:

  • Complete work on RST version in Oct – Nov
  • Prepare Beta version (based on Contact Form 7 Skins Visual Dev plugin) during Nov – Dec
  • Conduct testing by current CF7 Skins Pro customers during January 2018
  • Release CF7 Skins Visual within Contact Form 7 Skins (free version) in Feb – Apr 2018

Note: need to release CF7 Skins Visual version for CF7 Skins Pro at same time

Gutenberg Editor will fundamentally change all development in WordPress

Gutenberg Editor is at the heart of the future of WordPress. The way Gutenberg interacts with things like the Media Library, WP Rest API & the Customizer will become the foundation of how WordPress works 5 – 10 years from now.

This will fundamentally change the way themes & plugins interact with WordPress, from a situation where PHP dominates, to a new mode where both JavaScript & PHP cooperate in that interaction.

Gutenberg Ideas

With the introduction of the Gutenberg Editor into WordPress it is likely than many users will become familiar & comfortable with this interface.

I believe it makes sense for us to try to match the overall UI for the CF7 Skins Visual Editor with this new WordPress interface.

  • It is also written using React.js
  • The overall structure is also pretty similar.

Install CF7 Skins plugins on customer site

You can install latest versions of CF7 Skins plugins on customer sites.

Start by using the latest Live versions.

You should have access via Dropbox to latest live versions of all CF7 Skins plugins at Dropbox\Support\Zips – CF7 Skins Pro & Add-ons\. License Keys are also there.

You can if necessary install the latest Dev version from the relevant Bitbucket repository.

Setup WP_DEBUG with Developer plugin

Normally WP_DEBUG can be set to true using FTP or hosting panel.

If you have Admin rights on a customer’s site, WP_DEBUG can be set to true to see errors via the Developer plugin.

This appears to be no longer possible in Developer – we are looking for an alternative.

We asked for help on WP Answers at http://discourse.wpanswers.co/t/372 and got the SO Turn On Debug plugin as a solution. We are currently testing this.

You can still use the Developer plugin to check if WP_DEBUG can be set to true.

Make sure you remove WP_DEBUG when you finish – especially if this is a live site.

CF7 Skins Visual started – a drag and drop visual editor for Contact Form 7 forms

CF7 Skins Visual

We’ve started work on CF7 Skins Visual – a drag and drop visual editor for Contact Form 7 forms.

We believe many WordPress users would like to use a visual drag and drop interface similar to that available in other WordPress form plugins.

We decided to give people an option to use a drag and drop visual editor within CF7 Skins as a quick and easy way to create Contact Form 7 forms.

CF7 Skins Visual works right within the normal Contact Form 7 interface

CF7 Skins Visual Interface

Provides all Contact Form 7 tags

cf7s-visual-interface-02

Edit Contact Form 7 tags quickly & easily

cf7s-visual-interface-03

Includes support for CF7 Skins unique innovative features & Add-ons

cf7s-visual-interface-04

CF7 Skins Visual works with the other innovative features championed in CF7 Skins including Templates & Styles as well as integrated support for Fieldsets & Lists within your Contact Form 7 forms.

Built using React

We’re very excited to be using React to build this extension to CF7 Skins. We are building it from the ground up to take advantage of what the React.js JavaScript library has to offer.

So far we’ve found React.js to be a terrific tool for building a visual interface within a WordPress plugin. Already we’ve seen very significant improvements when compared to using jQuery to add JavaScript functionality to our CF7 Skins plugins.

In particular using React JSX allows us to experiment quickly & easily with changes to the interface using something that feels very much like simple HTML.

Plus using React Components lets you focus on small discrete parts of the interface. Using modular CSS also keeps things contained & separated.

We also found Redux ideal for maintaining state in the JavaScript interface. What we’d previously found increasingly cumbersome & confusing when using jQuery is amazingly simple with Redux (once you know what you are doing) and so far it’s remained just as simple as we’ve added more complexity to the interface.

CF7 Skins Visual is built from the ground up to take advantage of what the React.js JavaScript library has to offer.

Works with CF7 Skins other innovative features

CF7 Skins Visual is great for simple forms but it really shines for more complex forms. Especially when you combine this with the convenience offered by CF7 Skins other innovative features.

Templates

Each Template acts as an easy to follow guide, which can be quickly adapted to your particular requirements:
– start off by choosing a CF7 Skins Template with matches your required form
– quickly add or delete fields using the Visual Editor
– then use the drag and drop interface to adjust the form to suit your requirements.

Styles

CF7 Skins provides a wide range of compatible Styles that cover the full range of Contact Form 7 form elements plus other important innovative elements supported by CF7 Skins like Fieldsets or Lists.

With CF7 Skins you can use the easy to use Visual Editor, together with a range of compatible Templates and Styles, to make creating & styling of Contact Form 7 forms much easier.

Fieldsets & Lists

The CF7 Skins Visual Editor makes building of CF7 Skins forms, including Fieldsets and Lists, even easier by the use of a simple drag and drop interface.

Using these important form elements supported by CF7 Skins enhances form usability and allows significantly more detailed styling of your forms.

Why we use Fieldset, Legend & Lists in CF7 Skins

Making your form easy to read by using Fieldsets

CF7 Skins Add-ons

Plus you also get an integrated visual interface for all our CF7 Skins Add-ons. For CF7 Skins Pro users each CF7 Skins Add-on can be operated via the visual interface.

This is a big project for us that’s going to take some time to finish. However we wanted to involve existing CF7 Skins users as early as possible to get ongoing feedback.