Thank you page (Custom DOM event) help

I have the same problem, does anyone know how and where to insert the following code?

<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘https://example.com/&#8217;;
}, false );
</script>

Thank you

• This reply was modified 7 years, 11 months ago by KenZen.

I have a bit of helpful news for you guys.

I managed to get it to work by pasting the code into the Custom Javascript field that my theme (Nirvana) has in it’s settings page.
Your theme probably won’t have this, but it might have a Custom CSS field, try it there.

Also i googled “Dom event wordpress” and the first result (https://www.ads-software.com/support/topic/how-to-use-dom-events/) would suggest you can place that code in the header.php or the footer.php files, these are easy to find.

If you have multiple forms per website though, things get a lot more difficult, it would probably be easier to look for a different plugin.
Anyway i read that you need to place that code into the head section of each page with a contact form on it, a slightly different code for each obviously.
Now it makes sense for each page to have it’s own file, but i’ve never seen one and that’s because you won’t find them from within wordpress, you need to go to the sites/domains cpanel for that, not everyone has access to that.

It used to be sooo much simpler and easier, but the plugin developer thinks that Thank you pages are stupid and they kinda are, but that is not the only thing they can be used for, for example i made a sales page type website, that is made of 3 big forms that redirect you after each to a new page. I made 3 of these websites actually, they will all be broken by the end of the year.

@joegp,

THANK YOU!!!!!!!!!!!!!!!!

I spent my entire morning searching for a fix for this… and your suggestion about putting it in the header.php was brilliant. My theme (Themify Float) has a field for additional Header code, so I added it there. Worked perfectly!!

Thank you so much!!!!!!!!!!!!!! ?? ?? ??

you’re welcome, but if you have more than one form and more than one link you’re screwed.

In the mean time i found another fix, a very easy one, which probably a lot of people won’t like, it’s called “use a different form plugin”, i found 2 very popular ones (500.000 and 800.000 installs), that both support redirecting to a URL after submitting, one even has a drag-n-drop form builder.

Hi Joe,

I’m really struggling to put a similar code for my form. I use teh default WP Theme Twenty Fourteen and I could not find a place to put the below code to validate my inputs, Can you please advice ? Maybe contact form is no mre good !!

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 );

Thanks Joe
Jacob

Well you have 3 options:

1. try to put it in header.php or footer.php (or something like that)

2. use a different theme

3. use a different form plugin

Hi Joe,

Thank you for your reply, you mention “put the code into the head section of each page with a contact form on it” I tried to put it in the header.php but my form is on anoter page, it shows but it does not work. Please advice

The Contact Form 7 is being use by millions and has worked for me for a long time. I do not know of a better form.

Many thanks
Jacob

I tried to put it in the header.php but my form is on anoter page

I think you are a bit confused there Jacob, header.php is not a page, it’s the header part of your website, it shows on every single page and post.

Also i’m not an expert on this at all, if you read and understood what i wrote above you will know that i just found that information about the header.php in other places, i have not tried any of the other fixes since the way i tried it, it worked.

Have you tried the footer.php ?

Also i just read your first comment again, this is a topic about redirecting people to a different page after submitting the form, i don’t see how this has anything to do with your “input validation” whatever that is.
I suggest you start a new topic or something.

I’m just trying Ninja Forms right now and that has an easy redirect option, you should try it too.

Hi Joe,

Thank you for your reply, to make things simple I use the plugin Insert Headers and Footers by WPBeginner. This plugin just adds your code to the header.php or the footer.php. I just wanted to try out my code and discontinue the web hook (on_sent_ok) For your reference my url https://www.greensborochess.org/test1/

Any advice would be really appreciated, Also I have downloaded and I’m trying out Ninja forms. It is 100 times better but unfortunately it cost $199 for the most popoular version. I think I can get a way with the free version but I need to redirect participants to paypal and also list out participants.

Many Thanks
Jacob

So does that plugin work? cuz the fix i used just stopped working.

I also tried Ninja forms and while the builder is pretty nice, some of the features that CF7 has (like file upload) are not free, so i tried other ones and settled on Fast Secure Contact Form, because i also need a from that allows file uploads.

I was able to get CF7 working by putting this code in the footer.php file for the theme I’m using before the </body> tag. This one function can handle all of the CF7 forms on the site. ‘4’ and ’10’ and the ids of the CF7 from that I got from the backend of WP:

<script>

document.addEventListener( ‘wpcf7mailsent’, function( event ) {
var n;
var em;
if ( ‘4’ == event.detail.contactFormId ) {

//start
var inputs = event.detail.inputs;
for ( var i = 0; i < inputs.length; i++ ) {
if (‘your-email’ == inputs[i].name) {
em = inputs[i].value;
console.log(“EMAIL:”+em);
} else if (‘your-name’ == inputs[i].name) {
n = inputs[i].value;
console.log(“NAME:”+n);
}
}
location = ‘https://www.url.com&#8217;;
//end

} else if ( ’10’ == event.detail.contactFormId ) {
//do what is needed for form with id 10 here
}

}, false );

</script>

This script only work for me with one contact form. If I add another one, is not orking.

Any other way to fix this?

I did place the code in my page.php file just after the footer and before the PHP closing i did myself

<?php get_footer(); ?>
<script>document.addEventListener( ‘wpcf7submit’, function( event ) {
if ( ‘mywpf7formID’ == event.detail.contactFormId ) {
// the details
}; }, false );</script>
<?php ?>

Hi, i’m trying to use the module ‘Contact Form 7 Redirection’ and it’s work for redirection to an external url.

But… I need to transfer some variables to thankyoupage.
My, nearly deprecated. code in CF7 is:
on_sent_ok: “var name = $(‘.wpcf7 input[name=name]’).val(); var city = $(‘.wpcf7 select[name=city]’).val(); var newsletter = $(‘.wpcf7 input[name=newsletter]:checked’).val(); location = ‘https://www.mysite.xx/wp-content/themes/Divi/thankyoupage.php?name=’+name+’&city=’+city+’&newsletter=’+newsletter;&#8221;

How could I transform this code to run correctly?

• This reply was modified 7 years, 3 months ago by MarcellaM.

I’ve added the script fallowing this topic: append-cf7-form-value-as-variable-to-redirect-url-on-submit with this plugin: Contact Form 7 Redirection