Basic Form

This is how our inputs are styled. You can use a "label" or "placeholder," whichever fits best with the design.

If using "placeholder" instead of "label", a span with the class ".screen-reader-text" wraps the label text before the input. We add this class and use the "clip" property to hide the label to keep our sites accessible for all users, including screen readers.

HTML

<form class="form-generic">
	<label>
		Name
		<input name="name" type="text"></input>
	</label>
	<label class="email-input">
		<span class="screen-reader-text">Email:</span>
		<input name="email" type="email" placeholder="Email"></input>
	</label>
	<label>
		<span class="screen-reader-text">Tell us more about you</span>
		<textarea name="about" type="text" placeholder="Tell us more about you"></textarea>
	</label>
	<label>Job Level
		<select>
			<option>Select Job Level</option>
			<option value="entry">Entry Level</option>
			<option value="mid">Mid-Level</option>
			<option value="senior">Senior Level</option>
			<option value="c-level">C-Level</option>
		</select>
	</label>
	<button type="submit" class="button">Submit</button>
</form>

SCSS

.screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    height: 1px;
    overflow: hidden;
    position: absolute!important;
    width: 1px;
}

Rendered Code

Form Errors

All forms with the class "form-generic" are searched for errors when submitted. The JS below is run every time a form is submitted and errors are flagged if the form needs attention.

To test, click the submit button without entering anything in the input.

JS

$(".form-generic").submit(function(event){
    var value = $(this).find('input[type=email]').val();
    if( !value || value.indexOf('@') < 0 || value.indexOf('.') > 0 ){
        event.preventDefault();
        $(this).find('.error-message' ).remove();
        $(this).find('input[type=email]').addClass('error-highlight');
        $(this).find('.email-input' ).append( "<p class='error-message'>Please enter a valid email.</p>" );
        return false;
    }
});

Rendered Code

Custom Forms

Custom forms are usually used to add an icon in an input. This is achieved by adding a wrapper with the class "input-wrapper" around a label in a form.

HTML

<form class="form-generic">
	<div class="input-wrapper search">
		<label>
			<input name="email" type="email" placeholder="Email"></input>
		</label>
	</div>
</form>

Rendered Code