How to Create Popup Contact Form using jQuery and PHP

by | Sep 17, 2021 | PHP | 0 comments

In this article, we are showing how to build an Email contact form as a popup dialog box. I used the HTML contact form with the jQuery plugin to display a popup dialog box without a page refreshing.

Generally, The build PHP form has the user name, user email, Subject, user message, and more fields. The popup contact form page is an important component of all websites. This contact form may vary based on its purpose.

The popup dialog box PHP contact form to gather user name, user email, Subject, user message. While running the website landing page will not automatically show the popup dialog on page load. Rather, the popup shows a clickable contact button.

Markup of Our PHP Popup Contact Form

Let’s write the jQuery, Ajax, and PHP code to add all the fields into our contact form.

index.html

<div class="container">
    <h2>Popup Contact Form with Email</h2>
    
    <!-- Trigger/Open The Modal -->
    <button id="mbtn" class="btn btn-primary turned-button">Contact Us</button>
    
    <!-- The Modal -->
    <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>
</div>

Open/Close Popup dialog box :

Include the jQuery library link. 

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The following jQuery code helps to hide or show the popup dialog box

click button id (#mbtn) open the Popup dialog box.

The close button (.close) hide the Popup dialog box.

index.html

<script>
/*
 * Modal popup
 */
// Get the modal
var modal = $('#modalDialog');

// Get the button that opens the modal
var btn = $("#mbtn");

// Get the  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  (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 the contact form clicks the submit button open popup dialog window, the contact form press submit data to the server-side(PHP) script through jQuery and Ajax.

  • $.ajax() — Ajax request
  • ajax_submit.php — Data is sent to the server-side script
index.html

<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('
'+response.message+'
');
                }else{
                    $('.response').html('
'+response.message+'
');
                }
                $('.modal-body').css('opacity', '');
                $('.btn').prop('disabled', false);
            }
        });
    });
});
</script>

Contact Form Send Email using PHP

  • ajax_submit.php — Ajax request to send an email using PHP.
  • PHP mail() — Send HTML email with form inputs
  • json_encode() — Return the response in JSON encoded
ajax_submit.php

<?php
// Admin recipient email id
$toEmail = '[email protected]';

$status = 0;
$statusMsg = 'Oops! Something went wrong! Please try again late.';
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 = '
Contact Request Submitted

                
Name
'.$name.'

                
Email
'.$email.'

                
Message
'.$message.'
';
            
            // 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);
?>


style.css

.container{
  padding: 20px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #969494;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #969494;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #969494;
}
:-moz-placeholder { /* Firefox 18- */
  color: #969494;
}


.animate-top{
  position:relative;
  animation:animatetop 0.4s
}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  margin: 8% auto;
  border: 1px solid #888;
  width: 475px;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .3rem;
  outline: 0;
}
.modal-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
}
.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    margin-top: 0;
}
h5.modal-title {
    font-size: 1.25rem;
    color: #666;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}
.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}
.close:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.modal-body {
    flex: 1 1 auto;
    padding: 1rem;
}
.modal-body p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #e9ecef;
}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    cursor: pointer;
}
.btn-primary {
    color: #fff;
    background-color: #07a8ff;
    border-color: #07a8ff;
    display: block;
    margin: 0 auto;
}
.btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}
.btn:focus, .btn:hover {
    text-decoration: none;
}
h2{text-align: center;}
.form-group {
    margin-bottom: 15px;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
.form-control {
    display: block;
    width: 95%;
    /*height: 34px;*/
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

Download source code from github   |   Live Demo – youtube