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);
Related
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.
I have looked at a few solutions on here trying different ways of doing this but none are working for me.
Here is my form:
<form action="<?PHP echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" name="contact" role="form">
<?PHP //if error has occured then echo the error in red
if(isset($errorMsg) && $errorMsg) {
echo "<p style=\"color: red;\">*",htmlspecialchars($errorMsg),"</p>\n\n";
}
?>
<label for="name"><b>Name:</b></label>
<input type="text" name="name" id="name" placeholder="Enter full name" value="<?PHP if(isset($_POST['name'])) echo htmlspecialchars($_POST['name']); ?>">
<label for="email"><b>Email:</b></label>
<input type="text" name="email" id="email" placeholder="Enter a valid email address..." value="<?PHP if(isset($_POST['email'])) echo htmlspecialchars($_POST['email']); ?>">
<label><b>Subject:</b></label>
<input type="text" name="subject" id="subject" placeholder="Please enter a subject matter" value="<?PHP if(isset($_POST['subject'])) echo htmlspecialchars($_POST['subject']); ?>">
<label for="query"><b>Query:</b></label>
<textarea id="query" placeholder="Please write your message here..." name="query" value="<?PHP if(isset($_POST['query']))echo htmlspecialchars($_POST['query']);?>">
</textarea>
<input type="submit" name="submit" id="submit" value="Submit" class="style-button">
</form>
I am using a one page website so the contact form is at the bottom of the page.
How can i show a thank you message inside the form when it has been submitted and went through validation - without the page going back to the top?
PHP code:
<?php
// if submit is clicked then assign variables
if($_POST && isset($_POST['submit'], $_POST['name'], $_POST['email'], $_POST['subject'], $_POST['query'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$query = $_POST['query'];
//making sure the page goes to the contact form with the errors instead of the top of the page
if(!isset($_POST['$errorMsg']))
{
?>
<script>
window.location.hash = '#contact-form';
</script>
<?php
}
// if name is not entered then display errorMsg
if (!$name) {
$errorMsg = "Please enter your name";
}
// if email is not entered then display errorMsg
elseif (!$email || !preg_match("/^\S+#\S+$/", $email)) {
$errorMsg = "Please enter a valid email address";
}
// If the subject has not entered then display errorMsg
elseif (!$subject) {
$errorMsg = "Please enter a subject";
}
// if query is not entered then display errorMsg
elseif (!$query) {
$errorMsg = "Please enter your query";
}
else {
//send email and redirect to confirmation page
$toemail = "email#example.com";
$subject2 = "Message recieved from ". $name."";
$headers = "MIME-Version: 1.0\n"
."From: \"".$name."\" <".$email.">\n"
."Content-type: text/html; charset-iso-8859-1\n";
$body = "Email: ".$email."<br>\n"
."Subject: ".$subject."<br>\n"
."email: ".$email."<br>\n"
."query: ".$query."<br>\n"
;
mail($toemail, $subject, $body, $headers);
if(mail($toemail, $subject, $body, $headers)){
$toemail =".$email";
$subject = "Confirmation Email";
$body = "Your email has been sent";
header("location: index.php");
}
}}
?>
Somewhere, hopefully above the HTML, you are processing the form post. So you should be setting $errorMsg in there.
Rule of thumb for a self-submitting web page: logic before view. Also, to avoid the if() statement, initialize $errorMsg on every page load.
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
}
I have a simple contact form I'm trying to implement but I'm getting an "incorrect function" error when I try to launch it. My code below is as follows, and when I click submit, it redirects to
http://mywebsite.com/contactme.php
but with the text "Incorrect function" and that's it. My debug on firefox shows the following error:
POST http://www.mywebsite.com/v/vspfiles/contactform/contactme.php [HTTP/1.1 405 Method Not Allowed 33ms]
13:54:52.368 The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range.
The character encoding of the page must be declared in the document or in the transfer protocol.
I am using volusion software if that helps. But I have no idea if the error is in my code or because my webhost won't allow the function. Can someone give me some insight? I have tried the "contactme.php" page with and without the doctype declared. My two files are below. I do not have an "error.htm" page.
contact.html:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
</head>
<body >
<div id="contact-area">
<form method="post" action="/v/vspfiles/contactform/contactme.php">
<h3>Contact us</h3>
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
<label for="City">City:</label>
<input type="text" name="City" id="City" />
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email" />
<label for="Message">Message:</label><br />
<textarea name="Message" rows="20" cols="20" id="Message"></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>
<div style="clear: both;"></div>
</div>
</body>
</html>
contactme.php:
<?php
$EmailFrom = "email#gmail.com";
$EmailTo = "email#gmail.com";
$Subject = "contact form";
$Name = Trim(stripslashes($_POST['Name']));
$Tel = Trim(stripslashes($_POST['Tel']));
$Email = Trim(stripslashes($_POST['Email']));
$Message = Trim(stripslashes($_POST['Message']));
// validation
$validationOK=true;
if (!$validationOK) {
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
exit;
}
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Tel: ";
$Body .= $Tel;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
// informs user they submitted, redirects to homepage
if ($success){
alert("Thank you for your interest in our multiple sample processing system. A member of the Claremont Bio team will respond to you shortly.");
window.location.assign(location.hostname);
}
else{
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
}
?>
alert("Thank you for your interest in our multiple sample processing system. A member of the Claremont Bio team will respond to you shortly.");
window.location.assign(location.hostname);
This is not valid php code, it is javascript. It definitely should not be in your php script.
As an alternative, in your if($success) condition you could redirect to a "success.php" page. For example:
if($success){
header("Location: http://www.mydomain.com/success.php");
}
An example of a contact.php page I use is as follows, note as per Jorge's comments, I make use of echoing the command...
<?php
// configuration
require("../includes/config.php");
// if form was submitted
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
// submission is sanitised using the "query" function
$name = check_input($_POST["name"]);
$email = check_input($_POST["email"]);
$phone = check_input($_POST["phone"]);
$message = check_input($_POST["message"]);
$category = $_POST["category"];
switch($category)
{
// do some checking here
}
// insert user into db
// Success Message
$success = "
<div class=\"row-fluid\">
<div class=\"span11\">
<div class=\"alert alert-block alert-success\" id=\"thanks\">
<h4>Got it!</h4>
<br/>
<p>I'll be in touch within 24 hours. <strong> Promise.</strong></p>
<br/>
<p>In the meantime, why not check out my Facebook page...</p>
<br/>
www.facebook.com/myfacebooksite
</div>
</div>
</div>
";
$subject = 'New Website Message!';
$mailto = 'your#email.com';
// 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>Phone</b>: $phone<br>
<b>Category</b>: $category<br>
<b>Message:</b>: $message<br>
";
$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";
$mailtext = "<html><body>$body</body></html>";
if (mail($mailto, $subject, $mailtext, $headers)) {
echo "$success"; // success
}
else
{
echo 'Form submission failed. Please try again...'; // failure
}
}
else
{
// else render form
redirect("/index.html");
}
?>
edit:
my contact form page has the following js:
// do the mailing
$('#contact_form').on('submit', function(e) {
e.preventDefault(); //Prevents default submit
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$.ajax({
type: 'POST',
url: 'contact.php',
data: post_data,
success: function(msg) {
$(form).fadeOut(200, function(){
form.html(msg).fadeIn();
});
}
});
});
Hope that helps steer you...
So turns out this isn't my error, this is my webhost. Had to call them up and they told me they don't support PHP currently. so I'm off to rewrite this is javascript. I'll give the answer to Jason as his was the most technically correct and pointed out the error. Thanks guys.