Html Contact form

In this lesson we will tell you about how you can create the contact form. Unfortunately HTML cannot send messages and all actions you have to make on the web server.

If the contact form works but messages do not come to your mailbox connected with your domen so please check working capacity of mailboxe gmail, yahoo, yandex. If you still do not receive messages but you are convinced that messages were sent please contact your hosting provider and be sure that your server is adjusted correctly.

Below is given the example of HTML code of contact form.

It is important to set identical NAME and ID of each field not to get confused in further control of your contact form. Placeholder for temporary filling of form with the text. You can write for it any text.

<div class="col-sm-6 col-md-offset-3" >


 <h4>Send us a message</h4>
 
 <div id="success"></div>
<form id="contactForm" class="reply-form form-inline" >
 <input type="text" name="user-name" id="user-name" placeholder="Full Name" required>
 <input type="email" name="user-email" id="user-email" placeholder="Email Address" required>
 <input type="text" name="user-lastname" id="user-lastname" placeholder="Last Name">
 <input type="tel" name="user-phone" id="user-phone" placeholder="Phone No.">
 <input type="text" name="user-subject" id="user-subject" placeholder="Subject">
 <textarea id="user-message"  placeholder="Message"required ></textarea>
 <button class="btn btn-success btn-default">send message</button>
</form>
 </div>

</div>

You will find the mail folder in each our HTML template. This folder has all necessary files for the contact form.

jqBootstrapValidation.js – A JQuery validation plugin for bootstrap forms.

contact_me.js – makes data checking and data receiving and also connects contact_me.php file for sending of message. If you created the contact form so you have to change or create fields which are martked in bold. It must be done in two places.

$(function() {
 $("input,textarea").jqBootstrapValidation({
 preventSubmit: true,
 submitError: function($form, event, errors) {
 // additional error messages or events
 },
 submitSuccess: function($form, event) {
 event.preventDefault(); // prevent default submit behaviour
 // get values from FORM
 var name = $("input#user-name").val();
 var lastname = $("input#user-lastname").val();
 var email = $("input#user-email").val();
 var phone = $("input#user-phone").val();
 var subject = $("input#user-subject").val();
 var message = $("textarea#user-message").val();
 var firstName = name; // For Success/Failure Message
 // Check for white space in name for Success/Fail message
 if (firstName.indexOf(' ') >= 0) {
 firstName = name.split(' ').slice(0, -1).join(' ');
 }
 $.ajax({
 url: "././mail/contact_me.php",
 type: "POST",
 dataType: 'json',
 data: {
 name: name,
 lastname: lastname,
 email: email,
 phone: phone,
 subject: subject,
 message: message
 },
 cache: false,
 success: function(data) {
 if(data.error){
 // Fail message
 $('#success').html("<div class='alert alert-danger'>");
 $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
 $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", Something is not right. Please try again.");
 $('#success > .alert-danger').append('</div>');
 //clear all fields
 $('#contactForm').trigger("reset");
 }
 else if(data.success){
 // Success message
 $('#success').html("<div class='alert alert-success'>");
 $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
 $('#success > .alert-success').append("<strong>Your message has been sent. </strong>");
 $('#success > .alert-success').append('</div>');
 //clear all fields
 $('#contactForm').trigger("reset");
 }
 }
 })
 },
 filter: function() {
 return $(this).is(":visible");
 },
 });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
 $('#success').html('');
});

contact_me.php – the file will collect data from contact form, to pack them in the message and to send by e-mail.

= ‘yourname@yourdomain’ fill it field for receiving the message on your mailbox.

headers = “From: noreply@yourdomain.com\n”; will notify the sender on his specified e-mail aboput that his letter is successfully sent

<?php
// Check for empty fields
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message']) || !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)){
 echo json_encode(array('error'=>'true'));
 return false;
}

$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];

$lastname = $_POST['lastname'];
$phone = $_POST['phone'];
$subject = ($_POST['subject'] ? $_POST['subject'] : "Website Contact Form: $name");



// Create the email and send the message
$to = 'yourname@yourdomain'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = $subject;
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nLast Name: $lastname\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers);
echo json_encode(array('success'=>'true'));
return true; 
?>