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)
Just bellow the above code, add the javascript: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>
<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.