Input

Inputs can have the label positioned above, or within the input. Use .required on the label to add *

Standard Input

<label>First Name</label>
<input class="textbox" type="text" name="first-name" placeholder="Kyle" />

Standard Input with error

Please enter your first name
<label>First Name</label>
<input class="textbox error" type="text" name="first-name" />
<div class="error-message">Please enter your first name</div>

Box Input

<div class="input">
  <label>First Name</label>
  <input class="textbox" type="text" name="first-name" placeholder="Kyle" />
</div>

Box Input with error

Please enter your first name
<div class="input error">
  <label>First Name</label>
  <input class="textbox" type="text" name="first-name" />
  <div class="error-message">Please enter your first name</div>
</div>

Input with Button

<div class="input-with-button">
  <input class="textbox" type="email" name="email" placeholder="kyle@getinvited.to" />
  <input type="submit" class="btn" value="Send" />
</div>

Standard Textarea

<label>What are your hobbies?</label>
<textarea class="textbox"></textarea>

Standard Textarea with error

Please provide a list of your hobbies
<label>What are your hobbies?</label>
<textarea class="textbox error"></textarea>
<div class="error-message">Please provide a list of your hobbies</div>

Box Textarea

<div class="input">
  <label>What are your hobbies?</label>
  <textarea class="textbox"></textarea>
</div>

Box Textarea with error

Please provide a list of your hobbies
<div class="input error">
  <label>What are your hobbies?</label>
  <textarea class="textbox"></textarea>
  <div class="error-message">Please provide a list of your hobbies</div>
</div>

Input Validation

We recommend that you use Gravity's form validator but if you'd like to validate a single input you can find individual validation functions inside /assets/js/form.js for all input types.