Is there any way I can improve the experience of this form?
I have a form on a website that I'm unhappy with. I want to use bootstrap and jquery validator to create a better experience for people filling out the form. Is there any way I can improve upon this? I plan on implementing our branding later on so it won't be so plain later. But I'm more interested in making this form as easy to fill out as possible without getting rid of any fields.
https://jsfiddle.net/dg8v6r1o/
My html
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="page-header">
<div class="alert alert-info" role="alert">
<h4>A better donation form</h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Donations</h3>
</div>
<div class="panel-body">
<form id="signupForm" method="post" class="form-horizontal" action="">
<div class="form-group">
<label class="col-sm-4 control-label" for="firstname">First name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lastname">Last name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address1">Address 1</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="address1" name="address1" placeholder="Address 1" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address2">Address 2</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="address2" name="address2" placeholder="Address 2" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="city">City</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="city" name="city" placeholder="City" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="state">State</label>
<div class="col-sm-5">
<select class="form-control" id="state" name="state">
<option value="" style="color:#555;" selected disabled>Please select</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="zip">Zip</label>
<div class="col-sm-5">
<input type="text" maxlength="6" minlength="5" class="form-control" id="zip" name="zip" placeholder="Zip Code" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="phone">Phone Number</label>
<div class="col-sm-5">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number" />
<i class="glyphicon glyphicon-earphone form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="email">Email</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="email" name="email" placeholder="Email" />
<i class="glyphicon glyphicon-envelope form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="amount">Amount</label>
<div class="col-sm-5">
<input type="number" step="0.01" class="form-control" id="amount" name="amount" placeholder="Enter Dollar Amount" />
<i class="glyphicon glyphicon-heart form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<button type="submit" class="btn btn-primary pull-right" name="signup" value="Sign up">Sign up</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
And javascript
<script type="text/javascript">
$.validator.setDefaults( {
submitHandler: function () {
alert( "submitted!" );
}
} );
$( document ).ready( function () {
$( "#signupForm" ).validate( {
rules: {
firstname: "required",
lastname: "required",
address1: "required",
city: "required",
state: "required" ,
zip:"required",
phone:
{
required: true,
phoneUS: true,
number: true
},
email:
{
required: true,
email: true
},
amount :
{
required : true,
number : true
}
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
address1: "Please enter a valid address",
city: "Please enter a valid city",
state: "Please select a state",
zip: "Please enter a valid zip code",
phone:
{
required: "Please enter a phone number",
phoneUS: "Please enter a valid phone number format",
number: "Please enter a valid number"
},
email: "Please enter a valid email address",
amount: "Please enter a valid dollar amount",
agree: "Please accept our policy"
},
errorElement: "em",
errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element
error.addClass( "help-block" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
},
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
},
unhighlight: function (element, errorClass, validClass) {
$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
}
} );
} );
jQuery.validator.addMethod("phoneUS", function (phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 && phone_number.match(/^(\+?1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");
</script>