Contact form 7 : Redirect after form submit
Contact form 7 is a very good plugin, generally we are using it in form submission in wordpress. Normally it uses ajax for showing validation errors while filling the form. If all the values filled in the form are as per the requirement then a successful message appears after the submission through ajax.
Sometimes we need to redirect the page after form submission like when we are using google analytic tracking or for any other reason. So, in this case we need to use a java script action hook that is “on_sent_ok”. This hook will run any java script code just after the successful submission of the form. To use it for redirecting to thanks page, no requirement of modifying any theme file. Just put this in admin as mentioned below :
on_sent_ok: "location = 'http://mywebsite.com/thank-you';"
Where to place this : To find the placement of the above mentioned code we need to follow the path mentioned below :
Go to admin => Contact => My Form(Select the form) => Additional Settings (Setting at the bottom of the page)
In this way, just after the form submission user will redirect to “Thank You” page of our website. We can redirect anywhere we want as per our requirement, just need to change the url.
Thank you very much. It works like a charm 🙂
great, its solved my issue. now my project is complete. thanks man.
Cheers..!!
Hi, thanks for this guide!
Do you know how to concatenate dynamically a fixed url with the values I get from another field?
Example: Redirect to “https://www.google.it/maps/dir/” + locations I get from a selector, after clicking Submit.
Cheers!
What you can do is first add a class to your input field.
I am using the name input field so my class would be name,
add that to your field like this:
class:name
Then use jQuery to find that value like this:
var name = $(‘input.name’).val();
For my example I want to just take the fist value if person enters 2 words, so I would do this:
var person = name.substr(0,name.indexOf(‘ ‘));
then you want to add it to your url:
location = ‘http://website.com/page-to-redirect/?variable=’+person;
and that’s the function, it works for me using the latest jQuery from google speed libraries.
All that’s needed is to wrap it together in the additional settings like so:
on_sent_ok: “var name = $(‘input.name’).val(); var person = name.substr(0,name.indexOf(‘ ‘)); location = ‘http://website.com/page-to-redirect/?variable=’+person;”
Hope that helps, good luck with your project 🙂
Everything is very open with a very clear explanation of the challenges.
It was really informative. Your website is very helpful.
Thank you for sharing!
Great advice, It works brilliantly !