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 by Ant Cullen 14 Comments
Previous Post
«
Next Post
»

14 Responses

  1. Ali says:
    November 4, 2011 at 8:16 pm

    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. Abe Rashdyi says:
    December 6, 2011 at 12:59 am

    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
  3. Jason Stephens says:
    May 1, 2012 at 5:18 pm

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

    Reply
  4. Dr. Max Stone says:
    June 6, 2012 at 8:19 am

    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. Collin says:
    July 5, 2012 at 11:05 pm

    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. Laurent Duretz says:
    November 12, 2012 at 11:05 am

    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. Circey says:
    November 29, 2012 at 11:22 pm

    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
  8. brisk says:
    December 20, 2012 at 10:46 pm

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

    Reply

LEAVE A REPLY

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

NAME*:
WEBSITE:
COMMENT: