request quote form

quote.html

@@ -53,98 +53,107 @@
 
 <div class="main main-raised quote-container">
 		<div class="container quote">
-			<div class="row section text-center">
-				<div class="col-md-12">
-					<h3>Request a Quote</h3>
+			<div class="controls">
+				<div class="row section text-center">
+					<div class="col-md-12">
+						<h3>Request a Quote</h3>
+					</div>			
+				</div>
+				<div class="row row-deep">
+					<div class="col-md-10 mx-auto">
+						<form id="quote-form" method="post" action="forms/quote.php" role="form">
+							<div class="row row-deep">
+								<div class="form-group col-sm-6">
+									<label for="inputFirstname">First Name</label>
+									<input id="form_name" type="text" name="name" class="form-control" required="required" data-error="* First Name is required.">
+									<div class="help-block with-errors"></div>
+								</div>
+								<div class="form-group col-sm-6">
+									<label for="inputLastname">Last Name</label>
+									<input id="form_lastname" type="text" name="surname" class="form-control" required="required" data-error="* Last Name is required.">
+									<div class="help-block with-errors"></div>
+								</div>
+							</div>
+						   <div class="row row-deep">
+								<div class="form-group col-sm-6">
+										<label for="exampleInputEmail1" class="bmd-label-floating">Email Address</label>
+										<input id="form_email" type="email" name="email" class="form-control" required="required" data-error="* Valid email is required.">
+										<div class="help-block with-errors"></div>
+								</div>
+						   </div>
+							<br />
+							<div class="row row-deep">
+								<div class="form-group col-sm-6">
+									<label for="inputAddressLine1">Address</label>
+									<input id="form_address" name="address"  type="text" class="form-control" required="required" data-error="* Address is required.">
+									<div class="help-block with-errors"></div>
+								</div>
+								<div class="form-group col-sm-6">
+									<label for="inputAddressLine2">Address (Line 2)</label>
+									<input id="form_address2" name="address2"  type="text" class="form-control">
+								</div>
+							</div>
+							<div class="row row-deep">
+								<div class="form-group col-sm-6">
+									<label for="inputCity">City</label>
+									<input id="form_city" name="city"  type="text" class="form-control" required="required" data-error="* City is required.">
+									<div class="help-block with-errors"></div>
+								</div>
+								<div class="col-sm-3">
+									<label for="inputState">State</label>
+									<input id="form_state" name="state"  type="text" class="form-control" required="required" data-error="* State is required.">
+								</div>
+								<div class="col-sm-3">
+									<label for="inputPostalCode">Postal Code</label>
+									<input id="form_zip" name="zip"  type="text" class="form-control" required="required" data-error="* Postal Code is required.">
+									<div class="help-block with-errors"></div>
+								</div>
+							</div>
+							<div class="row row-deep">
+								<div class="form-group col-sm-6">
+									<label for="inputContactNumber">Phone Number</label>
+									<input id="form_phone" type="tel" name="phone" class="form-control" required="required" data-error="* Phone Number is required.">
+									<div class="help-block with-errors"></div>
+								</div>
+								<div class="form-group col-sm-6">
+									<label for="inputWebsite">Website</label>
+									<input id="form_website" name="website" type="text" class="form-control">
+								</div>
+							</div>
+							<div class="row row-deep">
+								<div class="form-group col-sm-6">
+									<label for="inputContactNumber">How Did You Find Out About Us?</label>
+									<input id="form_referral" name="referral"  type="text" class="form-control">
+								</div>
+								<div class="form-group col-sm-6">
+									<label for="inputWebsite">Dealer/Agent:</label>
+									<input id="form_agent" name="agent" type="text" class="form-control">
+								</div>
+							</div>
+							<div class="row row-deep">
+								<div class="form-group col-sm-6">
+									<label for="inputFirstname">Type of Construction</label>
+									<textarea id="form_type" name="type" class="form-control" id="" rows="3"></textarea>
+								</div>
+								<div class="form-group col-sm-6">
+									<label for="inputLastname">Growing Surface(s)</label>
+									<textarea id="form_surface" name="surface" class="form-control" id="" rows="3"></textarea>
+								</div>
+							</div>
+							<div class="row row-deep">
+								<div class="form-group col-sm-6">
+									<label for="inputAddressLine1">What Are You Growing?</label>
+									<textarea id="form_crop" name="crop" class="form-control" id="" rows="3"></textarea>
+								</div>
+								<div class="form-group col-sm-6">
+									<label for="inputAddressLine2">Additional Comments</label>
+									<textarea id="form_message" name="message" class="form-control" rows="4"></textarea>
+								</div>
+							</div>
+							<div class="messages"></div>
+							<input type="submit" class="btn btn-danger btn-raised btn-round float-right" value="Submit Request">
+					</form>
 				</div>
