HTML
<form>
<div class="error"></div>
<input type="text" id="form-field-name">
<input type="text" id="form-field-phone">
<input type="text" id="form-field-email">
<input type="text" id="form-field-message">
<input type="submit" class="send">
</form>
<div class="loader"></div>
CSS
.detail {
padding: 10px;
box-sizing: border-box;
font-size: 16px;
border: 1px solid #000;
outline: none;
margin: 15px auto;
}
.submit
{
background-color: #EAC15A;
outline: none;
border: 0px;
padding: 15px 20px;
font-size: 18px;
font-weight:700;
}
.error
{
color:red;
font-size:10px;
float:left;
text-align:center;
height:15px;
width:100%;
margin-bottom:15px;
}
.loader {
display:none;
border: 3px solid #f3f3f3;
border-radius: 50%;
border-top: 3px solid #000;
width: 30px;
height: 30px;
-webkit-animation: spin 500ms linear infinite; /* Safari */
animation: spin 500ms linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
jQuery
jQuery(document).ready(function($) {
//validation method for email
function validateEmail($email){
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
return reg.test( $email );
}
//validation method for email
function validatePhone($phone) {
var phoneReg = /^[789]\d{9}$/;
return phoneReg.test( $phone );
}
//submit action starts here
$(".send").click(function(e){
//prevent default Submission behaviour of html
e.preventDefault();
//Show Loader code here
$('.loader').css('display','block');
//get all the values here
var fullname = $("#form-field-name").val();
var phone = $("#form-field-phone").val();
var email = $("#form-field-email").val();
var message = $("#form-field-message").val();
//validate all the values before proceeding
if(fullname == ""){
$("#form-field-name").focus();
$('.error').html('Please enter your name');
$('.loader').css('display','none');
return false;
}
if(!validateEmail(email)){
$("#form-field-email").focus();
$('.error').html('Please enter valid email');
$('.loader').css('display','none');
return false;
}
if(!validatePhone(phone)){
$("#form-field-field_f72623c").focus();
$('.error').html('Please enter valid phone number');
$('.loader').css('display','none');
return false;
}
if(message == ""){
$("#form-field-message").focus();
$('.error').html('Please enter the message');
$('.loader').css('display','none');
return false;
}
//prepare your data to submit with ajax
//Ajax url for your wordpress setup
var ajaxurl = "https://websitename.com/wp-admin/admin-ajax.php";
//data
var data = {
'action' : 'send_mail_from_app',
'fullname' : fullname,
'phone' : phone,
'email' : email,
'message' : message,
crossDomain: true,
cache: false,
}
//ajax call
$.post(ajaxurl,data,function(response){
$('.loader').css('display','none');
$(".detail").val("");
$('.response').html("Email sent successfully!");
});
});
});
PHP
//allow cors headers if you are using this for mobile app
function add_cors_http_header(){
header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');
//ajax function call
function send_mail_from_app(){
$msg = $_POST['message'];
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = "
Sender: $fullname ($email) <br>
Phone: $phone <br>
Message: $msg <br>
";
$to = "admin@mail.com";
$headers = 'From: "' . $fullname. '" <no-reply@domain.com>' . "\r\n";
$headers = 'Reply-To: '.$email.'' . "\r\n" .
$headers .= "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type: text/html; charset=UTF-8" . "\r\n";
mail( $to, $fullname, $message, $headers );
die();
}
add_action('wp_ajax_send_mail_from_app', 'send_mail_from_app');
add_action('wp_ajax_nopriv_send_mail_from_app', 'send_mail_from_app');