Can’t get custom DOM events to work?

  • Resolved Leah

    (@edikitt)


    7 years, 1 month ago

    I feel like I’ve tried everything!

    I’m using the tutorials outlined here:
    https://contactform7.com/dom-events/
    https://contactform7.com/tracking-form-submissions-with-google-analytics/
    https://contactform7.com/redirecting-to-another-url-after-submissions/

    I’ve tried hooking into wp-head and using the header code integration that comes with my theme. There are no errors in the console and I’m seeing that the code is, in fact, in the head of the page.

    Here’s the code I’m trying to insert:

    <script>
var formStandard = document.querySelector( '#cf7-custom-container' );
formStandard.addEventListener( 'wpcf7submit', function( event ) {
    ga('send', 'event', 'Contact Form', 'submit', 'Standard Form Submit');
    location = '/thank-you';
}, false );
</script>

    Where #cf7-custom-container is a div surrounding my form.

    I’ve even tried using just the very basic implementation of the page redirect, which is basically just copy and pasted from the docs:

    <script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = '/thank-you';
  }, false );
</script>

    I’m not getting any errors or anything, it’s simply not working. Any ideas?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    7 years, 1 month ago

    Where can we see the site?

    Thread Starter Leah

    (@edikitt)

    7 years, 1 month ago

    Sorry about that!

    Our production site is currently still using the (now deprecated) on_submit and on_sent_ok hooks, but you can see where I’m trying to integrate the redirect DOM event from [redacted]

    You should see the event listener in the head and can test any of the forms on the page to test the functionality.

    Thread Starter Leah

    (@edikitt)

    7 years ago

    So after troubleshooting further, this appears to be a conflict with the plugin “Jquery Validation For Contact Form 7”

    After disabling it, the redirect works just fine.

    johnja1

    (@johnja1)

    6 years, 11 months ago

    Hi Edikitt,

    Can you tell me where do you put this code, I have a page an I pt my form on the blank page but I’m not sure where to put the code to check for my input and redirect it to another web site. Initially I was using the Sent_ok hook in th additional setting tab on the form but this will is not working any more. I was told to use DOM event. I tried using the header.php but with no luck. please advice

    
<script>
var formStandard = document.querySelector( '#cf7-custom-container' );
formStandard.addEventListener( 'wpcf7submit', function( event ) {
    ga('send', 'event', 'Contact Form', 'submit', 'Standard Form Submit');
    location = '/thank-you';
}, false );
</script>

    Many Thanks
    Jacob

    Thread Starter Leah

    (@edikitt)

    6 years, 11 months ago

    Hey, is there any way to edit my post above to remove the link to my staging site? We’ve received some human form spam over the last couple of weeks.

    Thanks!

    jayk1

    (@jayk1)

    6 years, 9 months ago

    @edikitt, side question:
    why do you use ‘wpcf7submit’ instead of ‘wpcf7mailsent’?

    You probably want to track a submission event only when mail has been sent successfully

    see more at the plugin source

    Thread Starter Leah

    (@edikitt)

    6 years, 9 months ago

    Hey @jayk1, for debugging mainly.

    While I’m testing with 3rd party components at play, I try to be as lenient with my code as possible, so that if something does go wrong, I can be sure that it’s a problem with the code itself and not some external force (such as the mail server).

    The other reason is because I want our leads to still be redirected to our Thank You page in the event that something does go wrong with the mail server (as opposed to to just getting hung up on the form submission page and seeing an error message, not a great user experience). I know I could just write two event listeners, and I still might once I’m confident that everything is working as expected, but for now this just makes troubleshooting easier. 🙂

    Also, sorry @johnja1, I completely missed your reply!

    Firstly, if you’re going to use the code the way I did it, you’re actually going to want to put it in the footer, not the header. document.querySelector is looking for a specific object in the DOM (in this case, the ID #cf7-custom-container). If your script runs in the header, the DOM will not have propagated yet, which means #cf7-custom-container doesn’t exist yet and your formStandard variable will be empty!

    Secondly, #cf7-custom-container is an ID that I added manually to my form container. You’ll either have to add that same ID to surround your form, or modify your code to select whatever container you have surrounding the form on your page that you want to add the DOM event to.

    Hope that helps!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Can’t get custom DOM events to work?’ is closed to new replies.