loading

How to Build Popup Contact Form using jQuery and PHP

How to Build Popup Contact Form using jQuery and PHP

How to Build Popup Contact Form using jQuery and PHP

0 Sales

Free

The Contact Form is an essential component of every online site. It allows the site administrator to get suggestions/feedback/complaints from visitors. In most cases, the contact form feature is embedded within a web page. This positioning, however, can be altered based on the website's UI. The modular panel is a very handy feature for including a contact form. Using a modal window, you can quickly add the contact form feature into any web page.

 

The modular window overlays the existing web page with a popup element that does not interact with the page elements. Any hyperlink or icon on the web page can be linked to the popup contact form. In this article, we'll teach you how to use jQuery to construct a contact form in a popped dialogue using Ajax and PHP to send the email with form data.

 

In the sample script, we will create a contact form in a pop - up window and use jQuery Ajax to submit the form input without refreshing the page. When a form is submitted, the form data is transmitted to the site administrator through email using PHP.

 

Popup Contact Form

 

Trigger Button:

 

The modal window is triggered by the following button (#mbtn).

<button id="mbtn" class="btn btn-primary turned-button">Contact Us</button>

 

Modal Dialog:

 

The HTML below generates a modal window containing the 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:

 

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 allows you to open and shut the popup window.

 

- The modal is opened by pressing the trigger button (#mbtn).
- The close button (.close) is used to hide the modal.

<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

 

Whenever the submitt dialog box on the dialogue window is pressed, the form data is sent to the server-side script through jQuery and Ajax.

 

- The $.ajax() function is used to start the Ajax request.


- The whole data from the contact form is transmitted to the server-side script (ajax submit.php).


- The form submission status is presented on the popup based on the answer.

 

<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 function is used to get form data.


- Validate the user's input to ensure that the value supplied is neither empty or invalid.


- Using the PHP mail() function, send HTML email using form inputs.


- Using the json encode() method, return the answer in JSON format.

 

<?php 
// Recipient email 
$toEmail '[email protected]'; 
 
$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($emailFILTER_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

 

This sample code will show you how to create a contact form flash using jQuery. This script may be used for any sort of popup form, not only the contact us form (Registration, Login, Feedback, etc). Whenever the client submits the application, the input data is emailed to the site administrator. You can simply customise the function of this jQuery popup contact form to meet your specific requirements.

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : Jan 20, 2022

Updated Date : Jan 23, 2022

Ratings

Comments : 0

Downloads : 0