Beast-Blog.com
Accessible Form Results

That’s all there is to it. Save the files and go. You’re done.

After playing around with some modifications to Dan Champion’s Accesskey Script in use at Accessites.org, I discovered a significant improvement to the self-returning form result to make it more accessible. I have recently been going through my forms, starting with those on the site mentioned above, one at a time, improving their level of accessibility by adding a simple ID to the results heading and a bookmark pointing to the results heading on the form submit self-target. I haven’t changed my PHP contact form download (yet), but herein I will describe the changes which are quite simple to implement so you may do it yourself.

Adding the “Result” ID

This is rather simple, but you must be careful to add it correctly. Using my PHP contact form as an example, you have four results headings: three errors and one success result.

Below is the portion of contact form script with the results headings. In this code you’ll notice, in bold (and red if styles are supported), the addition of the result ID.

// This is the PHP contact form script, but only shown in part
    if (!isset($name,$email,$reason,$topicbody) || empty($name) || empty($reason) || empty($topicbody)){
    print "<h2 id=\"result\">Error!</h2>
      <h3>Sorry. An error has occurred!</h3>
      <p>The following &#8220;Required&#8221; fields were not filled in. Using your &#8220;Back&#8221; button, please go back and fill in all required fields.</p>\n";
  echo '<dl><dt>Field(s) Missed:</dt>'."\n";

    if(empty($name)){ echo '<dd>&#8220;Enter your full name&#8221;</dd>'."\n"; }
    if(empty($email)){ echo '<dd>&#8220;Enter your email address&#8221;</dd>'."\n"; }
    if(empty($reason)){ echo '<dd>&#8220;Select a contact reason&#8221;</dd>'."\n"; }
    if(empty($topicbody)){ echo '<dd>&#8220;Enter your message&#8221;</dd>'."\n"; }
  echo '</dl>'"\n";

} else { 

    if(!isset($email) || empty($email)){
  echo '<h2 id="result">Error!</h2>
     <h3>Sorry. An error has occurred!</h3>
     <p>The following &#8220;Required&#8221; fields were not filled in. Using your &#8220;Back&#8221; button, please go back and fill in all required fields.</p><dl><dt>Field(s) Missed:</dt><dd >&#8220;Enter your email address&#8221;</dd></dl>';

} else if(strpos($email,".") === FALSE || strpos($email,"@") === FALSE) {

  echo '<h2 id="result">Error!</h2>
     <h3>Sorry. An error has occurred!</h3>
     <p>The email address you have submitted seems to be invalid. Using your &#8220;Back&#8221; button, please go back and check the address you entered. Worried about Spam? Please review my <a href="/siteinfo/#privacy" title="Privacy Policy">Privacy Policy</a> and worry no more.</p>';

} else {

  echo "<h2 id=\"result\">Success!</h2>
      <h3>Contact Made!</h3>
      <p>Thank you for making contact with Mike Cherim, <em>$name</em>. If appropriate, Mike will get back to you shortly. You have successfully submitted the following information:</p>
      <ul>
      <li>$name</li>
      <li><a href=\"mailto:$email\" title=\"$name&#8217;s $email\">$email</a></li>
      <li>$phone</li>
      <li><a href=\"$url\" title=\"$name&#8217;s $url\">$url</a></li>
      </ul>
      <p>You&#8217;re making contact to <em>$reason</em>.</p>
      <p>And you added the following message:</p>
      <blockquote cite=\"$name\">
      <p>$topicbody</p>
      <p><cite>$name</cite></p>
      </blockquote>
      <p><a href=\"$hr\" title=\"Clear Results &amp; Reset Form\">CLEAR RESULTS &amp; RESET FORM</a></p>
      <dl>
      <dt>Form submitted by:</dt>
      <dd>$name</dd>
      <dd>$ip</dd>
      <dd>$ltd</dd>
      </dl>\n";
     }
  }
} else {
?>

Adding the Bookmark Link

The next step is to add the bookmark to the form action target. In this case it’s PHP_SELF, and the result bookmark (#result) is added to the end of the target. Like this:

// This is the PHP contact form body, but only shown in part
  <form method="post" action="<?= $_SERVER["PHP_SELF"]; ?>#result">
    <h2>Contact Mike Cherim</h2>
    <p>The form on this page is an excellent way to communicate with me. The form is mine, the choice to use it is all yours. If you wish to use another method of contact, I do offer some <a href="#options" title="Alternative methods of contact">Contact Options</a> on this very page.</p>

How’s It More Accessible?

That’s all there is to it. Save the files and go. You’re done. But why did we do this? The whole idea is to make the form results more accessible. Prior to the changes, the form would return its result to the same page, basically reloading the page — starting at the top. The problem with this is to anyone using anything but a mouse, they are returned to the top of the page and are forced to navigate the page to read the result (assuming they know it’s there). By the time they make it to the result, the difficulty in getting back — if it’s an error result — will be substantial. By adding the modifications to your form as shown above, the user will be sent directly to the submit results.

To see the script above in its entirety, please check out my original PHP Contact Form article and script.
If you want to see this in action, set some accesskeys at Accessites.org or simply submit my contact form without putting values in the fields.

Filed under Access Counts, All Things PHP —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

PHP Contact Form v.2.0 Released »

WordPress-Ready Contact Form v.2.0WP »

GreenBeast CMS v.1.3 Public Release! »