Smart Grid-Layout Design for Contact Form 7
by Aurovrata V. 4.5 (72 reviews)

Smart Grid-Layout Design for Contact Form 7

This plugins allow pure CSS responsive grid layouts for contact form 7. It enables rich interlinking of your CMS data via taxonomy/posts populated dr …

Tested up to WP 6.5 (Current: 6.9)
v4.15.8 Current Version v4.15.8
Updated 1 year ago Last Update on 13 Jun, 2024
Synced 9 hours ago Last Synced on
Rank
#1,700
-1 this week
Active Installs
10K+
-43.8%
KW Avg Position
103.8
+0.2 better
Downloads
617.2K
+19 today
Support Resolved
0%
No change
Rating
90%
Review 4.5 out of 5
4.5 (72 reviews)

Next Milestone 20K

Total Progress 75.4%
10K+ 20K+
200
Ranks to Climb
-
Growth Needed
8,000,000
Active Installs
Pro

Unlock Exact Install Count

See the precise estimated active installs for this plugin, calculated from real-time ranking data.

  • Exact install estimates within tiers
  • Track install growth over time
  • Milestone progress predictions
Upgrade to Pro
Need 2,464 more installs to reach 20K+

Rank Changes

1,612 1,655 1,699 1,742 1,785 13-01-2026 14-01-2026 15-01-2026 16-01-2026 17-01-2026 18-01-2026 19-01-2026 20-01-2026
1,612 1,655 1,699 1,742 1,785 05-01-2026 06-01-2026 07-01-2026 08-01-2026 09-01-2026 10-01-2026 11-01-2026 12-01-2026 13-01-2026 14-01-2026 15-01-2026 16-01-2026 17-01-2026 18-01-2026 19-01-2026 20-01-2026
1,612 1,656 1,700 1,743 1,787 21-12-2025 22-12-2025 23-12-2025 24-12-2025 25-12-2025 26-12-2025 27-12-2025 28-12-2025 29-12-2025 30-12-2025 31-12-2025 01-01-2026 02-01-2026 03-01-2026 04-01-2026 05-01-2026 06-01-2026 07-01-2026 08-01-2026 09-01-2026 10-01-2026 11-01-2026 12-01-2026 13-01-2026 14-01-2026 15-01-2026 16-01-2026 17-01-2026 18-01-2026 19-01-2026 20-01-2026
1,609 1,654 1,698 1,742 1,787 22-10-2025 23-10-2025 24-10-2025 25-10-2025 26-10-2025 27-10-2025 28-10-2025 29-10-2025 30-10-2025 31-10-2025 01-11-2025 02-11-2025 03-11-2025 04-11-2025 05-11-2025 06-11-2025 07-11-2025 08-11-2025 09-11-2025 10-11-2025 11-11-2025 12-11-2025 13-11-2025 14-11-2025 15-11-2025 16-11-2025 17-11-2025 18-11-2025 19-11-2025 20-11-2025 21-11-2025 22-11-2025 23-11-2025 24-11-2025 25-11-2025 26-11-2025 27-11-2025 28-11-2025 29-11-2025 30-11-2025 01-12-2025 02-12-2025 03-12-2025 04-12-2025 05-12-2025 06-12-2025 07-12-2025 08-12-2025 09-12-2025 10-12-2025 11-12-2025 12-12-2025 13-12-2025 14-12-2025 15-12-2025 16-12-2025 17-12-2025 18-12-2025 19-12-2025 20-12-2025 21-12-2025 22-12-2025 23-12-2025 24-12-2025 25-12-2025 26-12-2025 27-12-2025 28-12-2025 29-12-2025 30-12-2025 31-12-2025 01-01-2026 02-01-2026 03-01-2026 04-01-2026 05-01-2026 06-01-2026 07-01-2026 08-01-2026 09-01-2026 10-01-2026 11-01-2026 12-01-2026 13-01-2026 14-01-2026 15-01-2026 16-01-2026 17-01-2026 18-01-2026 19-01-2026 20-01-2026
Current #1,700
Change
Best #

Upgrade to Pro

Unlock 30-day and 90-day rank history charts with a Pro subscription.

Upgrade Now

Active Installs Growth

Active Installs 0,000,000+
Growth +0.0%
Peak 0,000,000

Downloads Growth

