On Sent Ok DOM Events for Multiple Forms

  • I see in your support article how to add DOM events to replace my on sent ok rule in Additional Settings. However, the example below is only for one form. What if I have to set rules for all forms that send users to a confirmation URL? How do I configure this? Do I add more lines beginning with “if” to accommodate all the forms?

    add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );

    function mycustom_wp_footer() {
    ?>
    <script type=”text/javascript”>
    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    if ( ‘123’ == event.detail.contactFormId ) {
    location.replace(‘/contact-confirmation’);
    }
    }, false );
    </script>
    <?php
    }
    In this case, the ga() function will be executed only if the ID of the contact form (event.detail.contactFormId) is “123”.

    The page I need help with: [log in to see the link]

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

    (@takayukister)

    See https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

    Thread Starter jordanscott7

    (@jordanscott7)

    Yes, I saw the post. That doesn’t answer my question about how to edit the code to set rules for multiple pages.

    Can I use this method to redirect each form to a specific page after a successful submission? Instead of the example command of “ga( ‘send’, ‘event’, ‘Contact Form’, ‘submit’ );” I would like to use the proper portion of my current command of on_sent_ok: “location = ‘https://website.com/example/&#8217;;””

    Would I just use the location = part?

    @jordanscott7 You found the solution to set multiple forms?

    Like using something like this:

    <script type=”text/javascript”>
    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    if ( ‘123’ == event.detail.contactFormId ) {
    ga( ‘send’, ‘event’, ‘Contact Form’, ‘submit’ );
    endif;
    }
    elseif ( ‘456’ == event.detail.contactFormId ) {
    ga( ‘send’, ‘event’, ‘Contact Form’, ‘submit’ );
    endif;
    }
    elseif ( ‘789’ == event.detail.contactFormId ) {
    ga( ‘send’, ‘event’, ‘Contact Form’, ‘submit’ );
    endif;
    }
    }, false );
    </script>

    Let me know if it works for you, I will try too.

    Regards

    I have found a way to do multiple forms. Here is the code I added to functions.php.

    function mycustom_wp_footer() {
    ?>
    <script type=”text/javascript”>
    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    if ( ‘1060’ == event.detail.contactFormId ) {
    location = ‘https://fullsiteaddress.com/content/&#8217;;
    }
    }, false );
    </script>
    <script type=”text/javascript”>
    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    if ( ‘1080’ == event.detail.contactFormId ) {
    location = ‘https://fullsiteaddress.com/content2/&#8217;;
    }
    }, false );
    </script>
    <?php

    When I need to add a new form I just copy from <script type… to …</script> and change the contact form ID and the destination.

    @s10blazed

    2 question then:

    How you set the trigger? With GTM or on Goals in Analytics?

    and

    the location = ‘https://fullsiteaddress.com/content/’; is the thankyou page or the page that has the form?

    Thanks

    Sorry, I don’t know what trigger you mean. My users hit a submit button on a form and it takes them to the defined location.

    The form is still setup the same as usual to be embedded within the form page. The location in the code above is where you land after clicking submit.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘On Sent Ok DOM Events for Multiple Forms’ is closed to new replies.