A contact form lets you collect important details about your customer. This is why it is a must-have for your website or web app. You can get necessary knowledge like feedback, suggestions, or complaints through it. And, we know how crucial this information is for any business!
Many want a contact form that pops up on the user’s screen without disturbing the pre-existing page elements. This is possible when you use the modal window to install a contact form on the webpage. Using it, you can insert the popup contact form attached with any link or button. One can easily do it using jQuery, Ajax, and PHP.
In this article, you will learn to create a popup contact form using jQuery. After that, you can find how an email is sent with form data using Ajax and PHP.
Below is the list of the elements used in creating the Popup contact form.
Trigger button
This #mbtn button activates the modal window.
<button id="mbtn" class="btn btn-primary turned-button">Contact Us</button>Modal Dialog
The below HTML code helps in creating a modal dialogue with a contact form.
<div id="modalDialog" class="modal">
<div class="modal-content animate-top">
<div class="modal-header">
<h5 class="modal-title">Contact Us</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" id="contactFrm">
<div class="modal-body">
<!-- Form submission status -->
<div class="response"></div>
<!-- Contact form -->
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required="">
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required="">
</div>
<div class="form-group">
<label>Message:</label>
<textarea name="message" id="message" class="form-control" placeholder="Your message here" rows="6"></textarea>
</div>
</div>
<div class="modal-footer">
<!-- Submit button -->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
Open/Hide Modal Popup
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Using these HTML codes, you can open or close the popup contact form using jQuery.
- The trigger button (#mbtn) opens the modal window.
- The close button (.close) hides the modal window.
<script>
// Get the modal
var modal = $('#modalDialog');
// Get the button that opens the modal
var btn = $("#mbtn");
// Get the <span> element that closes the modal
var span = $(".close");
$(document).ready(function(){
// When the user clicks the button, open the modal
btn.on('click', function() {
modal.show();
});
// When the user clicks on <span> (x), close the modal
span.on('click', function() {
modal.hide();
});
});
// When the user clicks anywhere outside of the modal, close it
$('body').bind('click', function(e){
if($(e.target).hasClass("modal")){
modal.hide();
}
});
</script>Contact Form Submission
When a user clicks the submit button, the form data transfers to the server-side via jQuery and Ajax.
- $.ajax() is used to begin the Ajax request.
- The form data is transferred to a server-side script. (ajax_submit.php)
- After that, the form submission status gets displayed on the screen.
<script>
$(document).ready(function(){
$('#contactFrm').submit(function(e){
e.preventDefault();
$('.modal-body').css('opacity', '0.5');
$('.btn').prop('disabled', true);
$form = $(this);
$.ajax({
type: "POST",
url: 'ajax_submit.php',
data: 'contact_submit=1&'+$form.serialize(),
dataType: 'json',
success: function(response){
if(response.status == 1){
$('#contactFrm')[0].reset();
$('.response').html('<div class="alert alert-success">'+response.message+'</div>');
}else{
$('.response').html('<div class="alert alert-danger">'+response.message+'</div>');
}
$('.modal-body').css('opacity', '');
$('.btn').prop('disabled', false);
}
});
});
});
</script>Send Email using PHP
The ajax_submit.php is called by the Ajax request. And, email is sent with contact form data using PHP.
- Collect the form data using the PHP $_POST method.
- Verify the user’s input and check whether the value entered is not empty and valid.
- Send HTML email with form data using PHP mail() function.
- Return the response in JSON encoded format. Use json_encode() function for the same.
<?php
// Recipient email
$toEmail = 'admin@example.com';
$status = 0;
$statusMsg = 'Something went wrong! Please try again after some time.';
if(isset($_POST['contact_submit'])){
// Get the submitted form data
$email = $_POST['email'];
$name = $_POST['name'];
$message = $_POST['message'];
// Check whether submitted data is not empty
if(!empty($email) && !empty($name) && !empty($message)){
if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
$statusMsg = 'Please enter a valid email.';
}else{
$emailSubject = 'Contact Request Submitted by '.$name;
$htmlContent = '<h2>Contact Request Submitted</h2>
<h4>Name</h4><p>'.$name.'</p>
<h4>Email</h4><p>'.$email.'</p>
<h4>Message</h4><p>'.$message.'</p>';
// Set content-type header for sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// Additional headers
$headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";
// Send email
$sendEmail = mail($toEmail, $emailSubject, $htmlContent, $headers);
if($sendEmail){
$status = 1;
$statusMsg = 'Thanks! Your contact request has been submitted successfully.';
}else{
$statusMsg = 'Failed! Your contact request submission failed, please try again.';
}
}
}else{
$statusMsg = 'Please fill in all the mandatory fields.';
}
}
$response = array(
'status' => $status,
'message' => $statusMsg
);
echo json_encode($response);
?>
Conclusion
Using the example code learned above, you can create varied popup forms for Login, Registration, Feedback, etc. You will get the user input data in the back end via email. Moreover, you can increase the jQuery popup contact form functionality according to your need.
