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>
    
    <div id="contactResponse"></div>
		<div class="loader"><h2>Loading...</h2>
    </h3></div>
  </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);
}

.loader {
    display:    none;
    position:   absolute;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 );
}

form.loading .loader{
	display: block;
}

form.loading .loader h2{
  color: #000;
  text-align: center;
  padding-top:120px;
}

JavaScript

$("#contactForm").submit(function(event) {
	/* stop form from submitting normally */
	event.preventDefault();
  
    /* add style indicating loading */
	const $form = $(this);
	$form.addClass('loading');
  
	/* get some values from elements on the page: */
	var $submit = $form.find( 'button[type="submit"]' ),
	name_value = $form.find( 'input[name="name"]' ).val(),
	email_value = $form.find( 'input[name="email"]' ).val(),
	message_value = $form.find( 'textarea[name="message"]' ).val(),
	url = $form.attr('action'); //here is our contact.php
	
  /* Send the data to php using post */
  /* Have to comment this, because this part wouldn't work on jsFiddle*/
	/* var posting = $.post( url, { 
	                       name: name_value, 
	                      email: email_value, 
	                      message: message_value 
	              }); */
	/* When php is finished */
	posting.done(function(data) {
   /* add style indicating loading */
		$form.removeClass('loading');
    
	  /* Put the results in a div */
	  $( "#contactResponse" ).html(data);
	  });
});