Feathered Owl

Auto Populate Contact Form 7 Input Fields with URL Parameter

I’ve just finished a WordPress development project which required fields in contact forms to be auto-populated with values based on the page from which the form page was called. In this case I was using the Contact Form 7 plugin. It’s fairly simple to set default input field values with Contact Form 7 but assigning values dynamically based on context proved to be a bit more of a challenge. Needless to say though, a bit of hacking and an hour so on Google yielded a satisfactory result.

The site allows users to browse from a selection of ski chalets and submit a reservation enquiry. First of all I had to work out how to pass the name of the chalet being enquired about to the contact form page. I found this post which told me how to do this using a bit of extra code in the theme’s functions.php file as follows:


// chalet name for enquiry form
function parameter_queryvars( $qvars ) {
    $qvars[] = 'chalet';
    return $qvars;
}
add_filter('query_vars', 'parameter_queryvars' );

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

This sets up a new WordPress query variable called “chalet”, allowing the chalet enquiry form page to be called as follows:

http://domainname.com/chalet-enquiry/?chalet=chaletname

Next, how to insert the value of “chaletname” into the relevant field on the form? Some unsuccessful hacking of Contact Form 7’s text.php module followed by further Googling led me to the Contact Form 7 Dynamic Text Extension plugin which is designed specifically to add this capability to Contact Form 7. The plugin creates a new field type tag for the form called “dynamictext”, which allowed me to create an input field in the form to accept the “chaletname” variable passed to the page as follows:


[dynamictext enquiry-chalet "CF7_GET key='chalet'"]

It works a treat and even better allowed me to leave the Contact Form 7 core code unhacked.

View a demo here

Thanks to WordPress Warrior for the functions.php extension and Sevenspark for the plugin.

admin

,

