Create a simple wordpress ajax contact form without plugin

In this article, we are going to discuss about How to create a simple wordpress ajax contact form without plugin. WordPress is an Open Source project, which means there are hundreds of people all over the world working on it. (More than most commercial platforms.) It also means you are free to use it for anything from your cat's home page to a Fortune 500 web site without paying anyone a license fee and a number of other important freedoms.

Below is the code to create a simple ajax contact form without plugin in wordpress.

Step 1 :

Add the below code to your functions.php file

<?php 
function addme_ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}
add_action('wp_head','addme_ajaxurl');

add_action('wp_ajax_submit_form', 'submit_form_callback');
function submit_form_callback(){

$params = array();
    parse_str($_POST['data'], $params);

$name = trim($params['name']);
$email = $params['email'];
$message = $params['message'];
$subject = $params['subject'];
$site_owners_email = 'email@sitename.com'; // Replace this with your own email address

if ($name=="") {
$error['name'] = "Please enter your name";
}

if (!preg_match('/^[a-z0-9&.-_+]+@[a-z0-9-]+.([a-z0-9-]+.)*+[a-z]{2}/is', $email)) {
$error['email'] = "Please enter a valid email address";
}

if ($message== "") {
$error['message'] = "Please leave a comment.";
}
if ($subject=="") {
$error['subject'] = "Please leave a subject.";
}
if (!$error) {

$mail = mail($site_owners_email, $subject, $message,
"From: ".$name." <".$email.">rn"
."Reply-To: ".$email."rn"
."X-Mailer: PHP/" . phpversion());
$success['success'] = "<div class='success'>" . $name . ", We've received your email. We'll be in touch with you as soon as possible! </div>";

echo json_encode($success);

} # end if no error
else {

echo json_encode($error);
} # end if there was an error sending

    die(); // this is required to return a proper result
}
?>

Step 2 :

Add the below code in your html and JavaScript where you want show your form

<form method="post" action="#" name="contact-form" id="contact-form">
  <div id="main">
    <div id="response"></div>
    <div class="fullwidth">
        <label>Name:</label>
        <p>
        <input type="text" name="name" id="name" size="30" />
        </p>
    </div>
    <div class="fullwidth">
        <label>Email:</label>
        <p>
            <input type="text" name="email" id="email" size="30" />
        </p>
    </div>
    <div class="fullwidth">
        <label>Subject:</label>
        <p>
            <input type="text" name="subject" id="subject" size="30" />
        </p>
    </div>
    <div class="fullwidth">
        <label>Message:</label>
        <p>
            <textarea name="message" id="message" cols="30" rows="10"></textarea>
        </p>
        <p>
            <input  class="contact_button button" type="submit" name="submit" id="submit" value="Email Us!" />
        </p>
    </div>
    <div class="fullwidth"></div>
</div>
</form>
<script type="text/javascript">                
    $( "form" ).on( "submit", function( event ) {
        event.preventDefault();
        $('#response').empty();
        var data = {
                action: 'submit_form',
                data: $( this ).serialize()
            };
        $.post(ajaxurl, data, function(response) {
            console.log(response);
            if(response.success){
                $('#response').append(response.success);
            }
            if(response.name){
                $('#response').append(response.name + "<br>");
            }
            if(response.email){
                $('#response').append(response.email + "<br>");
            }
            if(response.message){
                $('#response').append(response.message + "<br>");
            }
            if(response.subject){
                $('#response').append(response.subject + "<br>");
            }
        },'json');
    
    });
</script>