<!doctype html>

<html>
    <head>
	
        <meta charset="utf-8">
	    <meta name="author" content="InsideLab - Designer Studio and Front-end Web Developer.">
        <title>Forms - Contact Form</title>
		
		<!-- Viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

		<!-- Favicon -->
        <link rel="shortcut icon" type="image/ico" href="Images/Favicon.ico">
		
		<!-- Css Styles -->
		<link rel="stylesheet" type="text/css" href="Css/settings.css">
		
		<!-- Font Link -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>		
		
		<!-- jQuery from the google apis -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

	    <!-- Js Files -->
		<script type="text/javascript" src="Js/jquery.contact.js"></script>
		<script type="text/javascript" src="Js/jquery.form.js"></script>

    </head>
	
    <body>
        <div class="container">
            <div class="top-form-bar">
                <div class="top-bar top-bar-green"></div>
            </div>
		    <div class="contact-form">
			    <div class="contact-multi-column">
					<div class="header">
				        <div class="column-full">
							<h4><i class="icon-support"></i>Send us a Message</h4>
						</div>
				    </div>
				    <div class="section">
						<form method="post" action="php/form.php" id="contact" enctype="multipart/form-data">
							<fieldset>
						        <div class="column-full">
		                            <div id="contact-message"></div>
							    </div>
								<div class="column-half">
							        <div class="input-group">
									    <label for="firstname" name="firstname"><i class="icon-user-3"></i></label>
			                            <input type="text" id="firstname" name="firstname" maxlength="30" placeholder="First Name">
								    </div>
								</div>
								<div class="column-half">
								    <div class="input-group">
										<label for="lastname" name="lastname"><i class="icon-user-3"></i></label>
			                            <input type="text" id="lastname" name="lastname" maxlength="30" placeholder="Last Name">
								    </div>
								</div>
						        <div class="column-full">
								    <div class="input-group">
										<label for="useremail" name="useremail"><i class="icon-envelop-opened"></i></label>
			                            <input type="email" id="useremail" name="useremail" maxlength="70" placeholder="Email Address">
								    </div>
								    <div class="input-group">
										<label for="usersubject" name="usersubject"><i class="icon-checkmark"></i></label>
			                            <input type="text" id="usersubject" name="usersubject" maxlength="50" placeholder="Subject">
								    </div>
									<div class="input-group">
										<label for="usermessage" name="usermessage"><i class="icon-bubble-10"></i></label>
			                            <textarea rows="5" id="usermessage" name="usermessage" maxlength="200" placeholder="Enter your Message"></textarea>
								    </div>
									<div class="input-group">
										<label for="userfile1"></label>
									    <span class="button-upload button-blue">Upload</span>								
			                            <input type="file" id="userfile1" class="file" name="userfile1" onchange="document.getElementById('fake1').value = this.value;">
			                            <input type="text" id="fake1" placeholder="Please Enter your upload File">
								    </div>
								</div>
								<div class="column-half">
								    <div class="input-group">
								        <label for="verification"><span class="number-captcha">11 + 7</span></label>
			                            <input type="text" class="captcha" name="verification" maxlength="2" id="verification">
								    </div>
								</div>
					            <div class="column-half">
					                <button type="reset" class="button button-small button-red">Reset</button>
							        <button type="submit" id="send" class="button button-small button-green">Send Message</button>
									<div id="loader"></div>
								</div>
							</fieldset>
					    </form>
				    </div>	
					<div class="footer">
						<div class="column-full">
							<p>Hey Buddy! Be the first to receive Updates</p>
						    <p>Subscribe our Newsletter <a href="#">Click here</a>
					    </div>
				    </div>
                </div>
			</div>
		</div>
    </body>
</html>