<script type="text/javascript">
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>
<script>
jQuery(document).ready(function($){
$('form.ajax').on('submit', function(e){
e.preventDefault();
var that = $(this),
url = that.attr('action'),
type = that.attr('method');
var name = $('.name').val();
var email = $('.email').val();
var message = $('.message').val();
$.ajax({
url: ajaxurl,
type:"POST",
dataType:'type',
data: {
action:'set_form',
name:name,
email:email,
message:message,
}, success: function(response){
$(".success_msg").css("display","block");
}, error: function(data){
$(".error_msg").css("display","block"); }
});
$('.ajax')[0].reset();
});
});
</script>
<div class="ajax-form">
<div class="container">
<div class=row>
<div class="col-md-6 col-md-offset-3 form-box">
<form action="" method="post" class="ajax"
enctype="multipart/form-data">
<h1>Ajax Form</h1>
<label><b>Name</b></label>
<input type="text" placeholder="Enter Your Name" name="name"
required class="name">
<label><b>Email</b></label>
<input type="email" placeholder="Enter your Email" name="email"
required class="email">
<label><b>Message</b></label>
<input type="textarea" placeholder="Message" name="message"
required class="message"><hr>
<div id="msg"></div>
<input type = "submit" class="submitbtn" value="submit">
<div class="success_msg" style="display: none">Message
Sent Successfully</div>
<div class="error_msg" style="display: none">Message
Not Sent, There is some error.</div>
</form>
</div>
</div>
</div>
Functions.php File
function ajax_form_scripts() {
$translation_array = array(
'ajax_url' => admin_url( 'admin-ajax.php' )
);
wp_localize_script( 'main', 'cpm_object', $translation_array );
}
add_action( 'wp_enqueue_scripts', 'ajax_form_scripts' );
// THE AJAX ADD ACTIONS
add_action( 'wp_ajax_set_form', 'set_form' ); //execute when wp logged in
add_action( 'wp_ajax_nopriv_set_form', 'set_form'); //execute when logged out
function set_form(){
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$admin = get_option('admin_email');
if (!empty($_POST)) {
global $wpdb;
$table = wpi7_ajaxform;
$data = array(
'Name' => $_POST['name'],
'Email' => $_POST['email'],
'Message' => $_POST['message']
);
$format = array(
'%s',
'%s'
);
$wpdb->insert( $table, $data, $format );
// if($success){
// echo 'data has been save' ;
// }
} //else {
//}
// wp_mail($email,$name,$message); main sent to admin and the user
if(wp_mail($email, $name, $message) && wp_mail($admin, $name, $message) )
{
echo "mail sent";
} else {
echo "mail not sent";
}
die();
}