Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 24, 2017 at 6:34 am #891923
    vividus7

    I have a long form and this is problematic because the user does not see the submission success or error message without scrolling all the way up.
    How to scroll page to the first error and to “Success” message after submission?
    Thank you,
    Helen

    January 1, 2018 at 5:46 pm #892404
    Mike

    Hey vividus7,
    If you are able to adjust the return url, or form action url, for your form you could add the id #ajaxresponse_1 to the end of the url.
    If this is not an option, you could try using jquery to set the focus:

    <script type="text/javascript"> 
    $(document).ready(function(){ 
        setTimeout("try{document.getElementById( 'ajaxresponse_1' ).focus();}catch(error){}",100); 
    }); 
</script>

    Here is another possible solution: Scroll to top after Ajax content load

    Best regards,
    Mike

    January 2, 2018 at 8:58 pm #892589
    vividus7

    Thank you, Mike. I added the code before the form but it does not work :-(

    January 3, 2018 at 2:10 am #892667
    Mike

    Hi,
    This seems to work for me, but the form is much smaller so it’s hard to tell. Please try on the other form.

    Best regards,
    Mike

    January 4, 2018 at 4:09 am #893058
    vividus7

    Hi Mike, I put the javascript code before a really long form. It doesn’t work for errors neither for a success message.

    January 4, 2018 at 7:04 pm #893339
    Victoria

    Hi vividus7,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#ajaxresponse_1 {
  position: relative;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 5, 2018 at 2:09 am #893522
    vividus7

    Hi Victoria,
    I added the code to
    1) Enfold Child > General Styling > Quick Css and
    2) Enfold > Customize > Additioanl CSS and
    3) directly to css file.
    Unfortunately it still doesn’t work.

    January 6, 2018 at 1:36 am #893922
    Mike

    Hi,
    I have asked the rest of the team to take a look, thanks for your patience.

    Best regards,
    Mike

    January 10, 2018 at 2:24 am #895478
    vividus7

    Hi, I found the solution to scroll page to a success message after the form submitting:

    <script>
    $(document).ready(function(){
    $(“input.button”).click(function(){
    $(‘#ajaxresponse_1’).attr(‘tabindex’).focus()
    });
    });
    </script>

    It’s not ideal solution because keeps form header after submitting and it does not work on iphone. If you know how the code can be improved please let me know.

    The form has another issue. It shows error inputs on validation but does not scroll the page to the first error input. Could you help me with that?

    Thank you.

    January 13, 2018 at 11:54 pm #896976
    Mike

    Hi,
    I found this script that will scroll to the top of the page and changed it to be triggered by the submit button. What is nice about this is your can change “scrollTop: 0” to “scrollTo 100” and it will stop 100px from the top of the page, meaning you can adjust where on your page you want it to stop. And it’s not dependent on the ajax ID getting caught.
    I tested it on my localhost and it seems to work.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function add_custom_scroll(){
?>
<script>
$(document).ready(function () {

    $('input.button').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});
</script>
<?php
}
add_action('wp_footer', 'add_custom_scroll');

    Best regards,
    Mike

    January 14, 2018 at 1:42 am #896990
    vividus7

    Thank you so much, Mike! It works very good!

    January 14, 2018 at 4:27 pm #897104
    Mike

    Hi,
    That’s great news! Sorry it took so long, thanks for your patience.
    Is there anything else we can assist with on this issue, or shall we close this then?

    Best regards,
    Mike

    January 15, 2018 at 4:44 am #897352
    vividus7

    Yes, you can close the issue. Thank you so muct for your help!

    January 15, 2018 at 10:56 am #897467
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Form submissuon: how to scroll to the first error?’ is closed to new replies.