Form Helpers

Use these form helpers to make your forms a little more user-friendly, and ensure that data is entered correctly.

Phone Input Mask

With phone number mask, you can easily standardize telephone number inputs on forms. Simply add the data-phone attribute to any input you'd like to accept a phone number. The phone number will accept a 3-digit area code, 7-digit phone number, and an optional extension. When the form is submitted the value of the field will be in the following format: (123) 456-7890. If an extension is entered the format will be (123) 456-7890 ext.12.

HTML

    		
<label> Phone 
	<input type="text" name="phone" placeholder="123-456-7890" data-phone />
</label>

Rendered HTML

Click the input to show mask

Datepicker

To add datepicker functionality to any form input add the data-datepicker attribute. When the form is submitted the value of the field will be in mm-dd-yyyy format. For example, if the user selects December 21st, 2024 the field will have a value of 12-21-2024.

HTML

        	
<label> Date 
	<input type="text" name="date" placeholder="Choose Date" data-datepicker />
</label>

Rendered HTML

Form Validation

You can add validation to your form easily by marking fields you would like required with the required attribute. It is up to you to denote required fields to the user. To fire the validation function add onclick="return validateForm('formID')" to the form's submit button. If the user leaves a required field blank the submission process is stopped, blank required fields' labels will change color, and they will receive an error message below the submit button. If there are no errors the form is submitted. Any form input type can be required.

HTML

  
<form id="example_form" method="post">
    <p>Fields marked with <span class="orange">*</span> are required.</p>
    <div class="row">
        <div class="medium-8 columns">
            <label>Name <span class="orange">*</span>
                <input type="text" name="name" placeholder="First Last" required="required" />
            </label>
        </div>
        <div class="medium-8 columns">
            <label>Optional
                <input type="text" name="optional" />
            </label>
        </div>
    </div>
    <hr />
    <input type="submit" class="button" onclick="return validateForm('example_form')">
</form>

Rendered HTML