The web application’s Contact Form is a must-have feature. It assists the site administrator in receiving user feedback, recommendations, and complaints. In most cases, the contact form element is inserted into a web page. However, depending on the website’s UI, this positioning can be altered. The modal window is a great way to include a contact form. Using a modal window, you can quickly add the contact form feature into any web page.
The modal window overlays the existing web page with a popup element that does not interact with the page elements. Any link or button on the web page can be used to trigger the popup contact form. In this article, we’ll teach you how to use jQuery to construct a contact form in a popup dialogue using Ajax and PHP to send an email with form data.
In this example script, we’ll create a contact form in a popup window and use jQuery Ajax to submit the form input without refreshing the page. When a form is submitted, PHP sends the form data to the site administrator through email.a
Popup Contact Form
Trigger Button
The following button (#mbtn) triggers the modal window.
<button id="mbtn" class="btn btn-primary turned-button">Contact Us</button>Modal Dialog:
With the contact form, the following HTML creates a modal dialogue.
<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:
Include the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Using jQuery, the following code opens or closes the popup window.
The modal is opened by pressing the trigger button (#mbtn).
The modal is hidden when the close button (.close) is pressed.
<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
The form data is submitted to the server-side script via jQuery and Ajax when the submit button on the dialogue window is clicked.
The Ajax request is started via the $.ajax() method.
The complete contact form data is passed to the ajax submit.php server-side script.
The form submission status is presented on the popup based on the response.
<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 request calls this ajax submit.php code to send an email containing contact form data using PHP.
The PHP $_POST method is used to retrieve data from a form.
Validate the user’s input to ensure that the value given is both legitimate and not empty.
Using the PHP mail() function, send HTML email with form inputs.
Using the json encode() function, return the response in JSON format.
<?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);
?>Note :
This sample code shows how to use jQuery to create a contact form popup. This script can be used for any type of popup form, not just the contact us form (Login, Registration, Feedback, etc). When the user submits the form, the information entered will be emailed to the site administrator. This jQuery popup contact form’s functionality can be simply customised to suit your needs.