Freeform Pro - General error at top of page as well as inline errors?

Question

I'm using freeform pro and I have a functioning form, built using the form tags. I have the inline errors working as hoped, but what doesn't work from a UX perspective is lack of a general error at the top of the page as well as the inline errors.

If the inline error is visible to the user as the page reloads, then it is fine. If the error is below the fold, there is nothing telling the user why their form didn't successfully submit until they scroll down and notice the inline error.

Is it possible to get a general error at the top as well as the inline errors, so the user knows to scroll down to find the specific error? The general_errors tag pair seems to be place that errors will be displayed if they are not picked up by a specific inline error. If an inline error shows and that is the only error, then nothing is output by the general_errors tag pair.

I want something at the top of the form like "There were some problems with your form. Please scroll down to view the errors". I would want something like:

{if freeform:error:any}
 <span>Error Message<span>
{/if}

Any thoughts? Thank you.

Answer 1

OK, I think I got it. By adding the following parameter to the form:

inline_error_return="/template-group/template-with-form/errors"

Then I can use the following to get what I need:

{if segment_3 == "errors"}
    <p class="error">There were some errors with your submission. Please make the necessary corrections and re-submit.</p>
{/if}

MY only last question would be is there a problem with doing it this way? It seems EE doesn't throw 404 errors for made up pages like this with no corresponding template, it just shows the previous parent template. Is this a bad practice for any reason?

Answer 2

If you look at the example for inline errors in the docs, it shows that you can show a general error message as well as an error for each individual field.

There is no reason you could not put this at the top of the page with the general errors message:

{if freeform:error:name} {freeform:error:name} {/if}

as well as have it live with the input field.

Answer 3

You could add a general check against all the possible errors at once. Something like so:

{if freeform:error:name1 OR freeform:error:name2 OR freeform:error:name3 }
   <div class="generalerror">
     Please make sure all the appropriate fields below are filled incorrectly.
     (or other generic message here)
   </div>
{/if}

Then include your regular inline errors below.