Build Your Own Ajax Contact Form in WordPress


Don’t have much background in PHP, AJAX and Javascript? that’s ok, you can still use this tutorial.

Today I am going to show you how you can build an AJAX Contact Form for your WordPress blog.

Start by creating a PAGE in your WP backend, name the page “contact”. Then in your theme directory create a file with similar contents to your page.php, name the file: page-contact.php . In your Settings->Permalinks, make sure that the “Post name” is selected.

Now open page-contact.php then add the following code: (it should be within the loop)

<div id="contact_form">
    
    <div id="result"></div>
    
    <div class="form-group">
        <label for = "name">Name</label>
        <input type="text" name = "name" class = "form-control input-name" placeholder="Enter Your Name" />
    </div>
    <div class="form-group">
        <label for = "email">Email</label>
        <input type="email" name = "email" class = "form-control input-email" placeholder="Enter Your Email" />
    </div>  
    <div class="form-group">
        <label for = "message">Message</label>  
        <textarea name = "message" class = "form-control input-message" rows="4" placeholder="Enter Your Message"></textarea><br /> 
    </div>
    
    <button class = "btn btn-primary submit">Submit</button>
    
</div>

Just bellow the above code, add the javascript:

<script type="text/javascript" >
function cvf_form_validate(element) {
    $('html, body').animate({scrollTop: $(element).offset().top-100}, 150);
    element.effect("highlight", { color: "#F2DEDE" }, 1500);
    element.parent().effect('shake');
}
    
jQuery(document).ready(function($) {

    $('body').on('click', '.submit', function() {
        
        if($('.input-name').val() === '') {
            cvf_form_validate($('.input-name'));
            
        } else if($('.input-email').val() === '') {             
            cvf_form_validate($('.input-email'));
            
        } else if($('.input-message').val() === '') {               
            cvf_form_validate($('.input-message'));
            
        } else {
            var data = {
                'action': 'cvf_send_message',
                'name': $('.input-name').val(),
                'email': $('.input-email').val(), 
                'message': $('.input-message').val() 
            };
            
            var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
            $.post(ajaxurl, data, function(response) {
                if(response === 'success'){
                    alert('Message Sent Successfully!');
                    $('.input-name').val(''); $('.input-email').val(''); $('.input-message').val('');
                }
            });
        } 
    });
});
</script>

In our code above, we are simply sending the POST request to the admin-ajax.php file of WordPress. It parses your data by looking for the ‘action’ variable which in our case is: ‘cvf_send_message’. The data is passed to the PHP function: ‘wp_ajax_cvf_send_message’. So next step is we need to create the call back function that will handle the AJAX post request.

In your functions.php, add the following code:

add_action('wp_ajax_cvf_send_message', array('CVF_Posts', 'cvf_send_message') );
add_action('wp_ajax_nopriv_cvf_send_message', array('CVF_Posts', 'cvf_send_message') );
add_filter('wp_mail_content_type', array('CVF_Posts', 'cvf_mail_content_type') );

class CVF_Posts {
    
    public static function cvf_send_message() {
        
        if (isset($_POST['message'])) {
            
            $to = get_option('admin_email');
            $headers = 'From: ' . $_POST['name'] . ' <"' . $_POST['email'] . '">';
            $subject = "carlofontanos.com | New Message from " . $_POST['name'];
            
            ob_start();
            
            echo '
                <h2>Message:</h2>' . 
                wpautop($_POST['message']) . '
                <br />
                --
                <p><a href = "' . home_url() . '">www.carlofontanos.com</a></p>
            ';
            
            $message = ob_get_contents();
            
            ob_end_clean();

            $mail = wp_mail($to, $subject, $message, $headers);
            
            if($mail){
                echo 'success';
            }
        }
        
        exit();
        
    }
        
    public static function cvf_mail_content_type() {
        return "text/html";
    }
}

In the above code we used ob_start(); , ob_get_contents(); and ob_end_clean(); to allow our email message to read HTML elements instead of printing them as is.



Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.