I've created a contact page and a separate PHP page to receive the posted data. I'd like to make the PHP open in a popup window. I've tried methods online without any success, I can make the popup appear but i cant make the PHP send the data.
<!------Contact Page------->
<form method='post' action='sendemail.php' >
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" placeholder="Type Here" id="email">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<label>Human Verification</label>
<input name="human" placeholder="2 + 2 = ? " id="human">
<input id="submit" name="submit" type="submit" value="Submit">
</label>
</form>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = $email;
$to = 'my#email.com';
$subject = 'New Message';
$human = $_POST['human'];
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit']) {
if ($name != '' && $email != '') {
if ($human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<h4>Your message has been sent!</h4>';
} else {
echo '<h4>Something went wrong, go back and try again!</h4>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<h4>You answered the anti-spam question incorrectly!</h4>';
}
} else {
echo '<h4>You need to fill in all required fields!!</h4>';
}
}
?>
I think that if php script is in the same page of your form just in an hidden div you have to target the action with php self like
<form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"
So the variable POST is correctly set.
If you need to post in popup you can use ajax to send date or jquery to load an external page in your hidden div like:
$('#submit').click(function(){
load(external.php); //where your script is
});
In both cases it should work.
Since you are submitting the content and doing a POST/GET request to another page the modal won't work the way you are curretly using it. Since you are redirecting to your PHP code. You should use Javascript to display the pop-up.
Maybe adding a onclick to your submit button?
<input type='submit' onclick='alert("Message sent!")' />
Another option will be to use an Ajax call to you PHP file using the jquery ($.ajax();) and then use any library of your preference to display the pop-up window that you need. Maybe checking Jquery's or Bootstrap's modal could give you a hint, if you want to be complex approach.
<input type='submit' onclick='sendMessage()' />
function sendMessage(){
$.ajax({
//your stuff
});
$('.message').modal();
}
Especially for something like a form, I would make sure it doesn't rely on JavaScript in case the user has JavaScript turned off in their browser.
Why not keep it simple and have everything on the same page, with the error message showing above the form, and re-populate the fields with PHP?
Example:
<?php
// Check if coming from a POST
if ($_SERVER['REQUEST_METHOD']=='POST' && isset($_POST['submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = $email;
$to = 'you#youremail.com';
$subject = 'New Message';
$human = $_POST['human'];
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit']) {
if ($name != '' && $email != '') {
if ($human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<h4>Your message has been sent!</h4>';
} else {
echo '<h4>Something went wrong, go back and try again!</h4>';
} //endif
} else if ($_POST['submit'] && $human != '4') {
echo '<h4>You answered the anti-spam question incorrectly!</h4>';
}
} else {
echo '<h4>You need to fill in all required fields!!</h4>';
} //endif
} //endif
} //endif
?>
<form method='post' action='<?php echo $_SERVER['PHP_SELF']; ?>' >
<label>Name</label>
<input name="name" placeholder="Type Here" value="<?php if (isset($_POST['name'])) { echo $name;} ?>" >
<label>Email</label>
<input name="email" placeholder="Type Here" id="email" value="<?php if (isset($_POST['email'])) { echo $email;} ?>">
<label>Message</label>
<textarea name="message" placeholder="Type Here"><?php if (isset($_POST['message'])) { echo $message;} ?></textarea>
<label>Human Verification</label>
<input name="human" placeholder="2 + 2 = ? " id="human" value="<?php if (isset($_POST['human'])) { echo $human;} ?>">
<input id="submit" name="submit" type="submit" value="Submit">
</label>
</form>
Related
This is my first question on this site however I have been here millions of times looking for answer and I hope you can help me out this time as I wasn't able to figure it out myself.
I am not very skilled when it comes to coding but was hoping to amend the php contact form I have found online (it's free), the form itself is worki9ng but what I am struggling with is to set the errors to be printed on the main page where the form is, at them moment the yare displayed on the contact.php form which is where the php code is and I would like it all displayed in a div for example on index.php just under the form.
my contact.php
<?php
if (isset($_POST['submit'])) {}
$sendTo = "email address";
$subject = "msg content";
$headers = 'From: email address' . "\r\n";
$name = #$_POST['name'];
$email = #$_POST['email'];
$message = #$_POST['message'];
$okMessage = 'thank you';
$errorMessage = 'Please fill all the fields';
$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey = "----------------------------------------";
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
$emailText = "Name: $name \n Email: $email \n Message: $message";
if (isset($data->success) AND $data->success==true) {
mail($sendTo, $subject, $emailText, $headers);
$responseArray = $okMessage;
}
else
{
//verification failed
$responseArray = $errorMessage;
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray;
}
?>
<form method="post" name="contactform" action="contact.php" >
<div class="field half first">
<label for="name">name</label>
<input type="text" name="name" id="name" placeholder="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="email#email.com" />
</div>
<div class="field">
<label for="message">message</label>
<textarea name="message" id="msg" rows="4" placeholder="type your message here"></textarea>
</div>
<div class="g-recaptcha" data-sitekey="----------------------------------"></div>
<ul class="actions">
<li><input type="submit" value="send" class="special" /></li>
<li><input type="reset" value="reset pola" /></li>
</ul>
I have tried to use $_POST and $_GET to echo responseArray but I can't figure it out...
Is anyone able to provide a code I would have to use to display $okMessage and $errorMessage on index.php please?
Many thanks for all help
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);
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 got this piece of code from a free template and I followed all the instructions that came with it, everything seems fine but mail doesn't go trough.
HTML:
<!--Start Contact form -->
<form name="enq" method="post" action="email/" onsubmit="return validation();">
<fieldset>
<input type="text" name="name" id="name" value="" class="input-block-level" placeholder="Name.." />
<input type="text" name="email" id="email" value="" class="input-block-level" placeholder="Email.." />
<textarea rows="11" name="message" id="message" class="input-block-level" placeholder="Message.."></textarea>
<div class="actions">
<input type="submit" value="Send!" name="submit" id="submitButton" class="btn btn-info pull-right" title="Send!" />
</div>
</fieldset>
</form>
<!--End Contact form -->
PHP
<?php
if(isset($_POST['submit']))
{
$name = $_POST['name'];
$email = $_POST['email'];
$query = $_POST['message'];
$email_from = $name.'<'.$email.'>';
$to="email#sample.com";
$subject="Enquiry!";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "From: ".$email_from."\r\n";
$message="
Name:
$name
<br>
Email-Id:
$email
<br>
Message:
$query
";
if(mail($to,$subject,$message,$headers))
header("Location:../contact.php?msg=Successful Submission! Thankyou for contacting us.");
else
header("Location:../contact.php?msg=Error To send Email !");
//contact:-your-email#your-domain.com
}
?>
JavaScript
function validation()
{
var contactname=document.enq.name.value;
var name_exp=/^[A-Za-z\s]+$/;
if(contactname=='')
{
alert("Name Field Should Not Be Empty!");
document.enq.name.focus();
return false;
}
else if(!contactname.match(name_exp))
{
alert("Invalid Name field!");
document.enq.name.focus();
return false;
}
var email=document.enq.email.value;
//var email_exp=/^[A-Za-z0-9\.-_\$]+#[A-Za-z]+\.[a-z]{2,4}$/;
var email_exp=/^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(email=='')
{
alert("Please Enter Email-Id!");
document.enq.email.focus();
return false;
}
else if(!email.match(email_exp))
{
alert("Invalid Email ID !");
document.enq.email.focus();
return false;
}
var message=document.enq.message.value;
if(message=='')
{
alert("Query Field Should Not Be Empty!");
document.enq.message.focus();
return false;
}
return true;
}
I don't get any errors but mail doesn't simply go trough, checked spam etc.
I hope you changed
$to="email#sample.com";
to your actual e-mail.. I can't see anything else.
Seems it was due to webhost(mailserver). Works like a charm on another webhost.
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
}