/ Plugin Category

/ Forms & Data Collection

/ Contact Forms

/ Smart Grid-Layout Design for Contact Form 7

Smart Grid-Layout Design for Contact Form 7

By Aurovrata Venet

Forms & Data Collection / Contact Forms

Smart Grid-Layout Design for Contact Form 7 Review - In-Depth Analysis

This plugin allows pure CSS responsive grid layouts for Contact Form 7. It enables rich interlinking of your CMS data via taxonomy/posts populated dropdown fields.

Performance Overview

WPS Score

7/10

User Rating

4.5/5 (based on 72+ reviews)

Active Installations

10,000+

Update Frequency

Very Good It is calculated using the weighted average of same category plugins.

Security Score

1 / 10 (Very Low Risk) It is calculated using the weighted average of all versions.

What It Does

The plugin uses the smart-grid CSS plugin to build beautiful form layouts. It introduces a graphical editor to design your forms, as well as a coloured html syntax editor built using the excellent CodeMirror editor. It is now possible to design smart layouts with ease.

Version 4.0 introduces a tutorial section within the dashboard for quick reference to various YouTube tutorials. For a full list of available tutorials visit this playlist.

In addition, the plugin also introduces multiple smart input functionalities, such as tabled input sections, tabbed sections, and collapsible sections. These features help organize complex forms and improve user experience.

Looking for collaborators? Are you a WordPress developer or an HTML/JavaScript wizard? Join me on GitHub if you want to collaborate.

This plugin has a substantial set of FAQs and screenshots that provide a lot of information. Please go through the FAQs and screenshot captions to understand how to use the basic functionality.

Comparing to Alternatives

Smart Grid-Layout Design for Contact Form 7 enhances the layout capabilities of Contact Form 7, focusing on grid-based designs. Compared to other form plugins, it specializes in improving form aesthetics and structure rather than providing a full form-building solution.

Top alternatives

Strengths

Integrates seamlessly with Contact Form 7 to enhance layout design.
Offers dynamic and hidden fields for advanced customization.
Provides tutorial videos and active forum support.
Includes features like dynamic dropdowns and hooks for extensibility.

Weaknesses

Limited to enhancing Contact Form 7, not a standalone form builder.
No pro version available, restricting advanced premium features.
Some users report lack of recent updates and slow author response.
Grid system usage may be underutilized by some users.

User Sentiment Analysis

User feedback highlights the plugin's ease of use and helpful features, though some concerns about support responsiveness have been noted.

Positive highlights

'Easy to use and very helpful' - stubsal
'Ideal and perfect for long forms' - luispolanco
'Dynamic dropdown feature works perfectly' - leofromtheorck
'Well-designed with useful features like dynamic and hidden fields' - housein
'Adds a lot of features to CF7' - igorcherepanov

Common complaints

Delayed or no response from the author on some issues.
Plugin appears to have limited recent updates.
Some users do not utilize the grid system features.
Occasional bugs reported, such as with the duplicate feature.

Weaknesses

Support responsiveness has declined according to some users.
Perceived as potentially abandoned due to lack of recent updates.
Limited functionality outside of Contact Form 7 enhancement.
Some features may be underused by the user base.

Who Should Use This?

Best for

Users who rely on Contact Form 7 and want to improve their form layouts with grid-based designs and additional dynamic features.

Not ideal for

Those seeking a standalone form builder or requiring frequent support and updates might find this plugin limiting or insufficient.

Pricing & Value

Free version includes

The free version offers grid layout enhancements, dynamic and hidden fields, and integration with Contact Form 7, supported by tutorial videos and community forums.

Final Verdict

Smart Grid-Layout Design for Contact Form 7 is a valuable add-on for users wanting to enhance their Contact Form 7 layouts with grid designs and dynamic features. It is praised for ease of use and helpful support resources.

However, the lack of a pro version and concerns about recent updates and author responsiveness may affect long-term reliability. It is best suited for users comfortable with Contact Form 7 and who do not require extensive premium support.

Other Notable Features

Here are a few other notable features of this free Smart Grid-Layout Design for Contact Form 7 plugin.

Contact Form 7 Extension

Form Custom Styling

Responsive Forms

Screenshots

FAQ

Columns can be rearranged within a row by simply dragging and dropping using the handled icon in the columns head. You can also drag and drop a column into another row, if the target row has sufficient space to receive the column, else a warning msg will appear. In that case, make some room in the target row and/or resize the column so as to ensure it will fit in the row.

Similarly, you can re-organise your rows within a given grid. Your initial form is grid. You can convert an existing column into a grid.

The plugin wraps each cf7 tag with the following html,

<div class="field">    <label></label>    [CF7-tag shortcode]    <p class="info-tip"></p> </div>