-			</div>
-			<div class="row row-deep">
-				<div class="col-md-10 mx-auto">
-					<form>
-						<div class="row row-deep">
-							<div class="form-group col-sm-6">
-								<label for="inputFirstname">First name</label>
-								<input type="text" class="form-control" id="inputFirstname" placeholder="">
-							</div>
-							<div class="form-group col-sm-6">
-								<label for="inputLastname">Last name</label>
-								<input type="text" class="form-control" id="inputLastname" placeholder="">
-							</div>
-						</div>
-					   <div class="row row-deep">
-							<div class="form-group col-sm-6">
-									<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
-									<input type="email" class="form-control" id="exampleInputEmail1">
-									<span class="bmd-help">We'll never share your email with anyone else.</span>
-							</div>
-					   </div>
-						<br />
-						<div class="row row-deep">
-							<div class="form-group col-sm-6">
-								<label for="inputAddressLine1">Address</label>
-								<input type="text" class="form-control" id="inputAddressLine1" placeholder="">
-							</div>
-							<div class="form-group col-sm-6">
-								<label for="inputAddressLine2">Address (Line 2)</label>
-								<input type="text" class="form-control" id="inputAddressLine2" placeholder="">
-							</div>
-						</div>
-						<div class="row row-deep">
-							<div class="form-group col-sm-6">
-								<label for="inputCity">City</label>
-								<input type="text" class="form-control" id="inputCity" placeholder="">
-							</div>
-							<div class="col-sm-3">
-								<label for="inputState">State</label>
-								<input type="text" class="form-control" id="inputState" placeholder="">
-							</div>
-							<div class="col-sm-3">
-								<label for="inputPostalCode">Postal Code</label>
-								<input type="text" class="form-control" id="inputPostalCode" placeholder="">
-							</div>
-						</div>
-						<div class="row row-deep">
-							<div class="form-group col-sm-6">
-								<label for="inputContactNumber">Phone Number</label>
-								<input type="number" class="form-control" id="inputPhoneNumber" placeholder="">
-							</div>
-							<div class="form-group col-sm-6">
-								<label for="inputWebsite">Website</label>
-								<input type="text" class="form-control" id="inputWebsite" placeholder="">
-							</div>
-						</div>
-						<div class="row row-deep">
-							<div class="form-group col-sm-6">
-								<label for="inputContactNumber">How Did You Find Out About Us?</label>
-								<input type="number" class="form-control" id="inputContactNumber" placeholder="">
-							</div>
-							<div class="form-group col-sm-6">
-								<label for="inputWebsite">Dealer/Agent:</label>
-								<input type="text" class="form-control" id="inputWebsite" placeholder="">
-							</div>
-						</div>
-						<div class="row row-deep">
-							<div class="form-group col-sm-6">
-								<label for="inputFirstname">Type of Construction</label>
-								<textarea class="form-control" id="" rows="3"></textarea>
-							</div>
-							<div class="form-group col-sm-6">
-								<label for="inputLastname">Growing Surface(s)</label>
-								<textarea class="form-control" id="" rows="3"></textarea>
-							</div>
-						</div>
-						<div class="row row-deep">
-							<div class="form-group col-sm-6">
-								<label for="inputAddressLine1">What Are You Growing?</label>
-								<textarea class="form-control" id="" rows="3"></textarea>
-							</div>
-							<div class="form-group col-sm-6">
-								<label for="inputAddressLine2">Additional Comments</label>
-								<textarea class="form-control" id="" rows="3"></textarea>
-							</div>
-						</div>
-						<button type="button" class="btn btn-danger px-4 float-right">Submit Request</button>
-				</form>
 			</div>
 		</div>
 	</div>
@@ -212,5 +221,7 @@
 <script src="js/bootstrap-material-design.min.js"></script>
 <script src="js/material-kit.min.js"></script>
 <script src="js/init.js"></script>
+<script src="js/validator.js"></script>
+<script src="forms/quote.js"></script>
 </body>
 </html>