I myself am not good with PHP so I am wondering If someone on here can help me with my issue. My main page is the following code
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leave a Message</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="font-awesome.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
<body id="particles">
<body id="particles">
<div class="main">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title">Leave a message</h4>
</div>
<div class="modal-body">
<form method="post" action="contact_me.php">
<div class="form-group">
<label>Your name</label>
<br>
<input type="text" class-"form-control" name="name" required="" style="width: 100%;">
</div>
<div class="form-group">
<label>Your email</label>
<br>
<input type="text" class-"form-control" name="email" required="" style="width: 100%;">
</div>
<div class="form-group">
<label>Your message</label>
<br>
<textarea type="text" class-"form-control" name="message" required="" style="width: 100%; max-width: 100%; min-height: 100px"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info" style="width: 100%;">Submit</button>
</div>
</form>
</div>
<div class="modal-footer" style="text-align: center;">
<small>Copyright © 2016. All Rights Reserved.</small>
</div>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="particles.jquery.min.js"></script>
<script src="custom.min.js"></script>
</body>
</html>
My action is contact_me.php and that code is
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
header( 'Location: http://www.wotm8.net/error-pages/contact' ) ;
return false;
} header('Location: ' . $_SERVER['HTTP_REFERER']);
$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$message = strip_tags(htmlspecialchars($_POST['message']));
// Create the email and send the message
$to = 'me#lolnick.com'; // Add your email address inbetween the '' replacing yourname#yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nMessage:\n$message";
$headers = "From: noreply#yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply#yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
I am wondering If someone can teach me how to add alerts. For example If a error Is found It will show up a Red Box of Text and say Error. If the contact form is correct than It will show a Green Box of Text and say Contact Form Sent.
Related
I have created a web php web page with html and php code in, see below.
When I submit my form, it sends me an email and a success of fail message appears. So, everything works well.
My problem: I want to make the success or failure message pop-up or be a modal, but I don't know how. Where should I change the code and add the modal?
I have php at the top and then my HTML form. My form also has the google recaptcha verification tool. I just want to add a modal, but I do not know how and where to add the code.
<?php
error_reporting(0);
$msg="";
if (isset($_POST['submit'])) {
$to = "aleciadeklerk.119#gmail.com";
$subject = "Form Submission";
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$check = $_POST['check'];
$msgBody = 'Name: '.$name.'Message: '.$message.'Subscribe: '.$check.'E-mail: '.$email;
$headers = 'From: '.$email;
$secretKey = "6LdXbq8UAAAAAM1B79Yz2IPgcTuIynBXeJMF2ZLY";
$responseKey = $_POST['g-recaptcha-response'];
$url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey";
$response = file_get_contents($url);
$response = json_decode($response);
if ($response->success) {
if (mail($to, $subject, $msgBody, $headers)) {
$msg="Message sent successfully!";
}
else {
$msg="Failed to send the message. Please try again.";
}
}
else {
$msg="Verification Failed";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Dibene Solutions</title>
<link rel = "icon" type = "image/png" href = "images/dibene_icon_dark.png">
</head>
<body>
<div>
<div class="container-fluid" id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<a name="contact"><h2>Contact us</h2></a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" class="p-2">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Enter name" required>
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Enter e-mail" required>
</div>
<div class="form-group">
<textarea name="message" rows="4" class="form-control" placeholder="Write your message" required></textarea>
</div>
<div class="form-group">
<label><input type="checkbox" name="check" class="form-control" checked>Subscribe to monthly newsletter.</label>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LdXbq8UAAAAAAf7mQJqfbBbLWA36c1Qiin8EhBp"></div>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Send" class="btn btn-block">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
My aim is to click the submit button and then a modal pops up with a success or failure message.
if you want to use modal as an information messages, put your modal inside your html after the body tag and then call it with a javascript after the event success or failed.
javascript used for modal: $('#myModal').modal(options).
or if you want simplier way, you can use javascript alert() to inform the success or failed event
I made few changes to the code. I included bootstrap modal code and javascript function to call pop up. check this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Dibene Solutions</title>
<link rel = "icon" type = "image/png" href = "images/dibene_icon_dark.png">
</head>
<body>
<div>
<div class="container-fluid" id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<a name="contact"><h2>Contact us</h2></a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" class="p-2">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Enter name" required>
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Enter e-mail" required>
</div>
<div class="form-group">
<textarea name="message" rows="4" class="form-control" placeholder="Write your message" required></textarea>
</div>
<div class="form-group">
<label><input type="checkbox" name="check" class="form-control" checked>Subscribe to monthly newsletter.</label>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LdXbq8UAAAAAAf7mQJqfbBbLWA36c1Qiin8EhBp"></div>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Send" class="btn btn-block">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p id="txtMsg"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function popup(msg){
document.getElementById("txtMsg").innerHTML = msg;
$("#myModal").modal();
}
</script>
<?php
error_reporting(0);
$msg="";
if (isset($_POST['submit'])) {
$to = "aleciadeklerk.119#gmail.com";
$subject = "Form Submission";
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$check = $_POST['check'];
$msgBody = 'Name: ' . $name . 'Message: ' . $message . 'Subscribe: ' . $check . 'E-mail: ' . $email;
$headers = 'From: ' . $email;
$secretKey = "6LdXbq8UAAAAAM1B79Yz2IPgcTuIynBXeJMF2ZLY";
$responseKey = $_POST['g-recaptcha-response'];
$url = "https://www.google.com/recaptcha/api/siteverify?
secret=$secretKey&response=$responseKey";
$response = file_get_contents($url);
$response = json_decode($response);
if ($response->success) {
if (mail($to, $subject, $msgBody, $headers)) {
$msg = "Message sent successfully!";
echo '<script type="text/javascript">',
'popup("'.$msg.'");',
'</script>';
} else {
$msg = "Failed to send the message. Please try again.";
echo '<script type="text/javascript">',
'popup("'.$msg.'");',
'</script>';
}
}
else {
$msg="Verification Failed";
echo '<script type="text/javascript">',
'popup("'.$msg.'");',
'</script>';
}
}
?>
</body>
</html>
You could create a hidden field like:
<input type="hidden" name="msg" id="msg" value="<?php echo $msg ?>">
Then using JQuery on document ready:
$(document).ready(function() {
if($('#msg').val() != "")
{
alert($('#msg').val()); // or replace with a JQuery modal
}
});
This question already has answers here:
PHP mail function doesn't complete sending of e-mail
(31 answers)
Closed 5 years ago.
This is my first time working in php and I'm running into issues getting mail() to work. I am using MAMP Pro to test (and normally there is a real email address to send to). When I click the send button it clears the form but does not show the thank you message (it also isn't showing the two dividers on the bottom that are just stripes) and I have yet to receive a successful email. Any help is appreciated!
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if IE]><meta http-equiv="cleartype" content="on" /><![endif]-->
<title>Twin City Grill</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel='stylesheet' type="text/css" href="styles/main.css">
</head>
<body>
<nav class="navbar">
<a href="index.php">
<img class="logo" src="assets/Twin-City-Grill-white.png" alt="Twin City Grill, white blocky serif font">
<h1 class="screen-reader-only">Twin City Grill</h1>
</a>
<div class="links-container">
Contact
</div>
</nav>
<div class="wrapper">
<div class="divider"></div>
<div class="divider"></div>
<div class="contact-form">
<?php
$action=$_REQUEST['action'];
if ($action=="")
{
?>
<form action="" method="POST" enctype="multipart/form-data" role="form" id="contact-form">
<input type="hidden" name="action" value="submit">
<h2>Contact Us</h2>
<p class="form-instructions"><em>All fields are required.</em></p>
<div class="form-group">
<label for="name" class="screen-reader-only">Name:</label>
<input type="text" name="name" id="name" placeholder="Name" required="required">
</div>
<div class="form-group">
<label for="phone" class="screen-reader-only">Phone Number:</label>
<input type="tel" name="phone" id="phone" placeholder="Phone Number" required="required">
</div>
<div class="form-group">
<label for="email" class="screen-reader-only">Email Address:</label>
<input type="email" name="email" id="email" placeholder="Email Address" required="required">
</div>
<div class="form-group">
<label for="message" class="screen-reader-only">Message:</label>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Your Message" required="required"></textarea>
</div>
<div class="form-group">
<input id="submit" name="submit" type="submit" value="Send" >
</div>
</form>
<?php
}
else
{
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$phone=$_REQUEST['phone'];
$message=$_REQUEST['message'];
if (($name=="")||($email=="")||($message=="")||($phone==""))
{
echo "All fields are required, please fill the form again.";
}
else{
$from="From: $name<$email>\r\nReturn-path: $email";
$subject="Message sent using your contact form";
$email_message .= "Name: ".clean_string($name)."\n";
$email_message .= "Email: ".clean_string($email)."\n";
$email_message .= "Telephone: ".clean_string($phone)."\n";
$email_message .= "Message: ".clean_string($message)."\n";
mail("testemail#gmail.com", $subject, $email_message, $from);
?>
<h2>Thanks!</h2>
<p>We will get back to you as soon as possible. Have a great day!</p>
<?php
}
}
?>
</div>
<div class="divider"></div>
<div class="divider"></div>
</div>
<footer>
</footer>
</body>
</html>
It looks like the mail() function is failing silently for whatever reason. try something like this to get the actual error:
$success = mail("testemail#gmail.com", $subject, $email_message, $from);
if (!$success) {
echo error_get_last()['message'];
}
Instead of $from variable, try this
$from = 'From: from#example.com' . "\r\n" .
'Reply-To: from#example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
Also check your spam
I am not able to validate the form using php and form is getting submitted even though its not validated. I am using Xampp sever. Please let me know the solution.
<?php
$error = "";
if($_POST) {
if(!$_POST["email"]) {
$error .= "Email address is required<br>";
}
if(!$_POST["subject"]) {
$error .= "Subject is required<br>";
}
if(!$_POST["exampleTextarea"]) {
$error .= "Text Area address is required<br>";
}
if (filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) {
$error .= "Email address is invalid<br>";
}
if($error != ""){
$error = '<div class="alert alert-danger" role="alert"><p><strong>Oh snap! There were error(s) in your form:</strong></p>'. $error . '</div>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container"id="containerID">
<h1>Get in touch!!!</h1>
<div id="error"><? echo $error; ?></div>
<form method="post">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" name="email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject">
</div>
<div class="form-group">
<label for="exampleTextarea">What would you like to ask us??</label>
<textarea class="form-control" id="exampleTextarea" rows="5" name="exampleTextarea"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
</html>
Problem with your code not handling form post correctly, your are overriding the value for variable $error where you are checking
if ($error != "") {
$error = '<div class="alert alert-danger" role="alert"><p><strong>Oh snap! There were error(s) in your form:</strong></p>'. $error . '</div>';
} this will lead to neglect all the previous error assignment you have made above this piece of code. Plus on page reload the $error initializes with "", so all the hard work in validating errors and populating the $error variable becomes useless. Therefore, I have used session in my answer.
<?php
$error = "";
$errors = "";
session_start();
if(isset($_POST['submit'])) {
if(empty($_POST["email"])) {
$error .= "Email address is required<br>";
} else if (filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) {
$error .= "Email address is invalid<br>";
}
if(empty($_POST["subject"])) {
$error .= "Subject is required<br>";
}
if(empty($_POST["exampleTextarea"])) {
$error .= "Text Area address is required<br>";
}
if($error != ""){
$errors = '<div class="alert alert-danger" role="alert"><p><strong>Oh snap! There were error(s) in your form:</strong></p>'. $error . '</div>';
$_SESSION['errors'] = $errors;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container"id="containerID">
<h1>Get in touch!!!</h1>
<?php
if (isset($_SESSION['errors'])) {
echo $_SESSION['errors'];
unset($_SESSION['errors']);
}
?>
<form method="post">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" name="email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject">
</div>
<div class="form-group">
<label for="exampleTextarea">What would you like to ask us??</label>
<textarea class="form-control" id="exampleTextarea" rows="5" name="exampleTextarea"></textarea>
</div>
<button type="submit" name="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
</html>
Try giving your <button> a name, like <button name="submitbtn"> and at the top of the if statement, try if(isset($_POST['submitbtn'])
I don't know will this work in your code, but this is what I normally do.
Instead of
<div id="error"><? echo $error; ?></div>
try this
<div id="error">
<?php
echo $error;
?>
</div>
This question already has answers here:
PHP mail function doesn't complete sending of e-mail
(31 answers)
Closed 6 years ago.
I found a Bootstrap form on the internet and now I want to send it to my email.
I have the form online, so no issues with localhost etc. When I try send it I get a message 'Thank You! I will be in touch'. So it sends? But I don't receive the email in my mailbox. Anyone an idea? See code below.
ps. When I run the code local he got some errors, see image. I don't have those errors online, but maybe that is the reason why it doesn't send anything?
<?php
if (isset($_POST["submit"])) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);
$from = 'Demo Contact Form';
$to = 'example#example.com';
$subject = 'Message from Contact Demo ';
$body ="From: $name\n E-Mail: $email\n Message:\n $message";
// Check if name has been entered
if (!$_POST['name']) {
$errName = 'Please enter your name';
}
// Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'Please enter a valid email address';
}
//Check if message has been entered
if (!$_POST['message']) {
$errMessage = 'Please enter your message';
}
//Check if simple anti-bot test is correct
if ($human !== 5) {
$errHuman = 'Your anti-spam is incorrect';
}
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
if (mail ($to, $subject, $body, $from)) {
$result='<div class="alert alert-success">Thank You! I will be in touch</div>';
} else {
$result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later.</div>';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap contact form with PHP example by BootstrapBay.com.">
<meta name="author" content="BootstrapBay.com">
<title>Bootstrap Contact Form With PHP Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="page-header text-center">Contact Form Example</h1>
<form class="form-horizontal" role="form" method="post" action="mail.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
</div>
<div class="form-group">
<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php echo "<p class='text-danger'>$errHuman</p>";?>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Use this modified code to get rid of the initial localhost errors.
<?php
if (isset($_POST["submit"])) {
$name = $_POST['name'];
$email = $_POST['email']; //Sender's email
$message = $_POST['message'];
$human = intval($_POST['human']);
$to = "receivers#email.address";
$subject = "Message from Contact Demo";
$body = "From: $name\n";
$body .= "E-Mail: $email\n";
$body .= "Message:\n $message";
$header = "From:" . $email . "\r\n";
$header .= "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/html\r\n";
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
// Check if name has been entered
if (!$_POST['name']) {
$errName = 'Please enter your name';
}
// Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'Please enter a valid email address';
}
//Check if message has been entered
if (!$_POST['message']) {
$errMessage = 'Please enter your message';
}
//Check if simple anti-bot test is correct
if ($human !== 5) {
$errHuman = 'Your anti-spam is incorrect';
}
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
if (mail($to, $subject, $body, $header)) {
$result = '<div class="alert alert-success">Thank You! I will be in touch</div>';
} else {
$result = '<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later.</div>';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap contact form with PHP example by BootstrapBay.com.">
<meta name="author" content="BootstrapBay.com">
<title>Bootstrap Contact Form With PHP Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="page-header text-center">Contact Form Example</h1>
<form class="form-horizontal" role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
<?php if (isset($errName)) echo "<p class='text-danger'>$errName</p>" ?>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
<?php if (isset($errEmail)) echo "<p class='text-danger'>$errEmail</p>" ?>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message"></textarea>
<?php if (isset($errMessage)) echo "<p class='text-danger'>$errMessage</p>" ?>
</div>
</div>
<div class="form-group">
<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php if (isset($errHuman)) echo "<p class='text-danger'>$errHuman</p>" ?>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php if (isset($result)) echo $result ?>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
PHP isset() will determine if the variable is set and is not NULL. Initially the variables are NULL so it will omit showing you the errors.
Note: most of the time email will be delivered to your email address. check spam/junk folders to see the email. This happens due to unverified source of the email server.
Edit 1
Combining PHPMailer with mailgun platform will ensure you will get your emails to the destination address and possibly avoid going to spam/junk email folder.
Edit 2
I've update my answer with the recent modifications. Please have a look. Tested on a live server. received the contact demo email to my spam/junk folder on Outlook, Straightly to my inbox on Gmail.
Screens
Form submit Outlook Gmail
Hope you will have good luck!
if you want the code ready without change it you only need to change your php.ini file and change the line relate to the error reporting.
search for something like
error_reporting = E_ALL
and change to error_reporting = E_ALL & ~E_NOTICE
with this you hide the undefine issue
and then you need to configure your smtp provider in your php.ini too
I have an HTML file and a PHP file here. The form is to send an email. What is happening is that bits of "code" are appearing in the form fields. Other than that, it does work and sends an email. Once the code has been deleted from the fields and the correct info entered instead. The code is from a bootstrap email form tutorial.
Click here for a Screenshot of what I am describing
Thanks guys!!
--HTML FILE--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap contact form with PHP example by BootstrapBay.com.">
<meta name="author" content="BootstrapBay.com">
<title>Bootstrap Contact Form With PHP Example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="page-header text-center">Contact Form Example</h1>
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
</div>
<div class="form-group">
<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php echo "<p class='text-danger'>$errHuman</p>";?>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
-- PHP FILE --
<?php
if ($_POST["submit"]) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);
$from = 'Demo Contact Form';
$to = 'example#domain.com';
$subject = 'Message from Contact Demo ';
$body ="From: $name\n E-Mail: $email\n Message:\n $message";
// Check if name has been entered
if (!$_POST['name']) {
$errName = 'Please enter your name';
}
// Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'Please enter a valid email address';
}
//Check if message has been entered
if (!$_POST['message']) {
$errMessage = 'Please enter your message';
}
//Check if simple anti-bot test is correct
if ($human !== 5) {
$errHuman = 'Your anti-spam is incorrect';
}
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
if (mail ($to, $subject, $body, $from)) {
$result='<div class="alert alert-success">Thank You! I will be in touch</div>';
} else {
$result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later.</div>';
}
}
}
?>
The thing is with your script, is that if you have it in two seperate files, it won't work.
(Not so fast Fred)... It will still work, but it won't work as intended in order to show you the error message(s) if one or more fields have not been filled, being the whole purpose with your code.
It needs to be inside a single file (PHP first, then your HTML form) sidenote: the order isn't important; the choice is yours. Plus, you will also need to modify your code so that it contains a valid From:. More on this below.
This, on top of what I already said about it must be a .php extension.
Therefore you will need to change this line:
$from = 'Demo Contact Form';
to:
$from = "From: ". $name . " <" . $email . ">\r\n";
in order to show the person's name in the Email's from, but at the same time having an Email address as the "From:"
Otherwise, it will look as if it were coming from your own server, rather than the person's Email.
(I've tested for myself)
For more information on the mail() function, visit PHP.net:
http://php.net/manual/en/function.mail.php