If you have your form at the bottom of a page and noticed that when you submit the form you don't see your confirmation message right away, it's not your fault.

Gravity Forms is meant to be very flexible to any type of user/developer, however not all of the bells and whistles are turned on by default. One is the scroll to confirmation message. It's pretty simple to turn on. You can add this filter to your functions.php file in your theme.

add_filter( 'gform_confirmation_anchor', '__return_true' );

More info here: https://www.gravityhelp.com/documentation/article/gform_confirmation_anchor/

Another thing you can do is after the form is submitted take the user to another page with a confirmation message. This can be done in the form settings -> confirmations and change the confirmation type from text to page. Select the page you want your done.

Filling out forms are the worst. Especially if you have to fill it out cause you have a complaint or if it is mandatory for work. You start tabbing through the form filling out only the necessities just so you can get to the end and submit it. And when you think you are finally at the end of it all and hit submit...the page refreshes and you are staring at the form all over again. What makes this worse if the form is super long or heaven forbid multiple pages. If you are lucky you are scrolled right to the error. If you are not so lucky at least you learned that this isn't the way forms should be and you can update forms on your website to fix this.

Insert jQuery to add scrolling after submission

jQuery( document ).bind( 'gform_post_render', function() {
    var firstError = jQuery( 'li.gfield.gfield_error:first' );
    if( firstError.length > 0 ) {
        firstError.find( 'input, select, textarea' ).eq( 0 ).focus();
        document.body.scrollTop = firstError.offset().top;
    }
} );

Add this into your custom JS file or place it in a <script></script> on the template your Gravity Form is located. You can either call this function in a jQuery(document).ready() or wrap it in a function of your own creation and call it.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram