Scroll to Success Message after submit

  • ptrkx

    (@ptrkx)


    4 years, 12 months ago

    Hello, is there any way that after submitting the contact form scrolls to the success message, which are located at the very bottom of the contact forumlar?

    I have CF7 running in an overlay, and had no success with the following code

    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    window.scrollTo({ top: 0, behavior: ‘smooth’ });
    }, false );

    Thanks for the help
    best regards

Viewing 6 replies - 1 through 6 (of 6 total)
  • Erik

    (@codekraft)

    4 years, 12 months ago

    ciao @ptrkx

    please provide a working example, so that I can write the code and check if scrollTo is enough (fyi that code hooks at the top of the page)

    Thread Starter ptrkx

    (@ptrkx)

    4 years, 12 months ago

    Thank You for the reply

    Here is an example page.
    https://new.sycotec.eu/produkt/motorspindel-4015-dc/
    when clicked on request opens the contact form. Unfortunately, the success message is not visible after sending, because it is hidden at the bottom. so it would be good if you scroll to this message.

    thank you very much for the help
    best regards

    Erik

    (@codekraft)

    4 years, 12 months ago

    you need to get and scroll the container and not the window.

    in your case:

    var popupContainer = document.getElementById('woocommerce-catalog-mode-enquiry-popup-container');
popupContainer.scrollTop = 99999;

    hope it helps!

    ps after you have rewritten it with jquery post here the code that will be of help to other users 🙂

    • This reply was modified 4 years, 12 months ago by Erik.
    Thread Starter ptrkx

    (@ptrkx)

    4 years, 11 months ago

    I tried different js ideas but sadly its not working
    for example

    <script>

    $(".wpcf7-submit").click(function() {
 $('html, body').animate({
     scrollTop: $(".popupContainer").offset().top
     }, 99999);
 });

    </script>

    Erik

    (@codekraft)

    4 years, 11 months ago

    you need something like that

    $(".wpcf7-submit").click(function() {
$('#woocommerce-catalog-mode-enquiry-popup-container').animate({scrollTop: '99999px'}, 800);
});

    the issue was about you are trying to scroll body when you need to scroll the popup container.

    check my test script here
    https://codepen.io/erikyo/pen/yLbBJpN

    and don’t be afraid to ask if you need help.

    Thread Starter ptrkx

    (@ptrkx)

    4 years, 11 months ago

    Thank You very much for your help 🙂 💪
    I got it running with a bit customization.
    i just added a short delay because the container expands itself after a delay

    $(“.wpcf7-submit”).click(function() {
    $(‘#woocommerce-catalog-mode-enquiry-popup-container’).delay(5000).animate({scrollTop: ‘99999px’}, 1000);
    });

    Thank YOU 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Scroll to Success Message after submit’ is closed to new replies.