PHP, jQuery, and AJAX Powered Contact Form for Bootstrap HTML5 Websites

Contact form is an essential element for all kinds of websites. A business website can’t be imagined without a working, dynamic and customer friendly contact form in contact page.
Contact form basically used to receive business inquiries, support questions, partnership proposals and feedback from customers or targeted visitors.

And even some kind of website’s revenue totally depends on contact forms, How? They use it to collect service orders or physical/digital product orders from targeted audience and customers. So, a perfectly working and feature-rich contact form is only one way to increase user engagements, simplifying support system and getting feedback. You can also check our recent blog post where we listed 10 fully working contact forms compatible with bootstrap and HTML5 from around the web.

Today, I am going to share a PHP, jQuery, and AJAX based fully working and dynamic contact form which is 100% compatible with HTML5 Bootstrap Websites & Templates. You can download it and can re-use it in your own project without any hassle.

Use FormBold to avoid hassles 👇

FormBold provides everything you need to create fully functional web form and send notification and message data to your desired email address, slack or telegram. You no need any server dependencies or coding skills, you need to insert end-point URL to make your website contact form dynamic. FormBold also provides ready to use form templates that you can copy-paste depending on your needs.

[button link=”https://formbold.com/” new_tab=”false” size=”LG” width=”default” style=”flat” hover=”bright” color=”accent” shape=”sharp” custom_class=”” ]Create Contact Form[/button]

HTML Markup:

<!-- Start Contact Form -->
<form role="form" id="contactForm" class="contact-form" data-toggle="validator" class="shake">
  <div class="form-group">
    <div class="controls">
      <input type="text" id="name" class="form-control" placeholder="Name" required data-error="Please enter your name">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="form-group">
    <div class="controls">
      <input type="email" class="email form-control" id="email" placeholder="Email" required data-error="Please enter your email">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="form-group">
    <div class="controls">
      <input type="text" id="msg_subject" class="form-control" placeholder="Subject" required data-error="Please enter your message subject">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="form-group">
    <div class="controls">
      <textarea id="message" rows="7" placeholder="Massage" class="form-control" required data-error="Write your message"></textarea>
      <div class="help-block with-errors"></div>
    </div>  
  </div>

  <button type="submit" id="submit" class="btn btn-effect"><i class="fa fa-check"></i> Send Message</button>
  <div id="msgSubmit" class="h3 text-center hidden"></div> 
  <div class="clearfix"></div>   

</form>     
<!-- End Contact Form -->

 

Required Javascript/jQuery Plugins and Snippets:

• – jQuery
• – Form Validator

 

Contact Form Script (contact-form-script.js):

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Did you fill in the form properly?");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});


function submitForm(){
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var email = $("#email").val();
    var msg_subject = $("#msg_subject").val();
    var message = $("#message").val();


    $.ajax({
        type: "POST",
        url: "assets/php/form-process.php",
        data: "name=" + name + "&email=" + email + "&msg_subject=" + msg_subject + "&message=" + message,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm")[0].reset();
    submitMSG(true, "Message Submitted!")
}

function formError(){
    $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "h3 text-center tada animated text-success";
    } else {
        var msgClasses = "h3 text-center text-danger";
    }
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}

 

(Original script, markup and php written by snaptin. We slightly modified them to fit our needs)

 

PHP Code for Form Processing (form-process.php):

<?php

$errorMSG = "";

// NAME
if (empty($_POST["name"])) {
    $errorMSG = "Name is required ";
} else {
    $name = $_POST["name"];
}

// EMAIL
if (empty($_POST["email"])) {
    $errorMSG .= "Email is required ";
} else {
    $email = $_POST["email"];
}

// MSG SUBJECT
if (empty($_POST["msg_subject"])) {
    $errorMSG .= "Subject is required ";
} else {
    $msg_subject = $_POST["msg_subject"];
}


// MESSAGE
if (empty($_POST["message"])) {
    $errorMSG .= "Message is required ";
} else {
    $message = $_POST["message"];
}

//Add your email here
$EmailTo = "hello@example.com";
$Subject = "New Message Received";

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Subject: ";
$Body .= $msg_subject;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);

// redirect to success page
if ($success && $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Something went wrong :(";
    } else {
        echo $errorMSG;
    }
}

?>

CSS3 Animation Library (optional)

• Animate.css

 

This simple structured contact form is very easy to configure and use. But, if you have any question regarding this. Feel free to comment, I will get back to you ASAP.