Build Your Own Ajax Contact Form in WordPress

page.php

<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>

 

<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>

 

 

functions.php

 

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";
    }
}