I'm trying to implement a basic contact form for my website that comprises of three fields: Name, Email and Message. The php code I'm working with is given below:
<?php
// Fetching Values from URL.
$name = $_POST['name2'];
$email = $_POST['email2'];
$message = $_POST['message2'];
$email = filter_var($email, FILTER_SANITIZE_EMAIL); // Sanitizing E-mail.
// After sanitization Validation is performed
if (filter_var($email, FILTER_VALIDATE_EMAIL))
{
$subject = $name;
// To send HTML mail, the Content-type header must be set.
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From:' . $email. "\r\n"; // Sender's Email
$headers .= 'Cc:' . $email. "\r\n"; // Carbon copy to Sender
$template = '<div style="padding:50px; color:white;">Hello ' . $name . ',<br/>'
. '<br/>Thank you for contacting me!<br/><br/>'
. 'Name:' . $name . '<br/>'
. 'Email:' . $email . '<br/>'
. 'Message:' . $message . '<br/><br/>'
. 'This is a Contact Confirmation mail.'
. '<br/>'
. 'I\'ll get back to you as soon as possible .</div>';
$sendmessage = "<div style=\"background-color:#7E7E7E; color:white;\">" . $template . "</div>";
// Message lines should not exceed 70 characters (PHP rule), so wrap it.
$sendmessage = wordwrap($sendmessage, 70);
// Send mail by PHP Mail Function.
mail("myemailid#gmail.com", $subject, $sendmessage, $headers);
echo "Your message has been sent successfully!";
}
else
{
echo "<span>* invalid email *</span>";
}
?>
(obviously I replaced myemailid#gmail.com with my actual email address)
The JavaScript file calling this php code is as under:
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name2").val();
var email = $("#email2").val();
var message = $("#message2").val();
// Checking for blank fields.
if (name == '' || email == '' || message == '')
{
alert("Please Fill Required Fields");
}
else
{
$.post("contact_form.php",
{
name2: name,
email2: email,
message2: message,
}, function(data) {
if (data == "Your message has been sent successfully!") {
$("#footer-form")[0].reset(); // To reset form fields on success.
}
});
}
});
});
When I click the 'Send' button nothing happens. What am I doing wrong here?
In case this helps:
<div class="col-sm-6">
<div class="footer-content">
<form role="form" id="footer-form">
<div class="form-group has-feedback">
<label class="sr-only" for="name2">Name</label>
<input type="text" class="form-control" id="name2" placeholder="Name" name="name2" required>
<i class="fa fa-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="sr-only" for="email2">Email address</label>
<input type="email" class="form-control" id="email2" placeholder="Enter email" name="email2" required>
<i class="fa fa-envelope form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="sr-only" for="message2">Message</label>
<textarea class="form-control" rows="8" id="message2" placeholder="Message" name="message2" required></textarea>
<i class="fa fa-pencil form-control-feedback"></i>
</div>
<input type="button" id="submit" value="Send" class="btn btn-default">
</form>
</div>
</div>
Also, the php URL I would get on clicking the Send button was as under:
/index.html?name2=John+Doe&email2=johndoe%40example.com&message2=This+is+a+test+message.
Ever since I changed the button type to 'button' instead of 'submit', the button doesn't reload the page or give me this URL.
To read form params in your PHP you need to use $_GET. Debug at that level. See if you're getting those values on your server side. Also, make sure you're reading all the values in js. Providing your HTML chunk would help.
The error is an syntax error, the } after the echo "Your message has been sent successfully!";.
EDIT:
Moreover, make sure to verify if $("#submit").click is called.
You also need to cancel the form submit action (you're using ajax to send the mail).
Related
There is a form in my index.php file. This form is handling from a different php file named send-mail.php. I want to show a message inside alert div in index.php file. Can this be done by php or javascript will be needed too?
index.php:
<section id="contact">
<form action="send-mail.php" id="form" method="post" name="form">
<input id="name" name="name" placeholder="your name" type="text" required>
<input id="email" name="email" placeholder="your e-mail" type="email" required>
<textarea cols="50" id="message" name="message" placeholder="your enquiry" rows="4" required></textarea>
<input type="submit" name="submit" id="submit" value="Send Message">
</form>
<div class="alert alert-dismissible fade in hide" role=alert>
<button type=button class=close data-dismiss=alert aria-label=Close><span aria-hidden=true>×</span></button>
</div>
</section>
send-mail.php:
<?php
if(isset($_POST['submit'])){
// Get the submitted form data
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// Recipient email
$toEmail = 'user#example.com';
$emailSubject = 'Contact Request Submitted by '.$name;
$htmlContent = '<h2>Contact Request Submitted</h2>
<h4>Name</h4><p>'.$name.'</p>
<h4>Email</h4><p>'.$email.'</p>
<h4>Message</h4><p>'.$message.'</p>';
// Set content-type header for sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// Additional headers
$headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";
// Send email
if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
$statusMsg = 'Your contact request has been submitted successfully !';
$msgClass = 'alert-success';
header('location: index.php#contact');
}else{
$statusMsg = 'Your contact request submission failed, please try again.';
$msgClass = 'alert-danger';
header('location: index.php#contact');
}
}
?>
Change your redirects to:
header('location: index.php?result='.$msgClass.'#contact');
Then adding the following to your index.php file:
if ($_GET['result']=="alert-success") {
// display success message here
} elseif ($_GET['result']=="alert-danger") {
// display error message here
}
When i send an email with my contact form the textarea value does not send and the "message:" field is always empty in the email.
Declaring the input variables manually in jquery instead of using serialize gives the same result.
The textarea is inside the form tags so i have no idea why its value is not picked up and posted.
I've tried giving the textarea an id="message" and calling it manually in jquery like: var text = $("#message").val(); and var text = $("textarea#message").val(); but it still doesn't send.
I don't know what i'm doing wrong. Please help.
Here is my code:
<form id="contactForm" method="POST">
<div class="row small-margin">
<div class="col-md-4">
<i class="pe-7s-user pe-2x icon-contact"></i>
<input name="name" type="text" placeholder="Name(required)" required size="35">
</div>
<div class="col-md-4">
<i class="pe-7s-mail pe-2x icon-contact"></i>
<input name="email" type="email" placeholder="Email(required)" required size="35">
</div>
<div class="col-md-4">
<i class="pe-7s-link pe-2x icon-contact"></i>
<input name="website" type="text" placeholder="Website" size="35">
</div>
</div>
<div class="row small-margin">
<div class="col-md-12">
<!-- Message Field -->
<textarea name="message" placeholder="Your Message(required)" required></textarea>
<!-- Submit Button -->
<button id="submit" name="submit" type="submit" class="button" value="submit">SEND MESSAGE</button>
<!-- Success Message -->
<div id="msgSubmit" class="alert alert-success text-center hidden">Message Sent Successfully</div>
</div>
</div>
</form>
And JS:
$("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
console.log( $( this ).serialize() );
});
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&website=" + website + "&message=" + text,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
And PHP:
<?php
// Set variables
$name = $_POST['name'];
$email = $_POST['email'];
$website = $_POST['website'];
$message = $_POST['text'];
$to = 'novakim92#gmail.com';
$subject = 'New Message from Nixo';
// Prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Website: ";
$Body .= $website;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// Send email
$success = mail($to, $subject, $Body, "From:".$email);
if ($success){
echo "success";
}else{
echo "<p>Something went wrong, please try again!</p>";
}
?>
I found the issue on your code:
the Values from textarea never made it the Server side, because you are doing this in your PHP:
$message = $_POST['text'];
You should do this in order to get the value from textarea:
$message = $_POST['message'];
This will solve your issue :). Hope it helps.
Your variable naming is inconsistent.
In your HTML-form you're using message for the name-attribute.
But in you're AJAX-call and in the PHP $_POST-GLOBAL you are looking for a variable called text.
When i send an email with my contact form the textarea value does not send and the "message:" field is always empty in the email.
Declaring the input variables manually in jquery instead of using serialize gives the same result.
The textarea is inside the form tags so i have no idea why its value is not picked up and posted.
I've tried giving the textarea an id="message" and calling it manually in jquery like: var text = $("#message").val(); and var text = $("textarea#message").val(); but it still doesn't send.
I don't know what i'm doing wrong. Please help.
Here is my code:
<form id="contactForm" method="POST">
<div class="row small-margin">
<div class="col-md-4">
<i class="pe-7s-user pe-2x icon-contact"></i>
<input name="name" type="text" placeholder="Name(required)" required size="35">
</div>
<div class="col-md-4">
<i class="pe-7s-mail pe-2x icon-contact"></i>
<input name="email" type="email" placeholder="Email(required)" required size="35">
</div>
<div class="col-md-4">
<i class="pe-7s-link pe-2x icon-contact"></i>
<input name="website" type="text" placeholder="Website" size="35">
</div>
</div>
<div class="row small-margin">
<div class="col-md-12">
<!-- Message Field -->
<textarea name="message" placeholder="Your Message(required)" required></textarea>
<!-- Submit Button -->
<button id="submit" name="submit" type="submit" class="button" value="submit">SEND MESSAGE</button>
<!-- Success Message -->
<div id="msgSubmit" class="alert alert-success text-center hidden">Message Sent Successfully</div>
</div>
</div>
</form>
And JS:
$("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
console.log( $( this ).serialize() );
});
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&website=" + website + "&message=" + text,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
And PHP:
<?php
// Set variables
$name = $_POST['name'];
$email = $_POST['email'];
$website = $_POST['website'];
$message = $_POST['text'];
$to = 'novakim92#gmail.com';
$subject = 'New Message from Nixo';
// Prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Website: ";
$Body .= $website;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// Send email
$success = mail($to, $subject, $Body, "From:".$email);
if ($success){
echo "success";
}else{
echo "<p>Something went wrong, please try again!</p>";
}
?>
I found the issue on your code:
the Values from textarea never made it the Server side, because you are doing this in your PHP:
$message = $_POST['text'];
You should do this in order to get the value from textarea:
$message = $_POST['message'];
This will solve your issue :). Hope it helps.
Your variable naming is inconsistent.
In your HTML-form you're using message for the name-attribute.
But in you're AJAX-call and in the PHP $_POST-GLOBAL you are looking for a variable called text.
This question already has answers here:
PHP mail function doesn't complete sending of e-mail
(31 answers)
Closed 6 years ago.
I have a contact form on my wordpress site but I cannot get information from the form to send to my email address when the submit button is clicked.
Once the submit button has been clicked and the email has been sent I would like a confirmation to appear underneath the submit button that the message has been sent/error if it hasn't. Note: I will update the css for the contact form to accommodate the extra text.
This is my form code:
<form action="secure_email.php" method="post" id="contact-form-content">
<h5>You have had a look, so let's get cracking. Email me at me#myemail.com or use this nifty thing.</h5><br></br>
<legend>Contact Form</legend>
<input type="text" placeholder="Full Name" name="full-name" id="full-name" required;><br></br>
<input type="text" placeholder="Email" name="email" id="email" required;><br></br>
<textarea placeholder="Message" name="message" id="message" rows="100" cols="100" wrap="hard" required;></textarea><br></br>
<button type="submit" name="submit" value="submit">Send</button>
</form>
And this is secure_email.php file:
<?php
if(isset($_POST['submit'])){
$to = "me#myemail.com"; // this is your Email address
$email = $_POST['email']; // this is the sender's Email address
$full-name = $_POST['full-name'];
$subject = "Form submission";
$message = $full-name . " " . $email . " wrote the following:" . "\n\n" . $_POST['message'];
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($to, $subject, $message, $headers);
if (isset($_POST['submit']))
{
if (mail($to, $subject, $message, $headers))
echo "Thank you for contacting me!";
}
else
{
echo '<p>Something went wrong, go back and try again!</p>';
}
}
?>
Just to update all this is the working code with contact form details being sent to my given email, the confirmation message appearing within the contact form and scroll back to contact form to see the confirmation message
<div id="contact-form">
<form action="#contact" method="post" id="contact-form-content">
<h5>You have had a look, so let's get cracking. Email me at me#myemail.com or use this nifty thing.</h5><br></br>
<legend>Contact Form</legend>
<input type="text" placeholder="Full Name" name="fullname" id="fullname" required;><br></br>
<input type="text" placeholder="Email" name="email" id="email" required;><br></br>
<textarea placeholder="Message" name="message" id="message" rows="100" cols="100" wrap="hard" required;></textarea><br></br>
<button type="submit" name="submit" value="submit">Send</button>
<?php
if(isset($_POST['submit'])){
$to = "me#myemail.com"; // this is your Email address
$email = $_POST['email']; // this is the sender's Email address
$fullname = $_POST['fullname'];
$subject = "Form submission";
$message = $fullname . " " . $email . " wrote the following:" . "\n\n" . $_POST['message'];
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
if (mail($to, $subject, $message, $headers)){
echo "Thank you for contacting me!";
}
else
{
echo '<p>Something went wrong, go back and try again!</p>';
}
}
?>
</form>
</div>
</div>
Please use mail functions.
PHP Mail Function
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($to, $subject, $message, $headers);
WordPress Mail Function
wp_mail($to, $subject, $message, $headers);
You eitherneed to
use Ajax to post your form data to secure-email.php then add the success message on succes in JavaScript.
Or
Post to the same page as the form, detect if the form has been submitted and send your email, then echo your success message if the mail sends successfully. The page will refresh when they hit submit and the message will be displayed.
I am attempting to have a bootstrap contact form fade out on submit.
I am working with code I have found (which I've slightly modified to suit my needs), and I am having trouble with its implementation. I'm fairly new and I seem to have gotten quite stuck.
Here is the JS:
$('contactUs').on('submit', function mailMe(form) {
form.preventDefault(); //Prevents default submit
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize(); //Serialized the form data for process.php
$('#loader', form).html('<img src="http://domain.com/test/images/loading.gif" /> Please Wait...');
$.ajax({
type: 'POST',
url: 'http://domain.com/test/process.php', // Your form script
data: post_data,
success: function(msg) {
$(form).fadeOut(500, function(){
form.html(msg).fadeIn();
});
}
});
});
Here is the Form:
<form name="contactUs" onSubmit="return mailMe(this.form)" >
<div class="inputWrap">
<div class="fname">
<input class="myInput miLeft" type="text" placeholder="Name">
</div>
<div class="femail">
<input class="myInput miRight" type="text" placeholder="Email">
</div>
</div>
<div class="taWrap">
<textarea class="myTa" type="text" placeholder="Message"></textarea>
</div>
<button class="btns btn-3 btn-3g btnsx">Send</button>
</form>
And here is the process.php:
<?php
/* Configuration */
$subject = 'New Customer Email'; // Set email subject line here
$mailto = 'myemail#me.com'; // Email address to send form submission to
/* END Configuration */
$name = $_POST['name'];
$email = $_POST['email'];
$messageContent = $_POST['messageContent'];
$timestamp = date("F jS Y, h:iA.", time());
// HTML for email to send submission details
$body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>Name</b>: $name<br>
<b>Email</b>: $email<br>
<b>Message</b>: $messageContent<br>
<p>This form was submitted on <b>$timestamp</b></p>
";
// Success Message
$success = "
<div class=\"row-fluid\">
<div class=\"span12\">
<h3>Submission successful</h3>
<p>Thank you for taking the time to contact Shaz Construction & Design. A representative will be in contact with you shortly. If you need immediate assistance or would like to speak to someone now, please feel free to contact us directly at <strong>(415) 382-8442</strong>.</p>
</div>
</div>
";
$headers = "From: $name <$email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";
if (mail($mailto, $subject, $message, $headers)) {
echo "$success"; // success
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>
There are a few small things you are missing:
Your jQuery selector for the form is incorrect - give your form an ID attribute of contactUs, and then use the selector $('form#contactUs'). Get rid of the name attribute on the form.
Your button element needs to be of type submit - your button currently does nothing.
You don't need the onSubmit attribute, you are already binding your form to an event in the JS.
Your input tags currently do not have any name elements on them - they are required - see http://api.jquery.com/serialize/
You try to access an attribute on the form that does not exist (action), but you don't use it, so just remove that line.
Use return false rather than preventDefault in your event handler (I couldn't get preventDefault to work. That might just be me though!)
I can't tell this because of the context of your code, but ensure that your JS is within a $('document').ready(function() { ... } block.
I think that your JS and HTML should be:
JS
$('form#contactUs').on('submit', function() {
var form = $(this);
var post_data = form.serialize(); //Serialized the form data for process.php
$('#loader').html('<img src="http://yasharsahaleh.com/test/images/loading.gif" /> Please Wait...');
$.ajax({
type: 'POST',
url: 'http://yasharsahaleh.com/test/process.php', // Your form script
data: post_data,
success: function(msg) {
$('#loader').html('');
// We know this is the form that needs fading in/out
$('form#contactUs').fadeOut(500, function(){
$('form#contactUs').html(msg).fadeIn();
});
}
});
return false;
});
HTML
<form id="contactUs">
<div class="inputWrap">
<div class="fname">
<input name="name" class="myInput miLeft" type="text" placeholder="Name">
</div>
<div class="femail">
<input name="email" class="myInput miRight" type="text" placeholder="Email">
</div>
</div>
<div class="taWrap">
<textarea name="messageContent" class="myTa" type="text" placeholder="Message"></textarea>
</div>
<button type="submit" class="btns btn-3 btn-3g btnsx">Send</button>
</form>
I made a small JSFiddle to illustrate most of this (taking out the AJAX part): http://jsfiddle.net/dualspiral/2rXas/1/
The PHP needs changing slightly, you are not actually printing out the variable contents. The body variable shoud actually be assigned:
$body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>Name</b>: " . $name . "<br>
<b>Email</b>: " . $email . "<br>
<b>Message</b>: " . $messageContent . "<br>
<p>This form was submitted on <b>" . $timestamp . "</b></p>
";
and the last lines should read:
$headers = "From: " . $name . " <" . $email . "> \r\n";
$headers .= "Reply-To: " . $email . " \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>" . $body . "</body></html>";
if (mail($mailto, $subject, $message, $headers)) {
echo $success; // success
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>