Not logged in. · Lost password · Registration disabled
Forum: Overview Suggestions and Wishes / Anregungen und Wünsche RSS
Accessible subscription form
How to add fieldset, legend, and label to make form validate and accessible
SleeplessinDC #1
Member since May 2008 · 16 posts
Group memberships: Mitglieder
Show profile · Link to this post
Subject: Accessible subscription form
The following changes will make the subscription forms accessible. Add the following to your css file (change colors per your theme):
#newsletter legend, #newslettersub legend {
    font-weight: bold;
    color: #075;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: -3px;

#newsletter input.addressinfo, #newslettersub input.addressinfo {
    cursor: text;
    margin-bottom: 5px;
    height: 1.2em;
    width: 175px;

#newsletter input.button, #newslettersub input.button {
    color: #fff;
    font-weight: bold;
    border: 2px outset #999;
    background: #075;

input.addressinfo:hover, input.addressinfo:focus {
    cursor: text;
    color: #000;
    background-color: #ffc;

In snippets.php
change to
<form id="newsletter" method="post" action="<?php echo post_notification_get_link(); ?>" style="text-align:left">
      <fieldset id="posting_notice">
       <legend>E-mail address</legend>
<input type="text" class="addressinfo" name="addr" size="175" maxlength="50" value="<?php echo post_notification_get_addr(); ?>"/><br />
    <input type="submit" class="button" name="submit" value="Submit" />

In post_notification.php
change to
    echo '<form id="newsletter" method="post" action="'.post_notification_get_link().'" >';
    echo '<fieldset>';
    echo '<legend>' . $options['subtext'] . '</legend>';
    echo '<label for="addr"><input type="text" class="addressinfo" name="addr" id="addr" size="' . $options['size'] . '" maxlength="50" value="'.post_notification_get_addr().'" /><br />';
    echo '<input type="submit" class="button" name="submit" value="' . $options['submit'] . '" /></label>';
    echo '</fieldset>';
    echo '</form>';

In en_US subscribe.tmpl
change to
<form id="newslettersub" method="post" action="@@action" style="text-align:left">
      <fieldset id="posting_notice">
       <legend>E-mail address</legend>
<input type="text" class="addressinfo" name="addr" size="175" maxlength="50" value="@@addr"/><br />
<input type="radio" name="action" value="subscribe" checked="checked" />Subscribe &nbsp; <input type="radio" name="action" value="unsubscribe" />Unsubscribe<br />
    <!--capt--><img alt="captcha" src="@@captchaimg" /> <br />
    Please insert the chars: <input type="text" name="captcha" size="30" maxlength="50" />
    <input type="hidden" name="captchacode" value="@@captchacode" />
    <br /><!--cha-->
    <input type="submit" class="button" name="submit" value="Submit" />

See example at under Subscribe to new post notices
This post was edited on 2009-01-30, 16:39 by SleeplessinDC.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum