CODEWITHSUNDEEP
wordpresscookiescontact-form-7autofill
Azcleaning Tenerife
Azcleaning Tenerife

Reputation: 41

How to auto fill contact form 7

On my website I use contact form 7 to send our price list to our potential clients. They just need to fill up their name and email. In case that they want to book our service the clients just click on a link in the email which brings them to another, booking form. I think it doesn't look very nice to ask them to fill up the name and email again so I was wondering if there is a way to have it auto filled from cookies or something like that?? Thanks a lot in advance

Upvotes: 1

Views: 11619

Answers (3)

nodws
nodws

Reputation: 1127

Now you can simply get them from "context" so no need for a plugin. You can use $_GET, $_POST or post_meta fields, like so:

If you load example.com?your-name=John, it will populate that field from $_GET

[text* your-name default:get]

Or if your post has a post_meta field called your-name

[text* your-name default:post_meta "Your Name"]

Upvotes: 9

Mike D.
Mike D.

Reputation: 175

I'll try to describe the process with an example.

Assuming the form's structure is:

<label>First Name: [text first_name]</label>
<label>Last Name: [text last_name]</label>
<label>Email: [email email]</label>

and you want pre-fill these fields with the values received as URL parameters, for example:

http://www.your-website-domain.com/page-with-the-form/?first_name=John&last_name=Doe&[email protected]

Enter at the end of form's content the following piece of code:

<script>
    var urlParams = new URLSearchParams(window.location.search);
    if(urlParams.has('first_name')) 
        document.getElementsByName('first_name')[0].value = urlParams.get('first_name');
    if(urlParams.has('last_name')) 
        document.getElementsByName('last_name')[0].value = urlParams.get('last_name');
    if(urlParams.has('email')) 
        document.getElementsByName('email')[0].value = urlParams.get('email');
</script>

So, the complete form's structure (in this hypothetical case) would be:

<label>First Name: [text first_name]</label>
<label>Last Name: [text last_name]</label>
<label>Email: [email email]</label>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    if(urlParams.has('first_name')) 
        document.getElementsByName('first_name')[0].value = urlParams.get('first_name');
    if(urlParams.has('last_name')) 
        document.getElementsByName('last_name')[0].value = urlParams.get('last_name');
    if(urlParams.has('email')) 
        document.getElementsByName('email')[0].value = urlParams.get('email');
</script>

and that's all.

Upvotes: -2

WPZA
WPZA

Reputation: 931

You can use this Dynamic Contact Form 7 plugin and feed the $_GET supergobal into the URL? i.e. example.com/contact/?first="John"&last="Cena".

Upvotes: 0

Related Questions