10 20 30 13-01-2026 14-01-2026 15-01-2026 16-01-2026 17-01-2026 18-01-2026 19-01-2026 20-01-2026
10 20 30 05-01-2026 06-01-2026 07-01-2026 08-01-2026 09-01-2026 10-01-2026 11-01-2026 12-01-2026 13-01-2026 14-01-2026 15-01-2026 16-01-2026 17-01-2026 18-01-2026 19-01-2026 20-01-2026
0 10 20 30 21-12-2025 22-12-2025 23-12-2025 24-12-2025 25-12-2025 26-12-2025 27-12-2025 28-12-2025 29-12-2025 30-12-2025 31-12-2025 01-01-2026 02-01-2026 03-01-2026 04-01-2026 05-01-2026 06-01-2026 07-01-2026 08-01-2026 09-01-2026 10-01-2026 11-01-2026 12-01-2026 13-01-2026 14-01-2026 15-01-2026 16-01-2026 17-01-2026 18-01-2026 19-01-2026 20-01-2026
0 100 22-10-2025 25-10-2025 28-10-2025 31-10-2025 03-11-2025 06-11-2025 09-11-2025 12-11-2025 15-11-2025 18-11-2025 21-11-2025 24-11-2025 27-11-2025 30-11-2025 03-12-2025 06-12-2025 09-12-2025 12-12-2025 15-12-2025 18-12-2025 21-12-2025 24-12-2025 27-12-2025 30-12-2025 02-01-2026 05-01-2026 08-01-2026 11-01-2026 14-01-2026 17-01-2026 20-01-2026
0 100 20-01-2025 01-02-2025 13-02-2025 25-02-2025 09-03-2025 21-03-2025 02-04-2025 14-04-2025 26-04-2025 08-05-2025 20-05-2025 01-06-2025 13-06-2025 25-06-2025 07-07-2025 19-07-2025 31-07-2025 12-08-2025 24-08-2025 05-09-2025 17-09-2025 29-09-2025 11-10-2025 23-10-2025 04-11-2025 16-11-2025 28-11-2025 10-12-2025 22-12-2025 03-01-2026 15-01-2026 20-01-2026
Downloads
Growth
Peak

Upgrade to Pro

Unlock 30-day, 90-day, and yearly download history charts with a Pro subscription.

Upgrade Now

Reviews & Ratings

4.5
72 reviews
Overall 90%
5
60 (83%)
4
3 (4%)
3
2 (3%)
2
1 (1%)
1
6 (8%)

Tracked Keywords

Showing 5 of 5
Keyword Position Change Type Updated
contact form 7 module 39 Tag 11 hours ago
contact form 7 extension 46 Tag 11 hours ago
Multi-Step Form 104 Tag 11 hours ago
form custom styling 138 Tag 11 hours ago
responsive forms 192 Tag 11 hours ago

Unlock Keyword Analytics

Track keyword rankings, search positions, and discover new ranking opportunities with a Pro subscription.

  • Full keyword position tracking
  • Historical ranking data
  • Competitor keyword analysis
Upgrade to Pro

Support Threads Overview

Resolved
Unresolved
4
Total Threads
0
Resolved
4
Unresolved
0%
Resolution Rate

Track This Plugin

Get detailed analytics, keyword tracking, and position alerts delivered to your inbox.

Start Tracking Free

Plugin Details

Version
4.15.8
Last Updated
Jun 13, 2024
Requires WP
4.7+
Tested Up To
6.5
PHP Version
5.6 or higher
Author
Aurovrata V.

Support & Rating

Rating
★ ★ ★ ★ ★ 4.5
Reviews
72
Support Threads
4
Resolved
0%

Keywords

Upgrade to Pro

Unlock keyword rankings, search positions, and detailed analytics with a Pro subscription.

Upgrade Now

Frequently Asked Questions

Common questions about Smart Grid-Layout Design for Contact Form 7

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.
Simply create a new dynamic dropdown field using the added tag in the list of available tags and select the type of dynamic list you want to populate with. You create a list which will appear in the Information metabox in your edit page once you save your form. It uses the taxonomy management functionality of WordPress but is not associated with any posts as such. Simply edit the list by adding new terms to your list. These will appear in your dropdown field. Alternatively select an existing post from your dashboard and the post titles will be used to populate the dropdown. You also have the option to select a dynamic filter, and then the plugin will hook your functionality in your functions.php file to get your custom list.
When you create a dynamic dropdown, or a cf7 dropdown field, you add class:nice-select to your tag or 'nice-select' in the class text field option. The plugin will convert your dropdown into a beautiful nice-select field.
When you create a dynamic dropdown, or a cf7 dropdown field, you add class:select2 to your tag or 'select2' in the class text field option. The plugin will convert your dropdown into a powerful and searchable jQuery Select2 field. You can also enable select custom user options (known as tagging in the plugin documentation: https://select2.org/tagging) by adding the 'tags' class to your cf7 tag, class:tags.
When you convert a row into a collapsible section (see screenshot 8), you can check the toggle option which will insert 2 data attributes into your html row, with labels for the toggle switch on/off state. The default labels are 'yes' for on and 'no' for off. You can change the data-on and data-off attributes in the html text editor. Your form will display a toggle switch.
Navigate to the 'text' editor of the form, select all the html and delete the editor content. The plugin will create 1 default row with a single column in the 'grid' editor from which you can design your form afresh.
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, as of v1.1 of this plugin, toggled sections input fields are disabled when collapsed/unused, and therefore any fields within these sections are not submitted. So you can design fields to be required when toggled sections are used, and the fields will be validated accordingly too. Please note that in the back-end, these fields which are listed in the form layout but are not submitted are set eventually set as null in the filtered submitted data. So if you hook a functionality post the form-submission, be aware that you also need to test submitted values for NULL as opposed to empty.
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>

Sign In / Register

You need to sign in or register to use this feature.