I have a contact form on a website, and I am trying to submit the form using Google recaptcha v2, (select the boxes which have a certain image in them). At the moment, the form successfully sends and is received exactly as I want it to; however, I want to create a 'success' alert using Bootstrap, but for some reason this is not working.
If you take a look at the last part of my PHP file I have the following code snippet:
if($responseKeys["success"]) {
mail($to,$email_subject,$email_body,$headers);
} else {
echo '<h2>This has been unsuccessful according to our security checks</h2>';
}
And the 'mail' command seems to work. But anything else I try to put in there, for example
echo '<h2>success!</h2>'
for example, it doesn't get rendered. Ideally, upon a success submit I would like the following to take place:
The form to refresh to blank
A success alert using Bootstrap show at the top of the page
But I am having trouble implementing these.
Here is the entire PHP file:
<?php
$Fname = $_POST['Fname'];
$Lname = $_POST['Lname'];
$email = $_POST['email'];
$number = $_POST['number'];
$company = $_POST['company'];
$message = $_POST['message'];
$email_from = "Your website";
$email_subject = "You have a new submission form from Your Website";
$email_body = "First Name: $Fname.\n".
"Last Name: $Lname.\n".
"Email Address: $email.\n".
"Telephone Number: $number.\n".
"Company Name: $company.\n".
"Message: $message.\n";
$to = "hello#yourwebsite.co.uk";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $email \r\n";
$captcha;
if(isset($_POST['email'])){
$email=$_POST['email'];
}
if(isset($_POST['message'])){
$message=$_POST['message'];
}
if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Please check the "I am not a robot" checkbox"</h2>';
exit;
}
$secretKey = 'somesecretlettersandnumbers';
$ip = $_SERVER['REMOTE_ADDR'];
// post request to the server
$url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secretKey) . '&response=' . urlencode($captcha);
$response = file_get_contents($url);
$responseKeys = json_decode($response, true);
// should return JSON with success as true
if($responseKeys["success"]) {
mail($to,$email_subject,$email_body,$headers);
} else {
echo '<h2>This has been unsuccessful according to our security checks</h2>';
}
?>
And here is the HTML form:
<form action="contact.php" id="contact-form" method="POST" role="form">
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_name">First Name*</label>
<input id="form_name" type="text" class="form-control" name="Fname" placeholder="David" required data-error='Please fill in your first name'>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_lastname">Last name*</label>
<input id="form_lastname" type="text" class="form-control" name="Lname" placeholder="Beckham" required data-error="Please fill in your last name">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_email">Email address*</label>
<input id="form_email" type="email" class="form-control" name="email" placeholder="becks#example.com" required data-error="Please provide your email address">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_number">Contact number*</label>
<input id="form_number" type="number" class="form-control" name="number" placeholder="01234567890" required data-error="Please provide a contact number">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_company">Your company name</label>
<input id="form_company" type="text" class="form-control" name="company" placeholder="Ex-footballers r us">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_message">Your message*</label>
<textarea id="form_message" class="form-control" name="message" cols="30" rows="10" placeholder="Here's my message" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="g-recaptcha" data-sitekey="datasitekeynumbersandletters"></div>
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" class="btn btn-outline-brand btn-block" name="submit" value="Send enquiry">
</div>
</div>
</form>
I have tried following this tutorial:
Bootstrap success alert upon form submition via javascript
Edited to add the only JS I have for this file:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
without success.
Thank you in advance
Hope this kind of questions are answered lot many times but I have went through most of them and din't found any solution please help to solve my problem.
I had a html form
<form id="main-contact-form" class="contact-form" enctype="text/plain" 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="vname" id="vname" class="form-control" required="required">
</div>
<div class="form-group">
<label>Email *</label>
<input type="email" name="vemail" id="vemail" class="form-control" required="required">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" 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="vsubject" id="vsubject" class="form-control" required="required">
</div>
<div class="form-group">
<label>Message *</label>
<textarea name="vmessage" 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>
and here is my php code for sending email
<?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['vname']));
$email = #trim(stripslashes($_POST['vemail']));
$subject = #trim(stripslashes($_POST['vsubject']));
$message = #trim(stripslashes($_POST['vmessage']));
$email_from = $email;
$email_to = 'myemail';//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();
Giving data and clicking on submit sending the emails but receiving blank data
Name:
Email:
Subject:
Message:
(unknown sender)
(no subject) - Name: Email: Subject: Message:
please help as I am very new to PHP
I am using CENTOS web panel with Apache
I have built this contact form for my website
but I am not getting the name in the email the contact form sends to me.
Also the contact form is super slow and I get the emails after a long delay of about 5-10 minutes every time I send a lead in the contact form.
Is this something I can fix?
I am using word press. Is it the problem/.
<div class="span4" id="fc">
<?php
$action = ( array_key_exists( 'action', $_REQUEST) ? $_REQUEST['action'] : "" );
if ($action=="") /* display the contact form */
{
?>
<h6 class="form_head">לפרטים / רכישה חייגו : 077-41-800-74 או מלאו את הטופס</h6>
<form class="cf" action="" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
<div class="half right cf">
<input type="text" id="input-name" placeholder="שם*" name="name" required>
<input type="email" id="input-email" placeholder="אימייל" name="email" >
</div>
<div class="half left cf">
<input type="text" id="input-subject" placeholder="פלאפון*" name="message" required>
<input type="submit" value="קבל מידע נוסף" id="input-submit" name="submit">
</div>
</form>
<?php
}
else /* send the submitted data */
{
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$message=$_REQUEST['message'];
if (($name=="")||($message==""))
{
}
else{
$from="From: $name<$email>\r\nReturn-path: $email";
$subject="Message sent using your contact form";
mail("xxx#gmail.com", $subject, $message, $from);
header('Location: http://newoffice.co.il/%D7%AA%D7%95%D7%93%D7%94-%D7%A9%D7%A4%D7%A0%D7%99%D7%AA-%D7%90%D7%9C%D7%99%D7%A0%D7%95/');
exit();
}
}
?>
</div>
I have a contact form which sends an email once submitted and displays an alert successfully when sent. My problem was 1) after its sent the email form still has content. 2) If I refresh the page the email is sent again with the previous details. In order to solve this I used the below code in php which is doing the job of refreshing with out sending an email.
header("Location: contact.php");
exit;
Now my problem is The alert is not displayed anymore which is true because the alert is in my HTML and header refreshes the page and it never reaches the alert in HTML(displayed using php echo). Here is the HTML Code :
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="emailForm">
<h1 class="center">Email Form</h1>
<?php echo $result; //header( "Location: contact.php"); //exit; ?>
<p>Please get in touch ! I will get back to you as soon as I can !!</p>
<form method="post" id="contactForm">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="<?php echo $_POST['name'] ?>" />
</div>
<div class="form-group">
<label for="email">Your Email</label>
<input type="email" name="email" class="form-control" placeholder="Your Email" value="<?php echo $_POST['email'] ?>" />
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" name="message">
<?php echo $_POST[ 'message'] ?>
</textarea>
</div>
<input type="submit" name="submit" id="send" class="btn btn-success btn-lg center" value="Submit" />
</form>
</div>
</div>
</div>
Here is the PHP code:
<?php
if($_POST['submit']) {
if(!$_POST['name']){
$error.="<br>Please enter your name";
}
if(!$_POST['email']){
$error.="<br>Please enter your email address";
}
if(!$_POST['message']){
$error.="<br>Please enter a message";
}
if ($_POST['email']!= "" AND !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$error.="<br>Please enter a valid email address";
}
if( $error )
{
$result='<div class="alert alert-danger"><strong>There were error(s):'.$error.'</strong></div>';
}
else {
if(mail("madistackcloud#gmail.com","Message from Deepak", "Name: ".$_POST['name']."Email: ".$_POST['email']."Message: ".$_POST['message'])) {
$result='<div class="alert alert-success alert-dismissible"><strong>Thank you! I\'ll be in touch.</strong></div>';
}
else
{
$result='<div class="alert alert-danger alert-dismissible"><strong>Oops! Something went wrong. Please try again !</strong></div>';
}
}
}
?>
Is there any workaround for this or any other method which can do the job. Kindly help.
Change your form to
<form method="post" id="contactForm">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" />
</div>
<div class="form-group">
<label for="email">Your Email</label>
<input type="email" name="email" class="form-control" placeholder="Your Email" value="" />
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" name="message"></textarea>
</div>
<input type="submit" name="submit" id="send" class="btn btn-success btn-lg center" value="Submit" />
</form>
If you don't want to show the content sent, dont use echo $POST on the value of the inputs.
You're always echoing the post data in the html section. You only want to echo data if there is an error.
value="<?php echo $_POST['name'] ?>"
in the control code above do something like
$name = cleanInput($_POST['name']);
$email = cleanInput($_POST['name']);
// etc...
Then in your
if( $error )
...
else
{
$name = "";
$email = "";
sendMail();
// etc...
and then back in your html:
value="<?php echo $name; ?>"
Why do you do this: value="<?php echo $_POST['email']? This sets the value of the input field to what the user inputted. This means next time you load your page this value is visible and thus will be emailed when transmitted.
I have an HTML page with a form that posts to a sendmail.php file but when I click submit I get sent to the blank php page with the words "Email sent!".
I would like to click Submit and then instead of going into a separate page, it stays on the same page and the submit button changes color and reads "Message Sent". How do I do this?
HTML Code:
<form action="sendmail.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
<div class="row half">
<div class="6u">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="6u">
<input type="text" name="number" placeholder="Number" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li>
<input type="submit" value="Send Message" />
</li>
</ul>
</div>
</div>
</form>
PHP Code:
<?php
{
$name=$_REQUEST['name'];
$number=$_REQUEST['number'];
$message=$_REQUEST['message'];
$headers = "From: $name<form#site.com>\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if (($name=="")||($number=="")||($message==""))
{
echo "All fields are required, please fill the form again.";
}
else{
$subject="Website Contact Form";
mail("me#gmail.com", $subject, "<font size='+1'>Hello, this is a message from your website's contact form.<br><br>This message was sent by <b>".$name.".</b><br>The phone number they provided was <b>".$number.".</b><br><br>Their message is as follows:<br><b>".$message."</b></font>", $headers);
echo "Email sent!";
}
}
?>
Thanks for the help!
get jquery library in your head section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
then you want to write ajax method
sample:
$(document).ready(function(){
$('form').submit(function(e){
var arr;
e.preventDefault();
$.ajax({
type: 'POST',
url: "sendmail.php",
//this specifies the data to be sent to server through php you should modify accordingly
data:{name:$('input[name="name"]').val()},
async:true,
success: function(result){
//do something with the result if request is successful
}
});
});
});
Change action in form tag.
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
<div class="row half">
<div class="6u">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="6u">
<input type="text" name="number" placeholder="Number" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li>
<input type="submit" value="Send Message" />
</li>
</ul>
</div>
</div>
</form>
<?php
if(isset($_REQUEST['name']) && ($_REQUEST['name']!="")|| isset($_REQUEST['number']) && ($_REQUEST['number']!="")|| isset($_REQUEST['message']) && ($_REQUEST['message']!=""))
{
$name=$_REQUEST['name'];
$number=$_REQUEST['number'];
$message=$_REQUEST['message'];
$headers = "From: $name<form#site.com>\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if (($name=="")||($number=="")||($message==""))
{
echo "All fields are required, please fill the form again.";
}
else{
$subject="Website Contact Form";
mail("me#gmail.com", $subject, "<font size='+1'>Hello, this is a message from your website's contact form.<br><br>This message was sent by <b>".$name.".</b><br>The phone number they provided was <b>".$number.".</b><br><br>Their message is as follows:<br><b>".$message."</b></font>", $headers);
echo "Email sent!";
}
}
else{
print_r(22);exit;
}
?>
so what you need is jquery.form, it can help you submit the form by ajax.
You can use JQuery for this purpose.
<form id="noRedirection" enctype="multipart/form-data" method="POST">
<div class="row half">
<div class="6u">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="6u">
<input type="text" name="number" placeholder="Number" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li>
<input id="submit" type="submit" value="Send Message" />
</li>
</ul>
</div>
</div>
</form>
<script>
$('#noRedirection').submit(function() {
var post_data = $('#noRedirection').serialize();
$.post('sendMail.php', post_data, function(data) {
$("#submit").text('Message Sent').css("color","red");
});
});
</script>
All you need to learn is how to make ajax calls.
Refer this link from stackoverflow itself . Here you can see how all variables and of data regarding mail is sent through ajax call to another page for mailing.
Click Here
I hope this will help you. you no need to give an action. see my example it will stay same page but request will go another page. just copy and paste this code and don't run on localhost because email is not send on localhost:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'sendmail.php',
data: $('form').serialize(),
success: function (d) {
alert(d);
}
});
});
});
</script>
<form action="" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
<div class="row half">
<div class="6u">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="6u">
<input type="text" name="email" placeholder="Email" />
</div>
<div class="6u">
<input type="text" name="number" placeholder="Number" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li>
<input type="submit" name="send" value="Send Message" />
</li>
</ul>
</div>
</div>
</form>
make new page of sendmail.php and paste this code in that file:
echo $name = $_POST['name'];
echo $number = $_POST['number'];
echo $email = $_POST['email'];
echo $message = $_POST['message'];
$headers = "From: $name<form#site.com>\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if (($name=="")||($number=="")||($message=="") || ($email=="")) {
echo "All fields are required, please fill again.";
} else {
$subject="Website Contact Form";
mail($email, $subject, "<font size='+1'>Hello, this is a message from your website's contact form.<br><br>This message was sent by <b>".$name.".</b><br>The phone number they provided was <b>".$number.".</b><br><br>Their message is as follows:<br><b>".$message."</b></font>", $headers);
echo "Email sent!";
}
<form action="sendmail.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
You're already using php, so there's no reason at all to use jquery as well, just take the code from your sendmail.php file and put it in the top of this. Using javascript for core page functionality used to be considered bad practice, it's certainly annoying to users with javascript blockers running, makes the pages very hard to use, stackoverflow does that too.
Rather than submit to the other file, just delete the 'action="sendmail.php"' which will then make the page submit to itself, or put in the actual url of the page if it's got a static url that you know. Or use:
action="<?php echo $_SERVER['REQUEST_URI'];?>"
which sets it to whatever the uri of the page is, that's useful for things that generate the pages from query string data.
Then you check to see the following (how did stackoverflow get so popular without having good code blocks?)
if ( isset($_POST['action']) ) {
set color to red or whatever...
and that's all.
Another which is also help you:
if(isset($_POST['name']) && ($_POST['name']!="")|| isset($_POST['number']) && ($_POST['number']!="")|| isset($_POST['message']) && ($_POST['message']!="")){
$name=$_POST['name'];
$number=$_POST['number'];
$message=$_POST['message'];
$headers = "From: $name<form#site.com>\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if (($name=="")||($number=="")||($message=="")) {
echo "All fields are required, please fill the form again.";
} else{
$subject="Website Contact Form";
$to = 'admin#gmail.com';
mail($to, $subject, "<font size='+1'>Hello, this is a message from your website's contact form.<br><br>This message was sent by <b>".$name.".</b><br>The phone number they provided was <b>".$number.".</b><br><br>Their message is as follows:<br><b>".$message."</b></font>", $headers);
echo "Email sent!";
}
}
<form action="" method="POST">
<input type="hidden" name="action" value="submit">
<div class="row half">
<div class="6u">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="6u">
<input type="text" name="number" placeholder="Number" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li>
<input type="submit" value="Send Message" />
</li>
</ul>
</div>
</div>
</form>