Dynamic Checkbox is a form tag added by Contact Form 7 – Dynamic Text Extension (DTX) that creates a group of <input type="checkbox"> form fields for forms created with Contact Form 7. It expands upon Contact Form 7’s checkbox form tag, accepting all of the options it does, along with these additional options introduced by DTX:
| Option | Description | Example |
|---|---|---|
| Dynamic options | Set a dynamic options for the checkbox(es). The value(s) are shown in the form tag between quotes. It can be static text or a shortcode. If static text, use one option per line (each option is shown in the form tag between quotes, in order). Can define static options as just the option or as key/value pairs using pipes ({option value} | {option label}).If shortcode, it must return a JSON string of key/value pairs. Alternatively, it must return valid checkbox HTML that can override the other options regarding which checkboxes are checked or unchecked by default. You can use a combination of static values and shortcodes, both as individual options or to return the value or label of an option. | |
| Selected Default | Optionally define the checkbox that is checked by default. If options use key/value pairs, only define the key here. Can be static text or a shortcode. If using static text with spaces or special characters, or using shortcodes with parameters, the value of the default attribute should be encoded like the dynamic placeholder. | This last example uses CF7_GET key=’foo’ to define the checkbox that should be checked on page load |
| Reverse | By default, the checkbox button comes first followed by it’s label text. By adding the label_first option, you can reverse them so the label text comes first followed by the checkbox button. | [dynamic_checkbox inputname label_first] |
| Label | Wrap each checkbox button and it’s label text with a <label> element. | [dynamic_checkbox inputname use_label_element] |
| Id attribute | Sets the id attribute of the wrapper element. | [dynamic_checkbox inputname id:foo] |
| Class attribute | Adds to the class attribute of the wrapper element. To set two or more classes, you can use multiple class: option. | [dynamic_checkbox inputname class:bar][dynamic_checkbox inputname class:hello class:world] |
| Read only attribute | Sets the readonly attribute to the input elements to prevent users from editing them. | [dynamic_checkbox inputname readonly] |
| Cache Compatible | Enable cache compatibility mode for this field | [dynamic_checkbox inputname dtx_pageload] |
These settings are easily configurable using the form-tag generator.
Demo
Check out the dynamic checkbox form tag in the demo forms below.
| Dynamic Checkbox Demo | Form Tag used in Demo |
|---|---|
| A dynamic checkbox form tag using a shortcode to get options: | [dynamic_checkbox inputname "au_dtx_demo_get_wordpress_plugin_checkbox_options"] |
A dynamic checkbox form tag using a custom shortcode to get options and using the built-in shortcode CF7_GET key='product' to retrieve the default value from the URL’s query parameter. Click here to reload the page with the query parameter so that the DTX product checkbox below is checked by default. | [dynamic_checkbox inputname default:CF7_GET%20key%3D%26%2339%3Bproduct%26%2339%3B "au_dtx_demo_get_wordpress_plugin_checkbox_options"] |
| The same form tag as above, but with the label and checkbox reversed: | [dynamic_checkbox inputname label_first "au_dtx_demo_get_wordpress_plugin_checkbox_options"] |
| The same form tag as the first, but wrapping each item with a label element: | [dynamic_checkbox inputname use_label_element "au_dtx_demo_get_wordpress_plugin_checkbox_options"] |
| The same form tag as the first, but with the exclusive option enabled: | [dynamic_checkbox inputname exclusive "au_dtx_demo_get_wordpress_plugin_checkbox_options"] |
| The checkbox form tag using a combination of static and dynamic options, specifically the CF7_get_post_var shortcode for the third option: | [dynamic_checkbox inputname "Apples" "bananas | Bananas" "CF7_get_post_var key='slug' | CF7_get_post_var key='title'"] |
And here is the custom shortcode definition used in the demos above.
au_dtx_demo_get_wordpress_plugin_checkbox_options
This function queries my website for products associated with the “WordPress Plugin” category and returns them as a JSON encoded object using key/value pairs to represent the checkbox’s value/label pairs.
/**
* Get WordPress Product Options for DTX Select Field
*
* @return string JSON encoded checkbox options of key/value pairs to represent value/label pairs.
*/
function au_dtx_demo_get_wordpress_plugin_checkbox_options()
{
$options = array();
$products = get_posts(array(
'fields' => 'ids',
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC',
'ignore_sticky_posts' => false, // move sticky posts to the start of the set
'tax_query' => array(array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => 'wordpress-plugin',
'include_children' => true,
'operator' => 'IN'
))
));
if (is_array($products) && count($products)) {
foreach ($products as $product_id) {
$options[$product_id] = get_the_title($product_id);
}
}
return json_encode($options);
}
add_shortcode('au_dtx_demo_get_wordpress_plugin_checkbox_options', 'au_dtx_demo_get_wordpress_plugin_checkbox_options');The dynamic_checkbox form tag was introduced in version 4.0.0 of the Contact Form 7 – Dynamic Text Extension WordPress plugin.