47 responses to “Auto Populate Contact Form 7 Input Fields with URL Parameter”

  2. Very useful guide, well written. I’d seen the dynamic text extension for Contact form 7 but you saved me a tonne of time figuring out how to pass URL parameters into the form. Thank you!

    Reply

  3. This is great! Though I implemented it and realized it only works for text fields and hidden fields. Any idea how to set a dropdown’s default selection with this method?

    Reply

  4. I can’t seem to get this function to work. I wonder if someone might be able to help? These are the steps that i took:-

    1. Added the above function code to the function.php page in WP and called my variable ‘seating’

    2. Then created a form called ‘seating enquiry’ to which I added the dynamic field. The shortcode used was [dynamictext enquiry-seating “CF7_GET key=’seating’”]

    3 The form page was then created and the shortcode [contact-form-7 id="6" title="seating-enquiry"] was used.

    4. A text link was created from my product seating page to the form page.
    Unfortuantely when the link is clicked the dynamic text field isn’t auto populated with the name of my product page.

    Maybe I’ve overlooked something in the setup but am not too sure what. Any ideas or suggestions would be greatly appreciated.

    Reply

      • Hi Ant – I saw you responded to Jasmin about the installing of the jQuery Javascripts Library and/or the javascript code on your page..

        I am also having trouble with this and I am just a basic HTML/CSS guy.

        How do I add the jQuery javascript library? Does that go in the HTML file or within the functions.php file? I would appreciate your help! thanks

        Ryan

        Reply

  6. hi.. i hav installed cf7 im building a link submission website wat i want is i hav to send the output of the form to home page as well as category page but not to email will u please help me..

    Reply

  9. Hi
    Excelent tutorial. It really helped ma and was very easy.

    I just got one problem. If I add an ID to the string like this:

    [dynamictext enquiry-chalet id:amount “CF7_GET key=’value1′”]

    Then it doesnt work any more. Is there a workaround for this? 🙂

    Reply

  11. Great tutorial, a real time saver!
    Just a quick question, what do I have to do in order to pass a value like “New Cars” or “Used cars”?
    Do I have to change something in the js or the functions.php file?
    Thanks!

    Reply

  12. Trying to use this code to build a dynamic contact form. Can you help me understand what the following lines of code do?

    if (isset($wp_query->query_vars[‘chalet’]))
    {
    print $wp_query->query_vars[‘chalet’];
    }

    …if I want to include multiple parameters:

    function parameter_queryvars( $qvars ) {
    $qvars[] = ‘chalet_name’;
    $qvars[] = ‘chalet_file_name’;
    $qvars[] = ‘chalet_url’;
    return $qvars;
    }

    …do i need to create a separate ‘echo_’ function for each parameter.

    Thanks!

    Reply

  14. Is it possible to add this tweak to a one page scrolling theme?
    So you click on the link, the page scrolls down to the contact-form and adds the value?

    Thanks in advance!

    Reply

  15. I’ve been googling how to auto populate a field with java script through the URL string, I found this to be such an easier solution!! Contact Form 7 + Dynamic Text Extension did the job!! Thank you!!

    Reply

  16. Hi
    I want to populate the email field only. (No list stuff)
    User enters email on home page, then gets redirected to full form Register page, where email is pre-populated with value entered on home page.

    Example site that has the effect I want to replicate- somaliving.ca
    Please help.

    Reply

  19. How could a URL parameter be sent to a generic form built to POST to a 3rd party? I’m setting up a payment form that takes name & address information from another form… will be sent via URL param, and I’d like that to populate my form.

    Reply

  20. Hello please i need a little help. I am a new wordpress developer with a bit of php knowledge. Please tell me how to redirect the form in submit to the next page as I dont have any expert knowledge in wordpress but as i know in normal html we do it using action attribute in form tag but dont know how to do it in wordpress.
    Waiting for your response

    Reply

  21. Hi,

    This: http://contactform7.com/getting-default-values-from-the-context/ seems to indicate that this functionality is now part of CF7 without needing any additional hacks … however, I can’t get it to work! Ignore the styling on the page which hasn’t been done yet. But if you go to this link: http://www.charltonandjenrick.co.uk/contact/dealer-enquiry-form/?dealer-name=Kent+Supplies+Wrexham+Ltd

    Why is the dealer name not pre-populated? Do I still need to use an additional hack?

    Reply

  24. Just found an exception in CF7 or the Extension…

    Although it is a required field, if they go directly to the form (multiple use contact form) and submit it will allow a blank field. Can this field be set to a default value? Would this be done in the functions.php or through CF7 dynamictext field?

    Reply

  25. Hi i am using contact form 7 in my site,after the form submit data will be stored in DB in my site.My query is as soon as submitted by the Customer the values will be displayed in other .php file or I need to print this value in some zzz.php file as :
    Dear XYZ,
    Your amount will be XXXXX Kindly take A PRINTOUT.

    Kindly help me out:

    Reply

  26. Thanks for all the information guys, maybe someone could assist me.

    I am using the steps listed and it works great for one dynamic value but how can I make the user be able to select i.e. an option from a list of locations AND say a subject from a list of subjects. Also how to make the form populate without the page refreshing or at least populate all the desired values at the same time?

    Reply

  27. I’m hoping someone can help me try to figure out what I have done wrong with getting this setup.

    I have added this to my functions.php file
    // product name for enquiry form
    function parameter_queryvars( $qvars ) {
    $qvars[] = ‘product’;
    return $qvars;
    }
    add_filter(‘query_vars’, ‘parameter_queryvars’ );

    function echo_product() {
    global $wp_query;
    if (isset($wp_query->query_vars[‘product’]))
    {
    print $wp_query->query_vars[‘product’];
    }
    }

    The dynamic field in the form is [dynamictext enquiry-product “CF7_GET key=’product’”]

    And the link to the form is http://luxwood.ca/wpsite/?page_id=209/?product=Contact (I’ve set this up as a test to see if I can get it to work)

    I have jQuery enqueued as well.

    Not sure what I have missed or done incorrectly.

    Any hints would be greatly appreciated 🙂

    Reply

  28. Thank you. It works.
    But not if I scroll to an anchor.

    Click

    Clicking my product will scroll down to the contact form. The dynamictext is not filled. But it is filled with “chaletname”, if I chose “open link in new tab”. So it works, but not in my case. How can I fix that?

    Reply

  31. Hello there,

    this is great info here, thank you!
    Can this be modified to populate the logged in users email adress in the cf7 email field?
    If anybody knows how to do that, please let me know.

    Thank you & best regards
    daniel

    Reply

  34. Works like a charm. Brilliant. After I finished adding to a site I’m working on, I noticed the dates on other comments and realized this post is from 2010. Not many 2010 tips are still relevant. This one is. Thanks!

    Reply

  35. Hey! Wonderful, just what I was searching for – But I see this is like 10 years old. Have you managed to successfully add it to current version as of 2018?

    Reply

  37. hello, lovely tutorial, hours of search to find this. tried it and it worked. but How do i button click and get URL value to pre-fill in contact form 7.
    i want someone to click a apply now button and it redirects them to form page with prefilled name of course to apply for

    thanks

    Reply

  38. Thank you very much, this is really helpful!

    I’d like to add that there is an even sweeter way of doing this, without having to pass the value in the GET parameter when you call the URL:

    You can simply set the GET parameter in the source code before you call the form, e.g.

    $_GET[‘name’] = $title;

    and in the form, like above

    [dynamictext name “CF7_GET key=’name’”]

    So, now the field is always filled correctly, even if you open the page without GET parameters…

    Cheers,
    Jens

    Reply

Leave a Reply

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