Feathered Owl

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

Ant Cullen

, ,

39 responses to “Contact Form 7 Default Select Value using URL Query Variable”

  1. 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.

    Reply

  2. 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

    Reply

  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.

    Reply

  5. 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!

    Reply

  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

    Reply

  7. 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.

    Reply

  10. 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

    Reply

  12. 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!

    Reply

  15. Just a note for newbies like myself….
    If you do not use permalinks, then to make it work, you might want to use “&defaultvalue=two”

    complete link = “http://localhost/wordpress/?page_id=55&defaultvalue=two”

    Here you can see that there is already a parameter “?page_id=55” , so to add the select box parameter you use “&defaultvalue=two”

    Hope I helped someone …
    Guy

    Reply

  19. Thank you.
    This one helped me alot.
    Please tell me if I can do it for multiple options?
    And also when there is space between value its not working.

    Please help.
    thanks in advace.

    Reply

  20. Hey – this is a fantastic fix but I am unable to get it to work. I get no error messages and have followed all the steps exactly the way they have been mentioned.

    Please help!

    Reply

  22. copying everything exactly like in the demo and will not work. Using avada theme. can anyone help?

    copied the functions.php code at the very end – no errors
    copies the header copy before wp_head(); – no errors

    everything else i copies exactly. No luck. Can anyone help?

    Reply

Leave a Reply

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