Forms

It is important to ensure that your website forms have strong validation responses to entered content. It is also important that form elements are large enough to be read by users.

Anonymous form submission can be vulnerable to spam bots.  It is strongly recommended that you include some type of security to your pages that guards against this.  A recommendation would be to use either CAPTCHA or Honeypot for WordPress and Drupal websites.

Examples:




Helpful error message






 

Resources

Code


<label for="input-type-text">Text input label</label>
<input id="input-type-text" name="input-type-text" type="text" />
<label for="input-focus">Text input focused</label>
<input id="input-focus" class="input-focus" name="input-focus" type="text" />
<div class="input-error"><label class="input-error-label" for="input-error">Text input error</label><span id="input-error-message" class="input-error-message" role="alert">Helpful error message</span><input id="input-error" name="input-error" type="text" aria-describedby="input-error-message" /></div>
<label for="input-success">Text input success</label>
<input id="input-success" class="input-success" name="input-success" type="text" />
<label for="input-type-textarea">Text area label</label>
<textarea id="input-type-textarea" name="input-type-textarea"></textarea>                   

CSS

          
input.input-success,
textarea.input-success,
select.input-success {
    border: 3px solid #4aa564;
}
.input-error {
    border-left: 4px solid #cd2026;
    margin-top: 3rem;
    padding-bottom: 0.8rem;
    padding-left: 1.5rem;
    padding-top: 0.8rem;
    position: relative;
    right: 1.9rem;
}
.input-error-message {
    color: #cd2026;
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    padding-bottom: 3px;
    padding-top: 3px;
}
.input-error input,
.input-error textarea,
.input-error select {
    border: 3px solid #cd2026;
}
.input-error label {
    margin-top: 0;
}
.input-error .input-inline {
border: 0.1rem solid #5b616b;
    width: inherit;
}
.input-error .input-inline-error {
    border: 3px solid #cd2026;
}
.input-error-label {
display: block;
    font-size: 1.7rem;
    font-weight: 700;
}
.input-error-message {
    color: #cd2026;
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    padding-bottom: 3px;
    padding-top: 3px;
}
.select-item {
    border: 1px solid #ccc;
    font-size: 16px;
    height: 40px;
}