Contact Form 7 Redirect Multiple Forms To Different Pages After Submission Without A Plugin

Hi Luca,

If you remove the code from your functions.php and the loading gif and the feedback message come back then it is probably related to the code. I’ll have to look into it. Which browser were you using when you saw that they were missing?

No worries Mark, I’m glad you figured it out!

Great-than and less-than brackets being changed happens quite a lot when copying/pasting code into different places.

Hi Krishna,

This is a little bit tricky. You’ll have to use the code from this post for your Javascript.

Combine that with what is on the CF7 help page here: https://contactform7.com/dom-events/

This is the code you need from the help page:

document.addEventListener( ‘wpcf7submit’, function( event ) {
var inputs = event.detail.inputs;

for ( var i = 0; i < inputs.length; i++ ) {
if ( ‘your-name’ == inputs[i].name ) {
alert( inputs[i].value );
break;
}
}
}, false );

In that sample code "your-name" is the name given to your input field inside the CF7 builder. Change it to the name of your conditional field. Then use the If statement to determine if the input matches option A or option B. Then redirect in the If statement.

Does that make sense? This may be a good tutorial video.

Hi Hardik,

We use wp_footer as the hook to make sure that the form is fully loaded on the page. You could probably use wp_head though and it may work most of the time.

Hi Rajeev,

I’m glad I’m helping you on your WordPress journey 🙂 Thanks for being part of the WPLearningLab community!

What you are looking for is possible. You can do almost anything with JavaScript and it’s libraries (like jQuery).

In this case you would still need use wpcf7mailsent so that redirect happens after someone submits the form. You could make it so immediately after a dropdown choice is selected they are redirected, but then no email would be sent.

document.addEventListener( ‘wpcf7mailsent’, function( event ) {
var inputs = event.detail.inputs;

if ( ‘input-name’ == ‘name-of-item-1’ ) {
location = ‘http://url-1’; } else {
location = ‘http://url-2’;
}
}, false );

You’ll have to replace “input-name” with the name of the select field in your CF7 builder. And the “name-of-item-1” will need to be replaced with the name of the dropdown item.

The code will redirect to url-1 if item one is chosen. If anything besides item one is chosen then it will redirect to the url-2.

I haven’t tested this code yet, so it may need some tweaking.

Does that make sense?

Hi Vijay,

What you’re asking is possible, but not with this exact code. You can use this code as a starting point though.

This is code is specific to contact form 7 because it uses “wpcf7mailsent” as an event to listen for. That’s a cf7-only event. If arforms has DOM events the script can “listen” for then you could just plug it in.

Once you find a way for Javascript to detect form selections then you can redirect each village to specific pages using Javascript IF statements. This will work even for arforms.