Contact Form Posting - javascript

I have created a html, php and js files for my Contact Form.
I upload it to my Hosting Provider just for testing as I don't have a live server.
When I fill out all required fields and hit Submit, I don't get information send to email address.
This is just a simple form so that customers can send me their query and details.
$(function() {
$(".form-control").on('focus', function() {
$(this).parents(".form-group").addClass('focused');
});
$(".form-control").on('blur', function() {
$(this).parents(".form-group").removeClass('focused');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
<form action="form-handler.php" method="POST" class="form">
<div class="form-group">
<label for="name" class="form-label">Your Name</label>
<input type="text" class="form-control" id="name" name="Name" placeholder="Jane Doe" tabindex="1" required>
</div>
<div class="form-group">
<label for="email" class="form-label">Your Email</label>
<input type="text" class="form-control" id="email" name="Email" placeholder="Jane#Doe.com" tabindex="2" required>
</div>
<div class="form-group">
<label for="subject" class="form-label">Subject</label>
<input type="text" class="form-control" id="subject" name="Subject" placeholder="Subject" tabindex="3" required>
</div>
<div class="form-group">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" name="message" id="message" cols="50" rows="5" placeholder="Write your message here..." tabindex="4"></textarea>
</div>
<div>
<button class="btn" type="submit">Send Message</button>
</div>
</form>
</div>
</body>
</html>
PHP
<?php
$message_sent = false;
if (isset($_POST['email']) && $_POST['email'] != '')
{
if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL))
{
//submit the form
$userName = $_POST['name'];
$userEmail = $_POST['email'];
$messageSubject = $_POST['subject'];
$message = $_POST['message'];
$to = "...#....com";
$body = "";
$body = "From:" . $userName . "\r\n";
$body = "Email:" . $userEmail . "\r\n";
$body = "Message:" . $message . "\r\n";
mail($to, $messageSubject, $body);
$message_sent = true;
}
}
?>

Your code is
$body = "From:" . $userName . "\r\n";
$body = "Email:" . $userEmail . "\r\n";
$body = "Message:" . $message . "\r\n";
mail($to, $messageSubject, $body);
And from documentation I saw that a correct way to send additional headers like FROM is the folloewing:
$to = 'nobody#example.com';
$subject = 'the subject';
$message = 'hello';
$headers = 'From: webmaster#example.com' . "\r\n" .
'Reply-To: webmaster#example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
Another more complete way is the following:
// To send HTML mail, the Content-type header must be set
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=iso-8859-1';
// Additional headers
$headers[] = 'To: Mary <mary#example.com>, Kelly <kelly#example.com>';
$headers[] = 'From: Birthday Reminder <birthday#example.com>';
$headers[] = 'Cc: birthdayarchive#example.com';
$headers[] = 'Bcc: birthdaycheck#example.com';
// Mail it
mail($to, $subject, $message, implode("\r\n", $headers));
Finally, .. instead of code this:
mail($to, $messageSubject, $body);
$message_sent = true;
You should code this
$message_sent = mail($to, $messageSubject, $body);
Because your code assumes all works fine but mail function already return true or false if mail is sent or not.
But the most important stuff I saw is that your form ha inputs named:
Name
Email
Subject
message
and your php code check for
$_POST['name']; // different from Name
$_POST['email']; // different from Email
$_POST['subject']; // different rom Subject
$_POST['message']; // ok
So, ... if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) should always return false because $_POST['email'] email not exists.

Related

Google Recaptcha doing strange things on iOS Safari Browser

I think my case is a bit of an oddity... I have a form that is verified by Google Recaptcha. The submit button is disabled until the recaptcha has been interacted with, using a data-callback and some JS. I was just trying out my site on my iOS device using the Safari browser, and I did the Recaptcha verification and a green check appeared, like normal. Then when I scrolled, the container div that the form was in disappeared, and then the entire form was greyed out. It seemed like it went behind the site background.
This is a screenshot of the bug:
So, I am confused to say the least. I have not been able to find any similar issues in the searches I have done. The form is integrated with PHP, here's the code:
<?php
if (isset($_REQUEST['email'])) {
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$recaptcha_secret = "my_secret_key_was_here";
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']);
$response = json_decode($response, true);
if ($response["success"] === true) {
$to = "someemail#example.com";
$subject = "Contact Form";
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$email = $_REQUEST['email'];
$comments = $_REQUEST['comments'];
$message = "First Name: \t";
$message .= $firstname;
$message .= "\n";
$message .= "Last Name: \t";
$message .= $lastname;
$message .= "\n";
$message .= "Email: \t";
$message .= $email;
$message .= "\n";
$message .= "Message: \t";
$message .= $comments;
$message .= "\n";
mail($to, $subject, $message, "From:" . $email);
header("Location: sent.html");
} else {
header("Location: failed.html");
}
}
} else {
?>
The else opens up to the page HTML, displaying the page if the conditions are not met. Here's my script:
$(document).ready(function() {
$('#submitbutton').prop( "disabled", true ).attr('title', "Please check the catchpa before submitting the form");
});
var enableBtn = function() {
$('#submitbutton').prop( "disabled", false ).attr('title', "Submit");
}
And here's my form HTML:
<form method="post" action="new.php">
<label for="firstname">First Name:</label>
<input name="firstname" required type="text" />
<label for="lastname">Last Name:</label>
<input name="lastname" required type="text" />
<label for="email">Email Address:</label>
<input name="email" required type="email" />
<label for="comments">Message:</label>
<textarea name="comments" required></textarea>
<div class="center-captcha">
<div class="g-recaptcha" data-sitekey="my_site_key_was_here" data-callback="enableBtn"></div>
</div>
<button class="send-button" id="submitbutton">Submit</button>
</form>
Any help would be greatly appreciated.
Solved it with the answer given on this thread:
Fixed positioning/z-index issue in mobile safari
Apparently my background was being translated to the front of the page, covering up the form inputs and other content.
Adding this line fixed it:
-webkit-transform: translate3d(0,0,0);

php form only sending blank emails

Hi there I am having some trouble getting my php form to actually forward the information that is put in.
I have been struggling for a couple of days now and researched a lot online but unfortunately haven't found the answer.
The form works and redirects with a success message, is sent to my websites email then forwarded to a personal email. This is all instant but I only seem to receive blank emails.
Here is the php code:
<?php
$from = "admin#abievetattoo.com";
$to = "abievetattoo#gmail.com";
$subject = "Booking Enquiry";
$cf_name = Trim(stripslashes($_POST['cf_name']));
$cf_email = Trim(stripslashes($_POST['cf_email']));
$cf_message = Trim(stripslashes($_POST['cf_message']));
$validationOK=true;
if (!$validationOK) {
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
exit;
}
$Body = 'MIME-Version: 1.0' . "\r\n";
$Body .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$Body .= 'From: '. $from . "\r\n" . 'X-Mailer: PHP/' . phpversion();
$Body = "";
$Body = "Name: ";
$Body = $cf_name;
$Body = "\n";
$Body = "eMail: ";
$Body = $cf_email;
$Body = "\n";
$Body = "Message: ";
$Body = $cf_message;
$Body = "\n";
$success = mail($to, $subject, $Body, "From: $from" . "\r\n");
?>
<script type="text/javascript">
alert("Thank you for the message. Abi will respond shortly.");
window.location = 'http://abievetattoo.com/contact.html';
</script>
Here is the html code:
<form action="contact.php" method="post">
<p>Your name</p>
<input type="text" name="cf_name" required>
<br>
<p>Your e-mail</p>
<input type="email" name="cf_email" required>
<br>
<p>Message</p>
<input type="text" name="cf_message">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form>
Any help would be very much appreciated, thanks.

Send contents of contact form direct to email via php [duplicate]

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.

Contact form not responding

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).

