Skip to content
Home ยป Documentation ยป Contact Form 7 – Dynamic Text Extension ยป Form Tags ยป Dynamic Select

Dynamic Select

Dynamic Select is a form tag added by Contact Form 7 – Dynamic Text Extension (DTX) that creates <select> form fields for forms created with Contact Form 7. It expands upon Contact Form 7’s drop-down menu form tag, accepting all of the options it does, along with these additional options introduced by DTX:

OptionDescriptionExample
Dynamic optionsSet the dynamic options for the select field. 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 can return HTML for options or optgroups that can override the other options regarding the First Option and Selected 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.
[dynamic_select inputname "Hello world" "Foo" "Bar"]

[dynamic_select inputname "hello-world | Hello world" "foo | Foo" "bar | Bar"]

[dynamic_select inputname "custom_shortcode"]

[dynamic_select inputname "Static Foo" "shortcode_bar"]

[dynamic_select inputname "shortcode_value | Static Label" "static value | shortcode_label"]
First OptionInsert a blank item at the top of the options for the drop-down menu.[dynamic_select inputname include_blank]
First Option LabelSet the label for the first blank item. Only has any effect if “First Option” is enabled. See dynamic placeholder documentation for more details and examples.[dynamic_select inputname include_blank placeholder:Choose]
Hide First OptionHide the first blank option from being visible in the drop-down by adding a hidden attribute to the option element. Only has any effect if “First Option” is enabled.[dynamic_select inputname include_blank dtx_hide_blank]
Disable First OptionDisable the first blank option from being selectable in the drop-down by adding a disabled attribute to the option element. Only has any effect if “First Option” is enabled.[dynamic_select inputname include_blank dtx_disable_blank]
Cache CompatibleEnable cache compatibility mode for this field[dynamic_select inputname dtx_pageload]
Options for the Dynamic Select form tag for Contact Form 7 provided by DTX.

These settings are easily configurable using the form-tag generator.

The form tag generator screen for the dynamic drop-down menu (select) form tag

Demo

Check out the dynamic select form tag in the demo forms below.

Demo Select FieldForm Tag Used in Demo
A dynamic select form tag with the Hide First Option enabled.

    [dynamic_select* inputname include_blank dtx_hide_blank "Apples" "Bananas" "Dragonfruit"]
    A dynamic select form tag with the Disable First Option enabled.

      [dynamic_select* inputname include_blank dtx_disable_blank "Apples" "Bananas" "Dragonfruit"]
      Simple dynamic select field with static values and a custom “placeholder” value for the first, blank option.

        [dynamic_select* inputname placeholder:Choose%20a%20fruit! include_blank "1 | Apples" "2 | Bananas" "3 | Dragonfruit"]
        Dynamic select field with a custom “placeholder” value for the first, blank option and using a single custom shortcode to populate all the options.

          [dynamic_select* inputname placeholder:Select%20a%20WordPress%20Plugin include_blank "au_dtx_demo_get_wordpress_plugin_options"]
          Dynamic select field with using a shortcode to populate the “placeholder” value for the first, blank option and using a combination of static values and a custom shortcode to populate various options. The first option is just a single option. The second uses the pipe separation to define static options. The third option uses a shortcode for both the value and the option. The third uses a shortcode to return just the value. The fourth uses a shortcode just return the label.

            [dynamic_select* inputname placeholder:CF7_get_post_var%20key%3D%26%2339%3Bpost_title%26%2339%3B include_blank "Static Option 1" "static-option-2 | Static Option 2" "au_dtx_demo_shortcode_option" "au_dtx_demo_shortcode_option key='value' | My Value is Dynamic" "static-option-last | au_dtx_demo_shortcode_option key='label'"]
            Table of demo contact forms featuring the dynamic select form tag.

            And here are the two custom shortcode definitions used in the demos above.

            au_dtx_demo_get_wordpress_plugin_options

            This function queries my website for products associated with the “WordPress Plugin” category and returns them as option HTML using the product ID as the option value and the product name as the label.

            /**
             * Get WordPress Product Options for DTX Select Field
             *
             * @return string HTML output of product options for use inside a <select> field or empty string on failure
             */
            function au_dtx_demo_get_wordpress_plugin_options()
            {
                $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)) {
                    $html = '';
                    foreach ($products as $product_id) {
                        $html .= sprintf('<option value="%s">%s</option>', esc_attr($product_id), esc_html(get_the_title($product_id)));
                    }
                    return wp_kses($html, wpcf7dtx_get_allowed_field_properties('option'));
                }
                return '';
            }
            add_shortcode('au_dtx_demo_get_wordpress_plugin_options', 'au_dtx_demo_get_wordpress_plugin_options');
            au_dtx_demo_shortcode_option

            This function was written for demonstration purposes to show that I can return individual values to insert as an option value, label, or the HTML depending on what I set the key attribute to.

            /**
             * Get WordPress Product Options for DTX Select Field
             *
             * @param array $atts Shortcode attributes
             *
             * @return string HTML output of option or value for specified key attribute
             */
            function au_dtx_demo_shortcode_option($atts)
            {
                $atts = shortcode_atts(array('key' => ''), array_change_key_case((array)$atts, CASE_LOWER));
                $atts['key'] = sanitize_text_field($atts['key']);
                if ($atts['key'] == 'value') {
                    return esc_attr__('value-from-shortcode', 'aurise');
                } elseif ($atts['key'] == 'label') {
                    return esc_html__('Shortcode value!', 'aurise');
                }
                return wp_kses('<option value="hello-world">Hello World!</option>', wpcf7dtx_get_allowed_field_properties('option'));
            }
            add_shortcode('au_dtx_demo_shortcode_option', 'au_dtx_demo_shortcode_option');

            Helper Functions

            You can use the following functions to help write your custom shortcodes for the Dynamic Select form tag to ensure the HTML output is consistent with W3C standards:

            wpcf7dtx_get_allowed_field_properties(string $type = text, array $extra = array()): array

            Get allowed HTML for form field properties

            Parameters

            1. $type (string) Optional. The type of input for unique properties. Possible types include text, email, url, tel, password, textarea, checkbox, radio, select, number, range, , date, datetime-local, time, option, optgroup, and acceptance. Default is text.
            2. $extra (array) Optional. A sequential array of properties to additionally include.

            Return

            Array: An associative array of allowed properties appropriate for use in wp_kses()

            Example Usage

            Basic example for a form tag that looks like this:

            [dynamic_select inputname "custom_options"]

            The custom shortcode to output the values could look like this:

            function custom_options() {
                $allowed_html = wpcf7dtx_get_allowed_field_properties('option');
                $html = '<option value="1">Foo</option><option value="2">Bar</option>';
                return wp_kses($html, $allowed_html);
            }
            add_shortcode( 'custom_options', 'custom_options' );

            wpcf7dtx_select_html(array $atts, array|string $options, bool $hide_blank = false, bool $disable_blank = false): string

            Creates select field HTML.

            Parameters

            1. $atts (array) An associative array of select input attributes
            2. $options (array|string) Accepts an associative array of key/value pairs to use as the select option’s value/label pairs. It also accepts an associative array of associative arrays with the keys being used as option group labels and the array values used as that group’s options. It also accepts a string value of HTML already formatted as options or option groups. It also accepts a string value of a self-closing shortcode that is evaluated and its output is either options or option groups.
            3. $hide_blank (boolean) Optional. If true, the first blank placeholder option will have the `hidden` attribute added to it. Default is false.
            4. $disable_blank (boolean) Optional. If true, the first blank placeholder option will have the `disabled` attribute added to it. Default is false.

            Return

            String: HTML output of select field.

            Examples

            Basic example:

            function custom_options() {
            
            }
            add_shortcode( 'custom_options', 'custom_options' );

            The dynamic_select form tag was introduced in version 4.0.0 of the Contact Form 7 โ€“ Dynamic Text Extension WordPress plugin.

            Related Post Module Attributes Before

            array(29) {
              ["post_type"]=>
              string(4) "post"
              ["post_id"]=>
              string(1) "0"
              ["exclude"]=>
              string(1) "0"
              ["title"]=>
              string(32) "Related Articles & Tutorials"
              ["description"]=>
              string(0) ""
              ["max"]=>
              string(1) "3"
              ["post_ids"]=>
              string(0) ""
              ["exclude_ids"]=>
              string(0) ""
              ["is_series"]=>
              string(0) ""
              ["featured_term"]=>
              string(3) "307"
              ["exclude_terms"]=>
              string(0) ""
              ["exclusive"]=>
              string(1) "1"
              ["order"]=>
              string(4) "DESC"
              ["show_image"]=>
              string(2) "on"
              ["image_size"]=>
              string(6) "medium"
              ["menu_order_label"]=>
              string(0) ""
              ["show_order_label"]=>
              string(2) "on"
              ["show_date"]=>
              string(2) "on"
              ["show_meta_keys"]=>
              string(2) "on"
              ["show_modified"]=>
              string(0) ""
              ["show_author"]=>
              string(0) ""
              ["show_categories"]=>
              string(0) ""
              ["show_primary_category"]=>
              string(0) ""
              ["show_description"]=>
              string(0) ""
              ["show_reading_time"]=>
              string(2) "on"
              ["show_cta"]=>
              string(2) "on"
              ["cta"]=>
              string(9) "Read more"
              ["autoplay"]=>
              string(0) ""
              ["allow_sticky"]=>
              string(0) ""
            }
            

            Related Post Module Attributes

            array(29) {
              ["post_type"]=>
              string(4) "post"
              ["post_id"]=>
              string(1) "0"
              ["exclude"]=>
              string(1) "0"
              ["title"]=>
              string(32) "Related Articles & Tutorials"
              ["description"]=>
              string(0) ""
              ["max"]=>
              string(1) "3"
              ["post_ids"]=>
              string(0) ""
              ["exclude_ids"]=>
              string(0) ""
              ["is_series"]=>
              string(0) ""
              ["featured_term"]=>
              string(3) "307"
              ["exclude_terms"]=>
              string(0) ""
              ["exclusive"]=>
              string(1) "1"
              ["order"]=>
              string(4) "DESC"
              ["show_image"]=>
              string(2) "on"
              ["image_size"]=>
              string(6) "medium"
              ["menu_order_label"]=>
              string(0) ""
              ["show_order_label"]=>
              string(2) "on"
              ["show_date"]=>
              string(2) "on"
              ["show_meta_keys"]=>
              string(2) "on"
              ["show_modified"]=>
              string(0) ""
              ["show_author"]=>
              string(0) ""
              ["show_categories"]=>
              string(0) ""
              ["show_primary_category"]=>
              string(0) ""
              ["show_description"]=>
              string(0) ""
              ["show_reading_time"]=>
              string(2) "on"
              ["show_cta"]=>
              string(2) "on"
              ["cta"]=>
              string(9) "Read more"
              ["autoplay"]=>
              string(0) ""
              ["allow_sticky"]=>
              string(0) ""
            }