Contact Form 7 Default Select Value using URL Query Variable

In a previous post I described how to use URL parameters to auto populate input fields in a form on a WordPress site using the Contact Form 7 plugin. One of the comments I received asked whether the same technique can be used to set the default value of a CF7 select field. Here is one way in which this can be achieved, with the help of a bit of Javascript: -

1. Set up a WP query variable which will be used to pass data to the form containing the select by adding this code to your theme's functions.php file: -


function parameter_queryvars( $qvars ) {
    $qvars[] = ‘defaultvalue’;
    return $qvars; 
} 
add_filter(‘query_vars’, ‘parameter_queryvars’ ); 

function echo_defaultvalue() { 
    global $wp_query; 
    if (isset($wp_query->query_vars['defaultvalue'])) { 
        print $wp_query->query_vars['defaultvalue']; 
    } 
} 

2. If you haven't done so already, install the Contact Form 7 Dynamic Text Extension plugin.

3. Create a CF7 form containing a select field and a dynamic hidden input field into which the query variable will be passed: -


[select menu-nn id:test class:test-class "one" "two" "three" "four" "five"] 
[dynamichidden hiddendefault "CF7_GET key='defaultvalue'"]

4. Add some Javascript code to the <head> section of the form page or your theme's Javascript file. I've used jQuery in this case: -


var $ = jQuery.noConflict(); // use value of hidden CF7 input to set selected option in select field $(document).ready(function(){ // get contents of hidden input; store in variable 
    var val =  $("span.hiddendefault input").val(); // set the "selected" attribute for option with value equal to variable 
    $('select#test option[value=' + val + ']').attr('selected', 'selected'); 
}); 

5. Send the value to which you want the select field to default to the form as follows: -

http://yoursite.com/form-with-select/?defaultvalue=two

6. Your select will now default to the value you pass to the page via the query variable.

View a demo here

See also: auto populate contact form 7 input fields with URL parameter

Tags: , ,
Posted on 23 Comments

23 Responses

  1. Ali says:

    Hi,
    Thank you for your great work. This is very useful and I can see your demo is working perfectly fine. I am not sure what I am doing wrong. I have followed all steps but mine is not working. Also, when I add var val = $(“span.hiddendefault input”).val(); in js folder in any file I get syntax error massage for above line. Could you please help me getting this fixed. Thanks in advance.

  2. Abe Rashdyi says:

    Hi,
    I'm using [dynamictext dynamictext-732 uneditable "CF7_URL"] in Contact Form 7. It is working fine, the url is showing up on the form, but the URL is not included in the submitted form I receive. Instead I get [dynamictext dynamictext-732 uneditable "CF7_URL"] in the form body. Do you know of a script or a tweak that can submit the URL with contact info.

    Thanks

  3. Jason Stephens says:

    Hi,
    The default value isn't changing on the demo?

  4. This was a great idea! Works fantastic. I needed to do one text field and one drop down field, so I came up with this:

    
    function parameter_queryvars( $qvars ) {
        $qvars[] = ‘defaultvalue’;
        $qvars[] = ‘defaultvalueb’;
        return $qvars;
    }
    add_filter(‘query_vars’, ‘parameter_queryvars’ ); 
    
    function echo_defaultvalue() {
        global $wp_query;
        if (isset($wp_query->query_vars['defaultvalue'])) {
            print $wp_query->query_vars['defaultvalue'];
        }
    }
    function echo_defaultvalueb() {
        global $wp_query;
        if (isset($wp_query->query_vars['defaultvalueb'])) {
            print $wp_query->query_vars['defaultvalueb'];
        }
    }
    
    

    I used this with Form Lightbox plugin, which integrates Contact Form 7.
    I used this with a light box loading form values into a bigger form. Integrating with the lightbox would be nice but I found a work around. What I did was sent the values to a cloned page called "form-results" and set the lightbox on autoload. The lightbox loads with the correct values on the new page.

  5. Collin says:

    I am using the CF7 pipes option to hide email addresses from the user. Could you please tell me how to do this when my CF7 select values have spaces in them? Fore example...


    [dynamichidden hiddendefault "CF7_GET key='p'"]
    [select your-recipient id:test class:test-class
    "General Info|info"
    "John Smith|jsmith"
    "Tech. Support|support"]

    What url would I use to select either "John Smith" or "Tech. Support" in my dropdown?

    Thanks for the excellent tutorial!

  6. Some remarks

    All is working without update of function.php template file. I don't know why this update is required.

    To support select label with spaces, I modifiy the javascript code :

    
    var $ = jQuery.noConflict(); // use value of hidden CF7 input to set selected option in select field 
    $(document).ready(function(){ 
        // get contents of hidden input; store in variable 
        var val =  $("span.hiddendefault input").val(); // set the "selected" attribute for option with value equal to variable 
        $('select#test option[value="' + val + '"]').attr('selected', 'selected'); 
    });
    

    In last line, referring JQuery documentation, multiple words values must be double quoted.

    Regards,
    Laurent

  7. Circey says:

    This really helpful! I'm wondering how it might be achieved with radios also.

    I tried changing all instances of "select" to "radio" and "selected" to "checked", but that didn't work. Do you have any ideas? MTIA.

  8. brisk says:

    I just wanted to say thank you for sharing your wisdom on CF7. It was incredibly helpful. Thanks!

  9. Josh says:

    Does this still work? I can't get it to work on a site I'm developing.

  10. Daniel Viera says:

    I cannot make this work. I get the correct value in the hidden field, but I can not make the select to be "selected"..
    What could I be missing?
    Thanks in advance!
    Daniel

  11. Daniel Viera says:

    Just found the answer.
    the script should be placed before de wp_head();

    Great HELP!!

  12. Eric says:

    Great! But it doesn't work on my mobile device (iphone). Would be very nice to have this working also.

    Anyone any solution?

    Thanks in advance!

  13. David says:

    Is it possible to have two variables??

    How can I do that??

    Any help is appreciated!

  14. I get a syntax error when editing functions.php.

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

NAME*:
WEBSITE:
COMMENT: