wordpress ajax form submition - php

Question

I need to send the mail in wordpress for the custom ajax form. The mail
should contain full name, email, phone number and the
message(comment). Please help me to do it.
I have included the html code as a shortcode in functions.php .
function send_grivence(){
var form1 = jQuery("#myform").serialize();
console.log(form1);
jQuery.ajax({
data: {action: 'send_form', form:form1},
type: 'post',
url: 'mydomain.com/wp-admin/admin-ajax.php/',
success: function(data) {
console.log(data); //should print out the name since you sent it along
}
});
}
<form class="form-horizontal" id="myform">
<fieldset>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="fullname">Fullname:</label>
<div class="controls">
<input type="text" id="fullname" name="fullname" placeholder="your-name" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="email">Email Id:</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="your-email" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="number">Phone No:</label>
<div class="controls">
<input type="text" id="phonenumber" name="phonenumber" placeholder="your-phone no" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="number">Comment:</label>
<div class="controls">
<textarea name="name" rows="8" cols="80" placeholder="your-message"></textarea>
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<a onclick="send_form()" class="btn btn-success">Submit</a>
</div>
</div>
</fieldset>
</form>

Answer 1

first jquery code to submit form via ajax
jQuery(document).ready(function (jQuery) {
jQuery('#myform').submit(contactSubmit);
function contactSubmit() {
var contactForm = jQuery('#myform').serialize();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: contactForm,
success: function (data) {
// console.log(id);
console.log(data);
}
});
return false;
}
});
make sure that you place a action input in your form like this
<input type="hidden" name="action" value="contactForm"/>, just paste it before submit button. Note that contactForm function is called in function.php
then place a function in your function.php
function contactForm() {
$name = $_POST['fullname'];
$email = $_POST['email'];
$phone = $_POST['phonenumber'];
$message = $_POST['comment'];
$quote = 'Full Name: ' . $name . "\n\r" . 'Email: ' . $email . "\n\r" . 'Phone: ' . $phone . "\n\r" . 'Message: ' . $message . "\n\r";
$to = "YOUR EMAIL ADDRESS"; // put your email here
$headers = 'From:' . $name . '<' . $email . '>' . "\r\n"; // put user's email here or duplicate your email
$subject = 'Contact Form';
if ( wp_mail( $to, $subject, $quote, $headers ) === false ) {
echo "Error";
} else {
echo "<h3> Mail Sent Successfully Done</h3>";
}
die();
}
add_action( 'wp_ajax_contactForm', 'contactForm' );
add_action( 'wp_ajax_nopriv_contactForm', 'contactForm' );
Also make sure you replace your email in "YOUR EMAIL ADDRESS". also, make sure your url: "/wp-admin/admin-ajax.php", displays your full address. In local you might include url: "/YOUR_FOLDER_HERE/wp-admin/admin-ajax.php", else in live server it works fine.
EDIT
<textarea name="name" rows="8" cols="80" placeholder="your-message"></textarea>
change name="name" to name="comment"
Hope this helps.