PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Display errors at top of page?

  1. smartmarketing
    Member

    I'm curious if form errors can be displayed at the top of the form page, or have the page jump down to the form if there are errors? Possibly using an anchor?

    For example on this page: http://www.zifflaw.com/our-answers/general-law-faqs/bankruptcy-questions/

    If you just click submit without filling any fields in, it brings you back to the same page with the correct errors however unless you scroll down you wouldn't see them. Any fix for this beyond putting the form at the top of the page?

    Thanks!

    Posted 9 years ago on Friday December 4, 2009 | Permalink
  2. I didn't care for this behaviour either, not only for errors but for confirmation. Kevin posted something about this around a month ago:

    http://forum.gravityhelp.com/topic/confirmation-questions#post-1139

    That was for confirmation alone though.

    I ended up writing a WordPress plugin to scroll to the error when the page is loaded, which doesn't exactly solve your problem, but worked pretty good in my case.

    Posted 9 years ago on Friday December 4, 2009 | Permalink
  3. We've discussed how to improve this behavior and will implement something in a future release to make this a little more user friendly.

    Posted 9 years ago on Friday December 4, 2009 | Permalink
  4. smartmarketing
    Member

    Great, thank you both for the info

    Posted 9 years ago on Friday December 4, 2009 | Permalink
  5. I did a little tinkering with some jQuery and came up with a solution that might work for you.. nothing overly fancy, but it works pretty well.

    This is actually a variation of the code referenced in the post above. It includes support for the absolutely positioned form confirmation text, as well as an absolutely positioned validation error message.

    You can put this snippet into a page template or inside the < head > of your header.php file - it's up to you.

    <!-- call the jQuery library if not already loaded in theme -->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <!-- the function to show the error notice or the fading confirmation notice at top of page -->
    
    <script type="text/javascript">
      $(document).ready(function(){
       setTimeout(function(){
      $("#gforms_confirmation_message").fadeOut("slow", function () {
      $("#gforms_confirmation_message").remove();
          });
    
    }, 3000);
    
      $(".validation_error").before("<div id='gforms_error_alert'>there was a problem with your submission. <a href='#myform'>Please fix the errors</a> and resubmit the form.</div>");
      $(".validation_error").after("<a name='myform'></a>");
    
     });
    </script>

    We're basically adding a new div for the error alert and an anchor just above the form to link the alert to.

    Here's a copy of the page template I used for my quick test.

    Also, you can watch this short video to see it in action.

    Of course, you can style everything to suit your theme, but that should get you pointed in the right direction for now.

    Posted 9 years ago on Friday December 4, 2009 | Permalink
  6. smartmarketing
    Member

    Awesome, thank you very much. That helps a lot!

    Posted 9 years ago on Monday December 7, 2009 | Permalink
  7. For what it is worth...I would like to request that this feature is added. Love the plugin but really think this needs to be added.

    Posted 9 years ago on Friday March 19, 2010 | Permalink
  8. We did have some more discussion on how to best handle this today.. it may be something that's added in a future release.

    Here's another simple option that somebody used just today.. it's helpful when using a form below a good amount of content - just add an anchor tag in the content editor, just above the form shortcode

    <a name="contact"></a>
    [gravityform id=1 name=MyForm]

    Then you can use a little jQuery snippet to get the form to jump back to the anchor on submit.. it works for both the validation error and the default confirmation text.

    <script type="text/javascript">
      jQuery(document).ready(function() {
         jQuery("#gform_xx").attr("action", "#contact");
      });
     </script>

    where "gform_xx" is your form id and "#contact" is your anchor name.

    Posted 9 years ago on Friday March 19, 2010 | Permalink
  9. Cool. Good stopgap solution. Thanks.

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  10. hasanilx
    Member

    I am not able to get this to work. I have a long form and when the user submits the validation errors are not seen. So the user keeps pushing submit thinking the form has issues. I need the form to scroll back to the top so they can see the errors on submit.

    Please advise as I tried both methods (pasting code into head) and the second solutions.

    Thx

    The url is on a test server please send me a email to get the login info to view the site.

    Posted 9 years ago on Friday October 8, 2010 | Permalink
  11. We added a filter to add an anchor to the form a couple of versions back now. You can find out how to add that at the link below.

    Basically, you add the filter, then the form returns to the anchor if the validation fails.. wherever the form is in the page.

    http://forum.gravityhelp.com/topic/redirect-after-failed-form-redirect-to-page-w-anchor#post-9592

    Posted 9 years ago on Friday October 8, 2010 | Permalink
  12. hasanilx
    Member

    Thx - tried that too. No luck

    Posted 9 years ago on Friday October 8, 2010 | Permalink