Smart Grid-Layout Design for Contact Form 7 – WordPress plugin

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_scritp', 10,1);
function localise_custom_scritp($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.

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’);
}

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>

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.

As of v1.3 a search functionality has been introduced. Click anywhere in the text editor and press your search key combination (for example ‘Ctrl+F’ on Windows/Linux), you will see a search box at the top of the editor. This is useful if you want to edit a specific field, so once you have added a new cf7 field tag with the name say ‘your-email’, you can then search for it on the text editor to locate the code.

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.

As of v2.8, this functionality has now been included. You will need to add the data-max attribute to your table in the text editor and set it to the row limit you want (see screenshot #22). NOTE: in a lengthy form it is easy to navigate directly to the table or field’s text code line using the shortcode navigation buttons provided in the Grid editor, (see screenshot #19)

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.

existing forms are not editable in the grid editor.

Create a new form to be able to leverage the grid editor functionality.

this plugin allows you to create grid layout forms by creating a HTML markup and a CSS stylesheet which displays your form fields in a responsive grid.