A practical and effective Contact Us form on your website is a must in today’s digital world. It not only lets your users contact you more easily, but it also allows you to collect essential information from them. In this tutorial, we will walk you through the steps of constructing a PHP Contact Us form with jQuery Ajax for a more simple experience for users.
Step 1: Building the PHP Contact Form
Before we dive into the details, let’s outline the key steps to create our PHP Contact Us form:
1.1 Setting Up the HTML Structure
To begin, create a basic HTML structure that includes the necessary form fields such as Name, Email, Phone, and Message.
<div class="container mt-5 align-self-center">
<div class="row justify-content-center">
<div class="col-md-7">
<div class="card shadow">
<div class="card-header">
<h2 class="text-center h3 text-primary">PHP Contact us form with JQuery Ajax</h2>
</div>
<div class="card-body">
<form id="contactForm">
<div class="form-group mb-2">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" autocomplete="off" placeholder="Enter Your Name">
</div>
<div class="form-group mb-2">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" autocomplete="off" placeholder="Enter Your Email">
</div>
<div class="form-group mb-2">
<label for="email">Phone:</label>
<input type="text" class="form-control" id="phone" name="phone" autocomplete="off" placeholder="Enter Your Phone Number">
</div>
<div class="form-group mb-2">
<label for="message">Messag:</label>
<textarea class="form-control" id="msg" name="msg" rows="4" autocomplete="off" placeholder="Enter Your Message"></textarea>
</div>
<div class="d-flex justify-content-center mt-2">
<button type="submit" class="btn btn-outline-primary w-75">Send Message</button>
</div>
<div id="loader" style="display: none;">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
1.2 PHP Backend Configuration
Create a PHP script to process the form data and send it to your desired email address. You’ll also need to add server-side validation to ensure the data’s integrity.
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$msg = $_POST['msg'];
$to = 'yourmail@gmail.com';
$subject = "User Enquiry";
$from = $email;
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Create email headers
$headers .= 'From: '.$email."\r\n".
'Reply-To: '.$email."\r\n" .
'X-Mailer: PHP/' . phpversion();
// Compose a simple HTML email message
$message = '<html><body>';
$message .= '<h1 style="color:#f40;">Email Fom'.$email.'</h1>';
$message .= '<p style="color:#080;font-size:18px;">Name:'.$name.'Phone Number:'.$phone.' Message:'.$msg.'. </p>';
$message .= '</body></html>';
// Sending email
if(mail($to, $subject, $message, $headers))
{
echo json_encode(array("statusCode"=>200));
} else
{
echo json_encode(array("statusCode"=>201));
}
?>
1.3 Adding jQuery for Ajax Functionality
Integrate jQuery to make an Ajax request, allowing you to submit the form without refreshing the page. This results in a smoother user experience.
<script>
$(document).ready(function () {
$("#contactForm").submit(function (e) {
e.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var phone = $('#phone').val();
var msg = $('#msg').val();
if (name == "")
{
swal("Error!", "Please Enter Your Name!", "error");
}else if(email == ""){
swal("Error!", "Please Enter Your Email!", "error");
}else if(phone == ""){
swal("Error!", "Please Enter Your Phone Number!", "error");
}else if(msg == ""){
swal("Error!", "Please Enter Your Message!", "error");
}else{
$.ajax({
type:'POST',
url: 'contact-process.php',
cache:false,
data: {
name: name,
email: email,
phone: phone,
msg: msg,
},
beforeSend: function()
{
/* Show image container */
$("#loader").show();
},
success:function(dataResult)
{
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200)
{
swal("Added!", "Successfully Added!", "success");
$("#contactForm").trigger('reset');
}else if(dataResult.statusCode==201)
{
swal("Error!", "Something Went Wrong!", "error");
$("#contactForm").trigger('reset');
}
},
complete:function()
{
/* Hide image container */
$("#loader").hide();
},
});
}
});
});
</script>
1.4 Displaying Feedback
Implement a mechanism to display feedback messages to the user, confirming the successful submission or notifying them of any errors.
Step 2: Integrating jQuery Ajax for Seamless Submission
Now, let’s focus on the second step – integrating jQuery Ajax into our Contact Us form. This step enhances user interaction by submitting form data without a page reload. To learn more about form validation using JavaScript, check out [Form validation with JavaScript] for additional insights.
2.1 Including jQuery Library
Ensure you have jQuery included in your HTML file. You can either download it and host it on your server or use a CDN.
2.2 Writing the jQuery Ajax Script
Create a jQuery script to handle the form submission using Ajax. This script should listen for the form submission event, serialize the form data, and send it to the PHP backend script asynchronously.
2.3 Handling the Response
Once the Ajax request is processed, you can handle the response to update the user interface accordingly. Display success messages on successful submissions or error messages if something goes wrong.
Conclusion
In conclusion, building a PHP Contact Us form with jQuery Ajax integration is a smart move for enhancing user experience and streamlining the communication process on your website. It allows users to reach out effortlessly while keeping your website secure and efficient.
Now that you have the tools and knowledge go ahead and create a user-friendly Contact Us form for your website, and watch your communication with users improve dramatically.