Furthermore, CF7 tags that are marked as required, have the following html <em>*</em> appended in the . This enables for smart looking fields.

If you want to only modify a single column, simply find the column in the ‘text’ editor and modify the html wrapper as per your requirements.

If you want to change these wrappers for all the fields, then you can use the hook filters, cf7sg_pre_cf7_field_html to change the html before the cf7 tag, cf7sg_post_cf7_field_html to change the html after the cf7 tag, and cf7sg_required_cf7_field_html to change the required field label markup.

Each filter has 2 attributes passed to the hooked function,

add_filter('cf7sg_pre_cf7_field_html', 'filter_pre_html', 10, 2); function filter_pre_html($html, $cf7_key){   //the $html string to change   //the $cf7_key is a unique string key to identify your form, which you can find in your form table in the dashboard. }

Custom scripts
The plugin will look for a JavaScript file js/{$cf7key}.js from the base of your theme root folder and load it on the page where your form is displayed. Create a js/ subfolder in your theme (or child theme folder), and create a file called <your-form-cf7key>.js in which you place your custom JavaScript code.

In addition, if you need to localise your custom script, you can do so using the following action hook,

add_action('smart_grid_register_custom_script', 'localise_custom_script', 10,1); function localise_custom_script($cf7_key){   if('my-form'!=$cf7_key) return;   //your script is enqueued with the handle $cf7_key.'-js'   wp_localize_script($cf7_key.'-js', 'customObj', array('key1'=>'value1')); }

The $cf7key is the unique key associated with your form which you can find in the Information metabox of your form edit page.

Alternatively you can now use the custom JS editor built into the form editor, See this video tutorial for more details.

If you wish to wp_enqueue_script a general JavaScript file for all your forms, you can use the hook smart_grid_register_scripts,
add_action(‘smart_grid_register_scripts’, ‘add_js_to_forms’);
function add_js_to_forms(){
wp_enqueue_script(‘my-custom-script’, ”, array(), null, true);
}
custom styling
Similarly, you can create a css/ subfolder in your theme folder and create a file in it called <your-form-cf7key>.css and place your custom styling for your form. The plugin will then load this CSS file on the page where your form is displayed.

If you wish to wp_enqueue_styles a general CSS stylesheet file for all your forms, you can use the hook smart_grid_register_styles,
add_action(‘smart_grid_register_styles’, ‘add_css_to_forms’);
function add_css_to_forms(){
wp_enqueue_style(‘my-custom-style’, ”, array(), null, ‘all’);
}

Alternatively you can now use the custom CSS editor built into the form editor, See this video tutorial for more details.

Yes, with v1.1 you can the data-group attribute which by default is empty to regroup toggled sections and therefore ensure that only 1 of these grouped sections is used by a user. Edit your form in the html editor (Text tab) and fill the data-group attribute with the same value (no spaces) for each toggled section (div.container.with-toggle) you wish to re-group,

<div class="container cf7sg-collapsible with-toggle" id="0sTn7L" data-group="group1">   <div class="cf7sg-collapsible-title"><span class="cf7sg-title toggled">Name &amp; Contact</span>     <div class="toggle toggle-light" data-on="Yes" data-off="No"></div>   </div>   <div class="row">     <div class="columns one-third">     </div>     <div class="columns one-third">     </div>     <div class="columns one-third">     </div>   </div> </div> <div class="container cf7sg-collapsible with-toggle" id="CNeqCy" data-group="group1">   <div class="cf7sg-collapsible-title"><span class="cf7sg-title toggled">Address</span>     <div class="toggle toggle-light" data-on="Yes" data-off="No"></div>   </div>   <div class="row">     <div class="columns full">     </div>   </div> </div>

When you install Post My CF7 Form plugin to map your form submissions to posts in the dashboard, this plugin will automatically save the toggle status, so that draft forms can be re-loaded as well accessing the data for later use. The status of the toggle is saved to the custom meta-field cf7sg_toggles_status,

$toggles = get_post_meta($post->ID, 'cf7sg_toggles_status', true);

this will retrieve an array with the following key=>value pairs,

<toggle-element-id>=>""<toggle-label>|Yes"

the key is the unique id of your toggle .container element. If you navigate to the element in the text editor you will notice that a random ‘id’ attribute has already been set, you can change this to something more meaningful.
The value of the array if set at the text string comprised of the toggle label (which you filled in), followed by the positive selection string (toggle open status) which is ‘Yes’ by default, and separated by the ‘|’ (pipe) character. If the toggle has not been opened, no key/value pairs will be saved in the array for that toggle.

yes, you can use the following filters to either switch off only the shortcode highlighting, (add the following line to your functions.php file)

add_filter('cf7sg_admin_editor_mode', function($mode, $form_key){return '';}, 10, 2);

and you can also turn off highlight altogether by inserting this additional line to your functions.php file,
add_filter(‘cf7sg_admin_editor_theme’, function($theme, $form_key){return ”;}, 10, 2);

Yes, identify the row in your text editor which implements your collapsible section, and add the data-open="true" attribute to it,

<div class="container cf7sg-collapsible" data-open="true" ...

If you have a set of fields that are in a table/tab structure, the plugin is not aware of their relationship and as such does not build a table layout in a mail when you use them as tags in a message. However, a filter is provided for you to archive this. The filter #3 in the Post-form submit hooks allows you to build a table layout in an html mail. Ensure the html format checkbox is selected in your mail settings, else the filter will not fire.
In your mail message body, place the mail tags contiguously for each field that is present in your table. Hence, assuming you have a table with 3 fields, field-one, field-two, field-three. Place their tags in the mail body as

[field-one][field-two][field-three]

copy the filter helper code (see screenshot #21) and place it in your functions.php file. The code sample assumes the above example fields and sets up a list element for each field, along with a column header. These list elements are then styled to display them as tables in your mail.

Yes this is possible. However, keep in mind that the forms are sanitised using wp_kses() function, so any html elements which are not included in the set of permitted elements will be stripped out of the form. A filter is included for you add additional html code permitted by the sanitisation function,

add_filter('cf7sg_kses_allowed_html', 'add_custom_html', 10,2); function add_custom_html($allowed, $cfk7_key){   if('my-custom-form' !== cfk7_key) return $allowed;   $allowed['pre']=array('class'=1);   return $allowed; }

Yes, there are filters that have been created to allow a user to modify the html structure. See the Hook & Filters #1, #2, and #3 (screenshot #21).

These filters will only impact new forms or new cells (rows/columns) created.

For the required HTML markup in the label it is possible to manually change the html without the use of the filter by simply marking up your required symbol/text with a span element. For example,

<span>(req)<\span>

in order to replace the existing markup.

In some server configuration, accessing cloudflare resources results in 522 error (see this thread). The plugin uses select2 JavaScript plugin library stored on the cdnjs cloudflare network for live sites. To force the plugin to use the local resource, insert the following filter in your functions.php file,

add_filter('cf7sg_use_local_select2', '___return_true');

The current cut-off is 480 screen width in px. You can filter this value with the cf7sg_responsive_width hook,

add_filter('cf7sg_responsive_width', 'change_mobile_cutoff',10,2); function change_mobile_cutoff($px, $form_key){   return 320; }

Contributors and developers

“Smart Grid-Layout Design for Contact Form 7” is open source software. The following people have contributed to this plugin.

Free Version Docs

WPS

7

Average

Ratings

4.5 out of 5 | 72

Version

4.16.0

Last updated

3 weeks ago

Active installations

10,000+

WordPress version

6.9.4 or higher

PHP version

7.4 or higher

Languages

Other plugins you might like

Contact Form 7

By Rock Lobster Inc.

WPS

7.67

Very Good

4/5

2.2k+reviews

10M+

active installation

Tested with

7.0

WPForms – Easy Form Builder for WordPress – Contact Forms, Payment Forms, Surveys, & More

By Syed Balkhi

WPS

7.78

Very Good

4.8/5

14.3k+reviews

6M+

active installation

Tested with

6.9.4

Ninja Forms – The Contact Form Builder That Grows With You

By Kevin Stover

WPS

7.22

Very Good

4.4/5

1.4k+reviews

600k+

active installation

Tested with

6.9.4

VS Contact Form

By Guido

WPS

6.69

Average

4.8/5

50+reviews

7k+

active installation

Tested with

6.9.4

Contact Form by Supsystic

By supsystic

WPS

6.75

Average

4.7/5

92+reviews

6k+

active installation

Tested with

6.9.4

Custom Contact Forms

By Taylor Lovett

WPS

7.01

Very Good

3.5/5

171+reviews

6k+

active installation

Tested with

4.8.28

Smart Grid-Layout Design for Contact Form 7 Review - In-Depth Analysis

Performance Overview

What It Does

Comparing to Alternatives

User Sentiment Analysis

Who Should Use This?

Pricing & Value

Final Verdict

Other Notable Features

Screenshots

FAQ

Contributors and developers

Ratings

Reviews (72)

Sort by:

Contributors & Developers

Interested in development?

Changelog

Security Status

Secure

No Unpatched Vulnerabilities

Known Vulnerabilities (0)

WPS

7

Other plugins you might like

Contact Form 7

WPForms – Easy Form Builder for WordPress – Contact Forms, Payment Forms, Surveys, & More

Ninja Forms – The Contact Form Builder That Grows With You

VS Contact Form

Contact Form by Supsystic

Custom Contact Forms