Contact us form

by alex_o

HTML

<div class="page-wrap">
  <h2>Contact us form with PHP mail() and SMTP authentification</h2>			
  <form method="post" action="contact.php" class="contact-form" id="contactForm">
    <label for="Name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name" required/>
    <label for="Email">Email</label>
    <input type="text" name="email" id="email" placeholder="[email protected]" required/>
    <label for="Message">Message</label><br />
    <textarea name="message" rows="12" cols="20" id="message" placeholder="Type your message here" required></textarea>
    <button type="submit" name="submit" class="submit-btn">Send</button>
  </form>			
</div>

CSS

.page-wrap{
	padding: 40px;
	color: #4b585c;
}
.page-wrap h1{
	letter-spacing: 1.3px;
}
.contact-form{
	position:relative;
	margin-top: 10px;
	padding:20px;
	background-color: #4b585c;
	color: #FFF;
	border-radius: 10px;
	width: 500px;
}
.contact-form input,
.contact-form textarea{
	padding: 10px;
	border-radius: 6px;
	display: block;
	margin: 15px 0;
	width:400px;
}
.contact-form button{
	background-image: linear-gradient(to bottom, #99c432, #7ea521);
	background-color: #99c432;
	border: 1px solid #99c432;
	border-radius: 4px;
	padding:10px;
	font-size: 16px;
	letter-spacing: 1.3px;
	color: #FFF;
	width: 160px;
	margin:10px 0;
	cursor: pointer;
	outline: none;
 }
.contact-form button:hover{
	background-image: linear-gradient(to bottom,  #7ea521, #99c432);
}