Contact Form 7
Feature request:- Place error response outside of the form tags (7 posts)

  1. esmi
    Forum Moderator
    Posted 1 year ago #

    Re: Locating Response Message Box Anywhere

    I love the [response] shortcode but would it be possible to generate the response output outside of the <form></form> tags? This would enable those of us who wish to create accessible forms to ensure that the error message is readable by screen readers (like JAWS) before it switches automatically into Forms mode.

    Extended Description:
    JAWS has two basic modes: Virtual Cursor & Forms. The former is used to render standard web pages whilst the latter (obviously)renders form controls (inputs and labels). In most situations, JAWS switches into Forms mode as soon as it encounters the opening <form> tag and only switches back to Virtual Cursor once it encounters the </form> tag. Once in Forms mode, only text that is explicitly associated with a form control via a <label> is rendered whilst content within the form that uses a basic <p> or <div> tag is ignored.

    Currently, if the [response] shortcode is used at the top of a CF7 form, it generates the error message in a plain div but after the opening <form> - so it will be missed by JAWS users. Ideally, the error response should be rendered before <form> to avoid this issue.

    Alternatively, an option to wrap the error response in <label></label> tags that link it to (say) the first form input would help. Then you could in theory end up with something like:

    <div class="wpcf7" id="wpcf7-f3043-p1019-o1"><form action="/contact/#wpcf7-f3043-p1019-o1" method="post" class="wpcf7-form" novalidate="novalidate">
    <div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block;" role="alert"><label for="name">Please ensure that you have completed all the required fields correctly.</label></div>
    <p><label for="name">Name (required)</label>

    Is any of this feasible? If I can help in any way, I would be more than happy to do so.


  2. Takayuki Miyoshi
    Plugin Author

    Posted 1 year ago #

    Thank you for the detailed information. I think I can add an option in the next version that allows to place the response message before <form>.

  3. Rian Rietveld
    Posted 1 year ago #

    Takayuki Miyoshi, you are the best!
    Thank you for adding more accessibility to cf7, this is much appreciated.

  4. Takayuki Miyoshi
    Plugin Author

    Posted 1 year ago #

    In the Contact Form 7 3.8 I have released last week, I made a form have an extra response block just before opening <form>, like this:

    <div role="alert" class="screen-reader-response">
    Validation errors occurred. Please confirm the fields and submit it again.
    <li><a href="#your-name">Please fill the required field.</a></li>
    <li><a href="#your-email">Please fill the required field.</a></li>
    <li>Your entered code is incorrect.</li>

    I made the block invisible with the CSS clip technique.

    Validation errors are displayed as a list, and when the form field has ID, each error message becomes a link to the corresponding field.

    Please review this change. If you find something inappropriate, please let me know so that I can fix it in the next release.

  5. esmi
    Forum Moderator
    Posted 1 year ago #

    Looking good! :-)

    There are things I would still like to see to make forms even more accessible but I think that's well beyond the remit of the plugin.

  6. Rian Rietveld
    Posted 1 year ago #

    Hey Takayuki,
    Tested the functionality and it works very good. Thanks!

  7. moroandrea
    Posted 1 year ago #

    Ok, Maybe my answer is silly, but would that be possible to have an option to avoid this screen-reader output to be generated, or at least have whether display it or the inline errors?

    Also, it would be nice having an error message text message to be attached to each field?

    I've done something like this in the past - http://code.web-ma.com/javascript-validator/ - but at that time I wasn't using wordpress as a CMS.
    Perhaps a nice feature to integrate?

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic