This question already has answers here:
PHP mail function doesn't complete sending of e-mail
(31 answers)
Closed 6 years ago.
I've the following contact form in my website. But the form data is being appended onto the URL and the json is not being sent to the PHP mail handler. Below are my code for the form.
HTML
<form novalidate="novalidate" style="width:60%;margin-left:auto;margin-right:auto;" onsubmit="sendMailNew()">
<div class="col-md-12">
<div class="col-md-6" style="padding-right: 5px">
<input type="text" class="form-control" name="contact_uname" id="contact_uname" placeholder="NAME" style="width:100%">
</div>
<div class="col-md-6">
<input type="text" class="form-control" name="contact_no" id="contact_no" placeholder="PHONE NUMBER" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input class="form-control" type="email" name="contact_email" id="contact_email" placeholder="E-MAIL ADDRESS" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_company" id="contact_company" placeholder="COMPANY" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_website" id="contact_website" placeholder="EXISTING WEBSITE(if any)" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_social" id="contact_social" placeholder="WHAT WOULD YOU LIKE(website, social media etc)" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_budget" id="contact_budget" placeholder="BUDGET(if we know approximately how much you're hoping to spend. we can (hopefully) come up with a strategy that fits your budget.)" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_section" id="contact_section" placeholder="WHAT SECTION WOULD YOU LIKE ON THE SITE" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_update" id="contact_update" placeholder="WHICH OF THOSE SECTIONS WILL YOU WANT TO BE ABLE TO UPDATE YOURSELF?" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_design" id="contact_design" placeholder="ANY IDEA ON THE STYLE OT DESIGN? DO YOU HAVE REFERENCES?" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_timeline" id="contact_timeline" placeholder="TIMELINE(when do you want to launch?)" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_hear" id="contact_hear" placeholder="HOW DID YOU HEAR ABOUT US?" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_comment" id="contact_comment" placeholder="ANY OTHER COMMENTS?" style="width:100%">
</div>
<div class="col-md-12" style="margin-top:3%">
<button type="submit" name="submit" value="submit" style="position:relative;left:45%;color:#22252c !important;background-color:white !important" class="btn btn-default">SUBMIT NOW</button>
</div>
</div>
</form>
AJAX script
<script type="text/javascript">
function sendMailNew()
{
$.ajax({
type: 'POST',
url: 'contactmail.php',
data: { cname: $("#contact_uname").val(), cno: $().val("#contact_no"), cemail: $("#contact_email").val(), ccompany: $("#contact_company").val(), cwebsite: $("#contact_website").val(), csocial: $("#contact_social").val(), cbudget: $("#contact_budget").val(), csection: $("#contact_section").val(), cupdate: $("#contact_update").val(), cdesign: $("#contact_design").val(), ctimeline: $("#contact_timeline").val(), chear: $("#contact_hear").val(), ccomment: $("#contact_comment").val() },
async: false,
success: function (data) {
$("#contact_uname").val()=data;
$("#contact_no").val()="";
$("#contact_email").val()="";
$("#contact_company").val()="";
$("#contact_website").val()="";
$("#contact_social").val()="";
$("#contact_budget").val()="";
$("#contact_section").val()="";
$("#contact_update").val()="";
$("#contact_design").val()="";
$("#contact_timeline").val()="";
$("#contact_hear").val()="";
$("#contact_comment").val()="";
},
dataType: 'json',
error: function (e, g, y) {
var msg = e;
}
});
alert('Thanks for submitting the form, we will get back to you soon!');
}
</script>
PHP mail handler
<?php
if(isset($_POST['submit'])){
$to = "pavan#tip.agency";
$from = $_POST['contact_email']; // this is the sender's Email address
$name = $_POST['contact_uname'];
$number = $_POST['contact_no'];
$company = $_POST['contact_company'];
$website = $_POST['contact_website'];
$social = $_POST['contact_social'];
$budget = $_POST['contact_budget'];
$section = $_POST['contact_section'];
$update = $_POST['contact_update'];
$design = $_POST['contact_design'];
$timeline = $_POST['contact_timeline'];
$hear = $_POST['contact_hear'];
$comment = $_POST['contact_comment'];
$subject = "Form submission";
$subject2 = "Copy of your form submission";
$message = "Name:" . $name . "\n Email: " . $from . "\n Number:" . $number . "\n Company:" . $company . "\n Website:" . $website . "\n Social:" . $social . "\n Budget:" . $budget . "\n Section:" . $section . "\n Update:" . $update . "\n Design:" . $design . "\n Timeline:" . $timeline . "\n Hear:" . $hear . "\n Comment:" . $comment;
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);
}
?>
Any idea how to fix this?
Thanks in advance!!
Stop default action in javascript first.
<script type="text/javascript">
function sendMailNew()
{
event.preventDefault();
//Your rest of JS here
}
</script>
I'm not sure but you may need to add action="" to the form. Let us know if it solves.
the option is not type: 'POST',
it is method: 'POST'. So by default it should be a GET request.
In your PHP Script, you take the values from "$_POST", so it can not find your parameters. Just try it this way. I prefer to use $.post, not $.ajax for my post requests. To make the script better, you should prevent default event and maybe use the url to submit your data as attribute action, and take it by $('form').attr('action') for your request.
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
I prefer this way, it looks just cleaner and you can not make a misstake with submit method:
function sendMailNew(e)
{
e.preventDefault();
var $form = $('form');
var url = $form.attr('action') || 'contactmail.php';
var params = {
cname: $("#contact_uname").val(),
cno: $().val("#contact_no"),
cemail: $("#contact_email").val(),
ccompany: $("#contact_company").val(),
cwebsite: $("#contact_website").val(),
csocial: $("#contact_social").val(),
cbudget: $("#contact_budget").val(),
csection: $("#contact_section").val(),
cupdate: $("#contact_update").val(),
cdesign: $("#contact_design").val(),
ctimeline: $("#contact_timeline").val(),
chear: $("#contact_hear").val(),
ccomment: $("#contact_comment").val()
};
$.post(url, params, function(data, status) {
$("#contact_uname").val()=data;
$("#contact_no").val()="";
$("#contact_email").val()="";
$("#contact_company").val()="";
$("#contact_website").val()="";
$("#contact_social").val()="";
$("#contact_budget").val()="";
$("#contact_section").val()="";
$("#contact_update").val()="";
$("#contact_design").val()="";
$("#contact_timeline").val()="";
$("#contact_hear").val()="";
$("#contact_comment").val()="";
}, 'json').fail(function() {
alert( "error" );
});
}
Related
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>
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.
I have form which contains multiple checkboxes and i need to send their values to the email but i am unable to send it through the ajax to email script.
But without ajax php code is working please suggest where i am missing something
Below is my html code
<form enctype="multipart/form-data">
<div class="col-md-12 col-sm-12"><input type="text" id="name" name="name" placeholder="Name:*" class="form-control" required/></div>
<div class="col-md-12 col-sm-12"><input type="email" id="email" name="email" placeholder="Email:*" class="form-control" required/></div>
<div class="col-md-12 col-sm-12"><input type="text" id="phone" name="phone" placeholder="Phone:*" class="form-control" required/></div>
<p>Vehicle Type You're Shipping?:*</p>
<div class="input-holder field-checkbox">
<div class="field-element ">
<input type="checkbox" id="" name="checkbox[]" value="Car, Truck Or SUV" class="required ">
<label for="1dfb36b53196072fe797a082d9892947-3-0">Car, Truck Or SUV</label>
</div>
<div class="field-element ">
<input type="checkbox" id="" name="checkbox[]" value="Motorcycle Or ATV" class="required ">
<label for="1dfb36b53196072fe797a082d9892947-3-1">Motorcycle Or ATV</label>
</div>
<div class="field-element ">
<input type="checkbox" id="" name="checkbox[]" value="RV Or Motorhome" class="required ">
<label for="1dfb36b53196072fe797a082d9892947-3-2">RV Or Motorhome</label>
</div>
<div class="field-element ">
<input type="checkbox" id="" name="checkbox[]" value="Boat/Yacht, Jet Ski" class="required ">
<label for="1dfb36b53196072fe797a082d9892947-3-3">Boat/Yacht, Jet Ski</label>
</div>
<div class="field-element ">
<input type="checkbox" id="" name="checkbox[]" value="Trailer" class="required ">
<label for="1dfb36b53196072fe797a082d9892947-3-4">Trailer</label>
</div>
<div class="field-element ">
<input type="checkbox" id="" name="checkbox[]" value="Other" class="required ">
<label for="1dfb36b53196072fe797a082d9892947-3-5">Other</label>
</div>
SEND
<center> <div class="result" id="result"style="color:red;font-weight: 900;background: #fff; "></div></center>
</form>
and i have this code for ajax
<script>
function submit_user(){
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
var country = document.getElementById('country').value;
var current = document.getElementById('current').value;
var model = document.getElementById('model').value;
var enquiry = document.getElementById('enquiry').value;
var myCheckboxes = new Array();
$("input:checkebox").each(function() {
data['myCheckboxes[]'].push($(this).val());
});
$.ajax({
type: "POST",
url: "script.php?name="+name+"&email="+email+"&phone="+phone+"&checkbox="+myCheckboxes+"&country="+country+"¤t="+current+"&model="+model+"&enquiry="+enquiry,
success:function(data) {
$( ".result" ).html(data);
}
});
// alert("2s");
}
and i have this script for php
<?php
if (!empty($_GET['name']) && !empty($_GET['email']) && !empty($_GET['phone'] ) && !empty($_GET['country']) && !empty($_GET['current']) && !empty($_GET['model'])) {
$message = "New Email from landing Page";
$name = $_GET['name'];
$email = $_GET['email'];
$phone = $_GET['phone'];
$country =$_GET['country'];
$current =$_GET['current'];
$model =$_GET['model'];
$enquiry =$_GET['enquiry'];
$from = "From: Booking from Landing Page";
$to = "email#gmail.com";
$subject = " You Got a Booking From Landing Page!";
if (isset($_GET['myCheckboxes']) && !empty($_GET['myCheckboxes'])) {
foreach($_GET['myCheckboxes'] as $selected ){
$MESSAGE_BODY .= $selected."\r\n";
}
}
$mail = "
Info: ".$message."
Name: ".$name."
email: ".$email."
Phone: ".$phone."
checkbox ".$MESSAGE_BODY."
Country: ".$country."
Currrent: ".$current."
Model: ".$model."
Message: ".$enquiry."";
mail($to, $subject, $mail, $from);
//readfile("thank-you.html");
//exit;
echo "Thank You, I will get back to you ASAP";
}else{
//readfile("error.html");}
echo "something is incorrect, please retry";
}
?>
Try changing -
var myCheckboxes = new Array();
$("input:checkebox").each(function() {
data['myCheckboxes[]'].push($(this).val());
});
to
var myCheckboxes = new Array();
$("input:checkbox:checked").each(function() {
myCheckboxes.push($(this).val());
});
(1) input:checkebox should be input:checkbox
(2) added :checked as you only want to send checked checkboxes, not each one
(3) you want to .push() to myCheckboxes, not to data['myCheckboxes[]']
Each time, I submit my form, the expected reset function is not clearing my form. Please how should I clear my form my codes(HTML, PHP, JS) follows below.
HTML codes:
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<label>Name *</label>
<input type="text" name="name" class="form-control" required="required">
</div>
<div class="form-group">
<label>Email *</label>
<input type="email" name="email" class="form-control" required="required">
</div>
<div class="form-group">
<label>Phone</label>
<input type="number" class="form-control">
</div>
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label>Subject *</label>
<input type="text" name="subject" class="form-control" required="required">
</div>
<div class="form-group">
<label>Message *</label>
<textarea name="message" id="message" required="required" class="form-control" rows="8"></textarea>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-lg" required="required">Submit Message</button>
</div>
</div>
Javascript code is below:
jQuery(function($) {'use strict',
......
......
var form = $('#main-contact-form');
form.submit(function(event){
event.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
var form_status = $('<div class="form_status"></div>');
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: formData,
beforeSend: function(){
form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
}
}).done(function(data){
$("#main-contact-form")[0].reset();
form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
});
});
......
......
});
And last of all is my PHP code:
<?php
$status = array(
'type'=>'success',
'message'=>'Thank you for contacting us. As soon as possible we will contact you!'
);
$fail = array(
'type'=>'fail',
'message'=>'Please try again. Your mail could not be delivered!'
);
$name = #trim(stripslashes($_POST['name']));
$email = #trim(stripslashes($_POST['email']));
$subject = #trim(stripslashes($_POST['subject']));
$message = #trim(stripslashes($_POST['message']));
$email_from = $email;
$email_to = 'email#mail.com';//replace with your email
$body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Subject: ' . $subject . "\n\n" . 'Message: ' . $message;
$success = #mail($email_to, $subject, $body, 'From: <'.$email_from.'>');
header('Content-type: application/json');
if($success){
echo json_encode($status);
}
else{
echo json_encode($fail);
}
?>
Try this code
$("#main-contact-form")[0].reset();
One important thing i was actually missing was that I actually used the reset function before I outputted the obtained message from the server.Looking at my code above, one will discover that i have in my javascipt code the line below:
.done(function(data){
$("#main-contact-form")[0].reset();
form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
});
});
which I corrected to become this one below:
.done(function(data){
form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
$('#main-contact-form')[0].reset();
//$('#main-contact-form').trigger("reset");
});
A BIG THANKS TO YOU GUYS!
I've been looking to solve this, but i can't find a way to do it. I already tried other methods i found in here, but none of them were working for me.
I'm building a website with Bootstrap and also using Bootstrap Validator to make a Contact Form. I can make it work perfect and also submit the contact, but the "thank you message" is redirected to another page. I want the "Thank you message" to load on the same page, and take the place of the form, since its a one scrolling page website.
Can anyone help me please? This is the code i have so far:
Ps.: All my CSS file are the original from bootstrap, nothing has been changed.
HTML
<div class="container">
<div class="row">
<!-- form: -->
<section>
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h2>Formulário de contato.</h2>
</div>
<form id="defaultForm" method="post" class="form-horizontal" action="contact-2.php">
<div class="form-group">
<label class="col-lg-3 control-label">Nome completo</label>
<div class="col-lg-4">
<input type="text" class="form-control" name="firstName" placeholder="Nome" />
</div>
<div class="col-lg-4">
<input type="text" class="form-control" name="lastName" placeholder="Sobrenome" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Assunto</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="subject" placeholder="WebSite" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">E-mail</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" placeholder="email#contato.com" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Telefone</label>
<div class="col-lg-5">
<input type="tel" class="form-control" name="tel" placeholder="48 0000 0000" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mensagem</label>
<div class="col-lg-5">
<textarea class="form-control" name="message" rows="10" placeholder="Escreva aqui sua mensagem."></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label" id="captchaOperation"></label>
<div class="col-lg-2">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Enviar</button>
<button type="button" class="btn btn-info" id="resetBtn">Limpar</button>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
PHP Contact
<?php
// getting
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = trim($_POST['email']);
$emailtosend = 'myemail#hotmail.com'; //E-mail to receive message
$tel = $_POST['tel'];
$subject = $_POST['subject'];
$message = $_POST['message'];
/* Message to show on email. */
$mensagemHTML = '<P>Contact form sent by the website.</P>
<p><b>First Name:</b> '.$firstname.'
<p><b>Last Name:</b> '.$lastname.'
<p><b>E-Mail:</b> '.$email.'
<p><b>Telephone:</b> '.$tel.'
<p><b>Subject:</b> '.$subject.'
<p><b>Message:</b> '.$message.'</p>
<hr>';
//
//
$headers = "MIME-Version: 1.1\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
$headers .= "From: $email\r\n"; // remetente
$headers .= "Return-Path: $emailtosend \r\n"; // return-path
$envio = mail($email, $subject, $mensagemHTML, $headers);
if($envio)
//echo "<script>location.href='sucesso.html'</script>"; // Página que será redirecionada
?>
If there is anyone here able to help me with it, that would be great!
Have a look at the code below. You need AJAX. Place this in your html page.
The whole project of that code can be found at this link (just in case you want to see other files too).
$(function() {
$("#myform button").click(function() {
// Get form values
var name = $("input#name").val();
var email = $("input#email").val();
var comments = $("textarea#comments").val();
// Validate and prepare values for php
var dataString = 'name='+ name + '&email=' + email + '&comments=' + comments;
// Post data to the php file
$.ajax({
type: "POST",
url: "bin/process-form.php",
async:false, // Wait for the result
data: dataString,
success: function(data) {
if (data=="Email Sent Successfully!"){
$('#myform').html("<div id='message'></div>");
$('#message').html("<h2>Enquiry Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<span class='glyphicon glyphicon-ok'></span>");
});
} else {
$("#myform-errors").show();
$('#myform-errors').html(data);
}
}
});
return false;
});
Cant seem to see why this contact form is not working any pointers would be great... wanna send the form via ajax and serialise the data to be sent across.. just doesnt seem to be working though..hope some one can help
html
<form method="post" action="" id="contact_form">
<div class="row">
<div class="large-6 columns">
<label for="contact_name">Your Name</label>
<input type="text" placeholder="" id="contact_name" name="contact_name" class="required">
</div>
<div class="large-6 columns">
<label for="contact_email">Your Email</label>
<input type="text" placeholder="" id="contact_email" name="contact_email" class="required">
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label for="contact_company">Company Name or Organization</label>
<input type="text" placeholder="" id="contact_company" name="contact_company" class="required">
</div>
<div class="large-6 columns">
<label for="contact_phone">Phone Number</label>
<input type="text" placeholder="" id="contact_phone" name="contact_phone" class="required">
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label for="contact_message">Your Message</label>
<textarea rows="4" placeholder="" id="contact_message" name="contact_message" class="required"></textarea>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" name="contact_submit" id="contact_submit" value="SEND MESSAGE" class="button">
</div>
</div>
</form>
<p class="success" style="display:none">Your message has been
sent successfully.</p>
Mail.php
<?php
$name = $POST['contact_name'] ;
$email = $POST['contact_email'] ;
$company = $_POST['contact_company'] ;
$number = $_POST['contact_phone'] ;
$message = $POST['contact_message'] ;
mail("allycallow#hotmail.com", $name, $company, $number, $message, "From:" . $email);
?>
js file
$(document).ready(function() {
$('#contact_form').validate({
submitHandler: function(form) {
//do submit
var dataString = $("this").serialize();
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "php/mail.php",
data: dataString,
success: function() {
$('.success').fadeIn(1000);
$("input[type=text], textarea").val("");
$('.success').fadeToggle(1000);
}
});
return false;
}
});
});
You have made some mistakes. Use the below code:
<?php
$name = $_POST['contact_name'] ;
$email = $_POST['contact_email'] ;
$company = $_POST['contact_company'] ;
$number = $_POST['contact_phone'] ;
$message = $_POST['contact_message'] ;
//modify the mail function
mail("allycallow#hotmail.com", $name.$company, $message, "From:" . $email);
?>
And in JS change the below:
success: function(returnData) {
$('.success').fadeIn(1000);
$("input[type=text], textarea").val("");
//$('.success').fadeToggle(1000);
}