add email validation prior to submitting on php form

I have the following simple form that I am trying to get the email validation error to
show up within the form to show the error prior to submitting.
Is there a way to do this with PHP or do I have to use JSON?
If I have to use JSON, can anyone show me how to do this?
Thanks in advance.
form.html:
<form method="post" name="form" action="form.php">
<p>Robot: <input type="text" name="robot" ></p>
<p>Name: <input type="text" name="name" ></p>
<p>Email: <input type="email" name="email"></p>
<p>Phone: <input type="telephone" name="phone"></p>
<p>Message: <textarea name="message"></textarea></p>
<p><input type="submit" value="Send Form"></p>
</form>
<div id="error"></div>
form.php
<?php
// send to and from
$to = "email#example.com";
$headers = "From: email#example.com \r\n";
$headers .= "Reply-To: email#example.com \r\n";
// form inputs
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$robot = $_POST['robot'];
// email message
$email_subject = "Web Contact Message";
$email_body =
"A message from your website contact form \n\n".
"Email: $email \n\n".
"Phone: $phone \n\n".
"From: $name \n\n".
"Message: \n".
"$message \n";
// honeypot
if($robot)
header( "Location: http://www.example.com/nothankyou.html" );
else{
//validate email
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
{
echo '<div id="error">Please Enter a Valid Email</div>';
}
else
{
// send it
mail($to,$email_subject,$email_body,$headers);
header( "Location: http://www.example.com/thankyou.html" );
}
}
?>
You could try using a javascript/jquery plugin to do your front end validation (ex. http://jqueryvalidation.org/, http://bootstrapvalidator.com/). If you still wanted to keep your existing code I'd suggest something like:
First, merge your form.html to form.php
Make sure your php mailing code stays at the top of the file because php headers cannot have any output done before calling them.
<?php
if (count($_POST)) {
// send to and from
$to = "email#example.com";
$headers = "From: email#example.com \r\n";
$headers .= "Reply-To: email#example.com \r\n";
// form inputs
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$robot = $_POST['robot'];
// email message
$email_subject = "Web Contact Message";
$email_body = "A message from your website contact form \n\n" .
"Email: $email \n\n" .
"Phone: $phone \n\n" .
"From: $name \n\n" .
"Message: \n" .
"$message \n";
// honeypot
if ($robot)
header("Location: http://www.example.com/nothankyou.html");
else {
//validate email
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
header("Location: form.php?error=email_error");
} else {
// send it
mail($to, $email_subject, $email_body, $headers);
header("Location: http://www.example.com/thankyou.html");
}
}
}
?>
<form method="post" name="form" action="">
<p>Robot: <input type="text" name="robot" ></p>
<p>Name: <input type="text" name="name" ></p>
<p>Email: <input type="email" name="email"></p>
<p>Phone: <input type="telephone" name="phone"></p>
<p>Message: <textarea name="message"></textarea></p>
<p><input type="submit" value="Send Form"></p>
</form>
<?php
if (isset($_GET["error"]) && $_GET["error"] == "email_error") {
?>
<div id="error">Please Enter a Valid Email</div>
<?php
}

Categories