Very new to this so apologies is my question is basic but it's stumped me for some hours.
I have a contact form which uses a bit of AJAX to POST to my PHP file. The problem im having is that when i try to get the PHP to email that data to myself, it isn't reading the POST values. The PHP was working when i tested it without the JS/AJAX post method, but in order to stop the page refresh I have gone with the AJAX option. Now that i've added the ajax in, the email result isn't showing up with the data (I can inspect and see that the Form Data is filled, just unclear why it isnt populating in the email) :
Name:
Email:
Message:
Any guidance as to why my mail server only receives the text but not the POST
Opening & Closing HTML on form:
<form data-parsley-validate action="./assets/contactform.php" method="POST">
<div class="formRow">
<label for="name" class="obscure">Name</label>
<input type="text" name="nameInput" id="name" placeholder="Name" required data-parsley-error-message="Please enter your name"></input>
</div>
<div class="formRow">
<label for="email" class="obscure">Email</label>
<input name="emailInput" id="email" type="email" placeholder="Email" required data-parsley-error-message="Please enter a valid email address"></input>
</div>
<div class="formRow">
<label for="message" class="obscure">Message</label>
<textarea name="messageInput" id="message">Message</textarea>
</div>
<input type="submit" name="submit"></input>
PHP Script:
<?php
$to = 'hello#kymlangford.com';
$subject = 'Post from your website';
$message = "Name: " . $_POST['nameInput'] . "\n Email: " . $_POST['emailInput'] . "\n Message: " . $_POST['messageInput'];
$headers = 'From: hello#kymlangford.com' . "\r\n" .
'Reply-To: ' . $_POST['emailInput'] . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
exit;
?>
Java for the form:
$(function() {
$.ajax({
type: 'POST',
url: './assets/contactform.php',
data: { name : $('input[name=nameInput]').val(),
email : $('input[name=emailInput]').val(),
message : $('textarea[name=messageInput]').val()
},
dataType: 'json'
})
event.preventDefault();
});
});
--Update 08/07/2014--
Below is the jquery code that solved my problem
// get the data from the form
$('form').submit(function(event){
var fdata = $(this).serializeArray();
fdata.push({ name: 'submit', value: true });
$.post('./assets/contactform.php', fdata, function (data) {
alert('Data Loaded:' + data); });
console.log(fdata);
event.preventDefault();
});
});
I think you can use jquery which is the same like ajax.
Here is the HTML code
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("sendemail.php", $("#contactform").serialize(), function(response)
{
$('#message').html(response);
});
return false;
});
});
</script>
</head>
<body>
<p>
<form action="" method="post" id="contactform" >
<label for="name">Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" /><br />
<label for="emailcontent">Email Content:</label><br />
<textarea name="emailcontent" id="emailcontent"></textarea><br />
<input type="button" value="Send Email" id="submit" /><div id="message"> </div>
</form>
</p>
</body>
</html>
Here is the PHP code, save it with 'sendemail.php' filename
$name = $_POST['name'];
$email = $_POST['email'];
$emailcontent = $_POST['emailcontent'];
$to = 'youremail#domain.com';
$subject = 'the subject';
$emailcontent = 'FROM: '.$name.' Email: '.$email.'Content: '.$emailcontent;
$headers = 'From: youremail#domain.com' . "\r\n";
mail($to, $subject, $message, $headers);
echo "Your email was sent!";
Related
I am trying to send an email to user account using php mail() function.The mail is sent successfully but the issue is that it is sending me blank emails with no values in them! The code for the contact page that sends the email is as follows:-
<form class="contact-form" method="POST" action="sendemail.php">
<div class="row-fluid">
<div class="span5">
<label>First Name</label>
<input type="text" class="input-block-level" required="required" placeholder="Your First Name" name="name">
<label>Last Name</label>
<input type="text" class="input-block-level" required="required" placeholder="Your Last Name" name="lname">
<label>Email Address</label>
<input type="text" class="input-block-level" required="required" placeholder="Your email address" name="email">
</div>
<div class="span7">
<label>Message</label>
<textarea name="message" id="message" required="required" class="input-block-level" rows="8" name="message"></textarea>
</div>
</div>
<input type="submit" class="btn btn-primary btn-large pull-right" value="Send Message" />
<p> </p>
</form>
and sendemail.php page code is as follows:
<?php
header('Content-type: application/json');
$status = array(
'type'=>'success',
'message'=>'Email sent!'
);
$name = #trim(stripslashes($_POST['name']));
$email = #trim(stripslashes($_POST['email']));
$subject = "An enquiry sir";
$message = #trim(stripslashes($_POST['message']));
$email_from = $email;
$email_to = 'email#email.com';
echo $body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Subject: ' . $subject . "\n\n" . 'Message: ' . $message;
$success = #mail($email_to, $subject, $body, 'From: <'.$email_from.'>');
echo json_encode($status);
die;
?>
Why is the output I get blank in my email id, for example:
Name:
Email:
Subject:
Message:
P.N: I am using here a nova template theme.
The form is being submitted via AJAX using the following JavaScript:
var form = $('.contact-form');
form.submit(function () {
$this = $(this);
$.post($(this).attr('action'), function(data) {
$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
},'json');
return false;
});
the form submission code is not submitting the form data. Here is the code you provided:
var form = $('.contact-form');
form.submit(function () {
$this = $(this);
$.post($(this).attr('action'), function(data) {
$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
},'json');
return false;
});
and this is what it should be:
var form = $('.contact-form');
form.submit(function () {
$this = $(this);
$.post($(this).attr('action'), $(this).serialize(), function(data) {
$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
},'json');
return false;
});
Remove the echo from the line that defines $body
From this...
echo $body = 'Name: ' . $name . "\n\n" . 'Email
To this...
$body = 'Name: ' . $name . "\n\n" . 'Email
Please help me with decoding what the real issue is. The issue is that I keep getting a blank email, despite all my tweaking and research on this code. Below are my html, javascript (ajax) and php code.
HTML code: file named contact.html
<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>
</form>
AJAX code:file named main.js
// Contact form
var form = $('#main-contact-form');
form.submit(function(event){
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
$.ajax({
url: $(this).attr('action'),
beforeSend: function(){
form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
}
}).done(function(data){
form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
});
});
PHP code: file named sendemail.php
<?php
header('Content-type: application/json');
$status = array(
'type'=>'success',
'message'=>'Thank you for contact us. As early as possible we will contact you '
);
$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#email.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.'>');
echo json_encode($status);
die;
?>
with this I keep on getting a blank email as depicted below
Name:
Email: Blank
Phone: Blank
Subject: Blank
Message: Blank
Have you tried with-out the die() at the end of your script? I think you might be killing your page too fast.
Also try creating a catch like this :
if (!mail(...))
{
// Reschedule for later try or panic appropriately!
}
Furthermore, you are suppressing warnings with # before mail();
Try removing the #.
Edit : Also, try removing the trims.
You have not set data while calling ajax, may be this is your problem.
When I test your code then I see that there fires a GET-request although you define the mehtod as POST in the form attribute. (Maybe that´s why jQuery use GET as default...). So the $_POST['name'] is empty because the parameter is in $_GET['name'].
And I can´t see the request parameters when I´m submiting the form. (Maybe that´s why the 'data' property is not set..)
Please try to complete the $.ajax with these:
method: 'POST'
data: $(this).serialize()
A BIG THANKS to ALL of you guys(#Mateusz Klimentowicz,#Mat VP,#Jose Manuel Abarca Rodríguez ,# Vladimir Nu). I actually followed your instructions and ended up correcting both the JS file and the PHP file as shown below:
JS file:
// Contact form
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){
form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
});
});
While the PHP code became this below:
<?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);
}
?>
And after using this code as stated below, i end up not getting any blank page email. Email is now delievered with it's content. Thanks a bunch.
Sounds like an odd question but here is what I have. The php has a snippet at the end that says success or failure makes a white screen to display this, I really want it to pop up right under the submit button on the same page rather than redirect the entire page.
I assume I could direct that to an empty <div>?
mail.php:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$formcontent=" From: $name \n Phone: $phone \n Message: $message";
$recipient = "art#jamisonsigns.com";
$subject = "Web Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!" . " -" . "<a href='index.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";
?>
With a simple HTML form on my website as follows:
<form class="contact-form" form action="mail.php" method="POST">
<fieldset>
<input type="text" class="name" id="name" placeholder="Name...">
</fieldset>
<fieldset>
<input type="email" class="email" id="email" placeholder="Email...">
</fieldset>
<fieldset>
<input type="text" class="phone" id="phone" placeholder="Phone...">
</fieldset>
<fieldset>
<textarea name="message" id="message" cols="30" rows="4" placeholder="Message.."></textarea>
</fieldset>
<fieldset>
<input type="submit" class="button" id="button" value="Send Message">
</fieldset>
</form>
You need to submit the form with Ajax. Then on success insert the message in the html.
$('#button').click(function(event) {
event.preventDefault();
var formdata = $('#formID').serializeArray();
var url = '/urltopost.php';
$.ajax(
{
url : url,
type: "POST",
data: formdata,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
console.log("STATUS:" + textStatus + " | jqXHR:" + jqXHR + " | data:" + data);
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
alert("ERROR:" + " -> " +errorThrown);
}
});
});
Here it is a tutorial if you need..
I'm having a hard time with this reCAPTCHA integration.
Here's my code so far:
HTML
<div class="form_contact">
<form id="form1" name="form1" method="post" action="#">
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" tabindex="1" placeholder="*Required Field" />
</div>
<div>
<label for="name">E-mail address:</label>
<input type="email" name="email" id="email" value="" tabindex="2" placeholder="*Required Field" />
</div>
<div>
<label for="name">Message Subject:</label>
<input type="text" name="msgTitle" id="msgTitle" value="" tabindex="3" placeholder="*Required Field" />
</div>
<div>
<label for="textarea">Message:</label>
<textarea cols="40" rows="8" name="message" id="message" tabindex="4" placeholder="*Required Field"></textarea>
</div>
<div>
<label for="textarea">Spam Blocker:</label>
<div class="captcha">
<?php
require_once('recaptchalib.php');
$publickey = "**********************************";
echo recaptcha_get_html($publickey);
?>
</div>
<a class="myButton" tabindex="5" id="submit" name="submit" href="#"> Submit <i class="fa fa-chevron-circle-right fa-2x"></i></
</form>
</div>
JQuery
<script>
$(function(){
$('.myButton').click(function() {
var data= {
name: $("#name").val(),
email: $("#email").val(),
msgTitle: $("#msgTitle").val(),
message: $("#message").val()
};
$.ajax({
type: "POST",
url: "mail.php",
data: data,
success: function(data){
console.log(data);
}
});
alert('Message Sent!');
return false;
});
});
</script>
MAIL.php
<?php
require_once('recaptchalib.php');
$privatekey = "*******************";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
} else {
$mailto = 'sample#example.com';
$nameField = $_POST['name'];
$emailField = $_POST['email'];
$emailSubject = $_POST['msgTitle'];
$messageField = $_POST['message'];
$body = <<<EOD
<br><hr><br>
Name: $nameField <br>
Email: $emailField <br>
Message: $messageField <br>
EOD;
$headers = "From: $emailField\r\n"; // This takes the email and displays it as who this email is from.
$headers .= "Content-type: text/html\r\n"; // This tells the server to turn the coding into the text.
$success = mail($mailto, $emailSubject, $body, $headers); // This tells the server what to send.
echo 'message sent!';
}
?>
I just want to display the error message below of the <form> if the reCAPTCHA inputs are incorrect.
Thanks in advance.!
Looks like a jQuery question, you can create a placeholder below the form to push in all the errors:
</form>
<div id="errors"></div>
And in your AJAX success call do:
success: function(data){
//clean it in case of multiple attempts
$('#errors').html(data);
}
.html() pastes the data sent from the server.
From the answer above I just wanna add this code if you want to return a callback from your backend
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
then you may want to change die into echo like so:
echo "The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"reCAPTCHA said: " . $resp->error . "";
then it should be like:
$.ajax({
type: "POST",
url: "mail.php",
data: data,
success: function(data){
$('#errors').html(data)
}
});
So basically, I want to have someone complete a form, run a php script, and instead of pulling up the php file's web page, I want to append text at the end of the form.
Currently, I have a form:
<form action="scripts/email.php" method="POST">
<p>Name: <input type="text" name="name" placeholder="Name"></p>
<p>Email: <input type="text" name="email" placeholder="Email"></p>
<p>Subject: <input type="text" name="subject" placeholder="Subject"></p>
<p>Message: </p>
<p><textarea name="message"></textarea></p>
which looks like this:
When 'Submit' is clicked, it leads to my PHP script:
<?php
$from = $_POST['email'];
$to = "comp#c0mp.org";
$subject = $_POST['subject'];
$name = $_POST['name'];
$message = $_POST['message'];
mail($to, $subject, "Name: " . $name . "\nMessage: " . $message, "From:" . $from);
print "Your message has been sent!";
?>
which leads to a blank web page that just says this in plain text:
"Your message has been sent!"
Basically, what I want is text added onto the submit form after the script is ran, such as:
http://i.stack.imgur.com/zha4d.png
How can I achieve running a PHP script on a web page, and instead of loading a new web page of the PHP script's path, but append text on the current HTML web page?
TRY THIS : WRITE THIS CODE INTO A SINGLE PAGE.
<form action="<?php $PHP_SELF ;?>" method="POST">
<p>Name: <input type="text" name="name" placeholder="Name"></p>
<p>Email: <input type="text" name="email" placeholder="Email"></p>
<p>Subject: <input type="text" name="subject" placeholder="Subject"></p>
<p>Message: </p>
<p><textarea name="message"></textarea></p>
<input type="submit" name="submit" value="Submit">
</form>
<?php
if (isset($_POST['submit'] ))
{
$from = $_POST['email'];
$to = "comp#c0mp.org";
$subject = $_POST['subject'];
$name = $_POST['name'];
$message = $_POST['message'];
mail($to, $subject, "Name: " . $name . "\nMessage: " . $message, "From:" . $from);
echo "Your message has been sent";
}
?>
you can use ajax for acheive more secure and fast execution of script.
HTML code:
<form method="POST">
<p>Name: <input type="text" id="name" name="name" placeholder="Name"></p>
<p>Email: <input type="text" id="email" name="email" placeholder="Email"></p>
<p>Subject: <input type="text" id="subject" name="subject" placeholder="Subject"></p>
<p>Message: </p>
<p><textarea id="area" name="message"></textarea></p>
<input type="submit" name="submit" value="Submit" onclick="mail_js();">
</form>
<div id="success_msg" style="display:none;"></div>
Just give proper style to this div.
JS code:
function mail_js()
{
var input_val=$('#name').val();
var email_val=$('#email').val();
var subject_val=$('#subject').val();
var message_val=$('#area').val();
jQuery.ajax({
type: 'post',
data:{
'input_val':input_val,
'email_val':email_val,
'subject_val':subject_val,
'message_val':message_val
},
url: 'email.php',
success:function(response){
$("#success_msg").append(response).show();
},
error: function(errorThrown){
alert('error');
console.log(errorThrown);
}
});
}
PHP script:
$from = $_POST['email_val'];
$to = "comp#c0mp.org";
$subject = $_POST['subject_val'];
$name = $_POST['input_val'];
$message = $_POST['message_val'];
mail($to, $subject, "Name: " . $name . "\nMessage: " . $message, "From:" . $from);
echo "Your message has been sent";