Processwire Ajax Contact
$(document).ready(function() {
$('#ajax-contact').submit(function(e) {
// run spinner
$(".ivm-spinner").removeClass('uk-hidden');
var form = $('#ajax-contact');
var form_url = '<?=$pages->get('/ajax/')->url?>';
var form_data = form.serialize();
// ge captcha value
var token = $("#g-recaptcha-response").val();
if (token) {
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: form_url,
data: form_data,
dataType: "json",
success: function(data) {
// console.log(data); // console
UIkit.notification({message: data.note, status: data.status, pos: 'top-center', timeout: 5000});
},
error: function(data) {
UIkit.notification({message:'Ajax Error!', status: 'danger', pos: 'top-center', timeout: 5000});
}
}).done(function(){
// hide spinner
$(".ivm-spinner").addClass('uk-hidden');
}).fail(function(){
// hide spinner
$(".ivm-spinner").addClass('uk-hidden');
});
}else {
$(".ivm-spinner").addClass('uk-hidden');
UIkit.notification({message:'Invalid Captcha!', status: 'danger', pos: 'top-right', timeout: 5000});
}
e.preventDefault();
});
});
<?php
/**
* Process Ajax Contact
*
*/
if($input->post->contact == '1') {
$name = $sanitizer->text($input->post->name);
$email = $sanitizer->email($input->post->email);
$message = $sanitizer->text($input->post->message);
/**
* Send Email
*/
// Email Vars
$email_to = $settings->site_info->email;
$email_subject = "Message from $name";
$email_body = "$message";
$email_from = "$email";
// Send Email
mail("$email_to", "$email_subject", "$email_body", "From: $email_from\nContent-Type: text/html");
$data = array(
"status" => "success",
"note" => "Success"
);
$json = json_encode($data);
echo $json;
}
<form id="ajax-contact" action="./" method="post">
<div class="uk-margin uk-grid-small" uk-grid>
<div class="uk-width-expand@l">
<div class="uk-inline uk-width-1-1">
<span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: user"></span>
<input class="uk-input" type="text" name="name" placeholder="Name" required="" />
</div>
</div>
<div class="uk-width-expand@l">
<div class="uk-inline uk-width-1-1">
<span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: mail"></span>
<input class="uk-input" type="email" name="name" placeholder="Email" required="" />
</div>
</div>
</div>
<div class="uk-margin">
<textarea class="uk-textarea" rows="5" name="message" placeholder="Your message here" required=""></textarea>
</div>
<div class="uk-margin">
<?php echo $captcha->render();?>
</div>
<div class="uk-margin">
<input type="text" name="contact" value="1" hidden="" />
<input class="uk-button uk-button-primary" type="submit" name="submit" value="Send Message" />
<span class="ivm-spinner uk-hidden" uk-spinner></span>
</div>
</form>