Ok so I have the modal toggling, that is easy with bootstrap. But now, whenever I click submit the form gets redirected to php/contact-process.php. It looks like the php is processed but then just stays at a white screen, and not being redirected and no email is received to my main email(i put example#gmail.com for stackexchange question). Please help me.
<!--Modals for Contact-->
<div class="modal fade" id="contact" role = "dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal contact" name="contact" action="php/contact-process.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4>Contact Us</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" name="name" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" name="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea name="usertext" name="message" id="" rows="8" class="form-control" style="resize:none;"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
Close
<button class="btn btn-primary" type="submit" value="Send!">Send</button>
</div>
</form>
</div>
</div>
</div>
CONTACT-PROCESS.PHP:
<?php
//add the recipient's address here
$myemail = 'example#gmail.com';
//grab named inputs from html then post to #thanks
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
//generate email and send!
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
//redirect
header("Location: index.php");
exit();
}
?>
Related
I am trying to enable a simple contact form, however, every time on the button submit, I get redirected to /form.php with the error 405 Method Not Allowed in the console.
Here is the form in index.html
<div class="container text-center pt-5 pb-5" id="contact">
<h1 class="word">Contact Us</h1>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<form action="form.php" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control text-white" id="name" name="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control text-white" id="email" name="email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control text-white" id="message" name="message" rows="3" placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="btn btn-primary mt-3 btn-lg mt-4">Send Message</button>
</form>
</div>
</div>
</div>
</div>
And here is my form.php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Get the form data
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// Set the recipient email address
$to = "hello#doctrina.ai";
// Set the email subject
$subject = "Message from Contact Form";
// Build the email content
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers
$email_headers = "From: $name <$email>";
// Send the email
mail($to, $subject, $email_content, $email_headers);
// Redirect to the thank you page
header('Location: thanks.html');
}
?>
I have thanks.html page as well. I am using Vercel for deployment. Thank you in advance for your help!
I'm using an html/php form template that I found. Every time I try to submit a completed form, I get a 405 error.
I want the submit button to send the contents of the form to my email address.
Heres the html:
<div class="col-md-6">
<form action="../assets/php/actionpage.php" name="emailform" method="POST">
<div class="row mb--20">
<div class="col-sm-6 col-md-12 col-lg-6 form-group">
<input type="text" class="form-control" placeholder="Name" />
</div>
<div class="col-sm-6 col-md-12 col-lg-6 form-group">
<input type="text" class="form-control" placeholder="E-mail" />
</div>
<div class="col-sm-6 col-md-12 col-lg-6 form-group">
<input type="text" class="form-control" placeholder="Phone" />
</div>
<div class="col-sm-6 col-md-12 col-lg-6 form-group">
<input type="text" class="form-control" placeholder="Website" />
</div>
<div class="col-12 form-group">
<textarea cols="30" rows="5" class="form-control" placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="col-lg-6 offset-lg-6 form-group">
<button class="btn btn-block btn--border-primary"><input type="submit" value="submit"></button>
</div>
</div>
</form>
</div>
This doesn't look out of the ordinary to me. So I think the problem is with the php.
actionpage.php:
<?php
if ( !empty($_POST) ) {}
if(!isset($_POST['submit']))
{
//This page shouldn't be accesed directly
echo "ERROR: you need to submit the form!";
exit;
}
// Collect
$name = $_POST['Name'];
$email = $_POST['E-mail'];
$phone = $_POST['Phone'];
$website = $_POST['Website'];
$message = $_POST['Message'];
// Validate
if(empty($name)||empty($email)||empty($message))
{
echo "Name, E-mail, and Message are mandatory!";
exit;
}
$email_from = $email;
$email_subject = "New Form Submission";
$email_body = "You have a new email from: $name\n their email: $email\n phone number: $phone\n and their website: $website\n Here is their message: $message";
$to = "######.##" // my email
$headers = "From $email_from \r\n";
// Send
mail($to, $email_subject, $email_body, $headers);
// redirect
header('Location: index.html');
?>
I am very new to php, so I decided to use a template.
I'm testing this using LiveServer in VScode. Is that having an impact?
<div class="col-lg-10 col-lg-offset-1 text-center">
<form method="POST" action="index.php" accept="text/html" formenctype="multipart/form-data" class="contact-form row">
<div class="col-md-4">
<label></label>
<input name="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="col-md-4">
<label></label>
<input name="email" type="text" class="form-control" placeholder="Email">
</div>
<div class="col-md-4">
<label></label>
<input name="subject" type="text" class="form-control" placeholder="Subject">
</div>
<div class="col-md-12">
<label></label>
<textarea name="message" class="form-control" rows="9" placeholder="Your message here.."></textarea>
</div>
<div class="col-md-4 col-md-offset-4">
<label></label>
<button id="submit" name="submit" type="sumbit" data-toggle="modal" data-target="#alertModal" class="btn btn-primary btn-block btn-lg">Send <i class="ion-android-arrow-forward"></i></button>
</div>
</form>
</div>
</div>
</div>
</section>
<div id="alertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<h2 class="text-center">Submitted sucessfully!</h2>
<p class="text-center">You clicked the button</p>
<br/>
<button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
</div>
</div>
</div>
</div>
<?php
$headers = ''; // added this line
$headers. = "MIME-Version: 1.0\r\n";
$headers. = "Content-type: text/html\r\n";
$headers = 'From: $name'.
"\r\n". // added .= instead of =
'X-Mailer: PHP/'.phpversion();
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: '.$email;
$to = 'random#gmail.com';
$subject = $_POST['subject'];
$body = " From: $name\n E-mail: $email\n Subject: $subject\n Message:\n $message";
if (isset($_POST['submit'])) {
/* Anything that goes in here is only performed if the form is submitted */
if (mail('random#gmail.com', $subject, $body, $from)) {
echo "<script type='text/javascript'>$(document).ready(function(){ $('#alertModal').modal('show');});</script>";
} else {
echo "something went wrong";
}
} ?>
I have been trying to call my modal when submitting my form, but cannot seem to get it to work.
I have been looking at various different questions but nothing seems to work.
I do not have JS for this and my PHP is incorporated on a separate page.
Please help, I want the modal to open on the same page as the form when someone submits the info.
Thanks
See , it is working
function showModal(){
$('#alertModal').modal('show');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-lg-10 col-lg-offset-1 text-center">
<form method="POST" action="index.php" accept="text/html" formenctype="multipart/form-data" class="contact-form row">
<div class="col-md-4">
<label></label>
<input name="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="col-md-4">
<label></label>
<input name="email" type="text" class="form-control" placeholder="Email">
</div>
<div class="col-md-4">
<label></label>
<input name="subject" type="text" class="form-control" placeholder="Subject">
</div>
<div class="col-md-12">
<label></label>
<textarea name="message" class="form-control" rows="9" placeholder="Your message here.."></textarea>
</div>
<div class="col-md-4 col-md-offset-4">
<label></label>
<button id="submit" name="submit" type="sumbit" data-toggle="modal" data-target="#alertModal" class="btn btn-primary btn-block btn-lg">Send <i class="ion-android-arrow-forward"></i></button>
</div>
</form>
</div>
</div>
</div>
</section>
<div id="alertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<h2 class="text-center">Submitted sucessfully!</h2>
<p class="text-center">You clicked the button</p>
<br/>
<button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
</div>
</div>
</div>
</div>
<?php
$headers = ''; // added this line
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html\r\n";
$headers = 'From: $name' . "\r\n" . // added .= instead of =
'X-Mailer: PHP/' . phpversion();
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: ' . $email;
$to = 'random#gmail.com';
$subject = $_POST['subject'];
$body = " From: $name\n E-mail: $email\n Subject: $subject\n Message:\n $message";
if (isset($_POST['submit']))
{
/* Anything that goes in here is only performed if the form is submitted */
if (mail ('random#gmail.com', $subject, $body, $from ))
{
echo "<script type='text/javascript'>showModal();</script>";
} else
{
echo "something went wrong";
}
}
?>
you have two choice
change button type:
<button type="button" class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
call function:
<form method="POST" action="index.php" accept="text/html" formenctype="multipart/form-data" class="contact-form row" onSubmit="show_modal();return;">
and the function:
function show_modal(){
$('#myModal').modal('show');
}
UPDATE (requested in comments)
Set timer for submit form after delay:
Change button type to button: type="button"
add this code to your page:
$("#submit").click(function(){
setTimeout(function() {
$("form").submit();
}, 5000); // 5 sec
$("#myModal").show(); //Find your modal id and replace with myModal
});
Note: don't forget to include jquery lib
My modal is not showing. the page is reloading and then i receive an email.
Below you can find my code. Can somebody help me out please... I think the problem is that my page is reloading after clicking the submit button.
Below my form that i use :
<form id="form" method="post" name="form" autocomplete="on">
<div class="row">
<div class="col-sm-6 nopadding-right">
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-user"></span></div>
<input type="text" name="vname" placeholder="Name" class="form-control requiredField name" value="" />
</div>
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-phone"></span></div>
<input type="text" name="vphone" placeholder="Phone" class="form-control requiredField phone" value="" />
</div>
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-at"></span></div>
<input type="email" name="vmail" placeholder="Enter email" class="form-control requiredField email" value="" />
</div>
</div>
<div class="col-sm-6">
<div class="input-group mail-block">
<div class="input-group-addon"><span class="fa fa-pencil"></span></div><textarea class="form-control message" name="vtext" placeholder="Message" rows="4"></textarea><input class="btn btn-primary inverse-btn" id="send" name="confirm" type="submit" value="send">
</div>
</div>
</div>
</form>
The modal :
<div class="modal fade" id="Modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Thank you</h4>
</div>
<div class="modal-body">
<p>Thanks for getting in touch!</p>
</div>
</div>
</div></div>
My php code :
<?php if(isset($_POST["confirm"])){ if($_POST["vname"]==""||$_POST["vmail"]==""||$_POST["vphone"]==""||$_POST["vtext"]==""){
echo "error";}else{
$email=$_POST['vmail'];
$email =filter_var($email, FILTER_SANITIZE_EMAIL);
$email= filter_var($email, FILTER_VALIDATE_EMAIL);
if (!$email){
echo "error";
}
else{
$subject = "mail " . $_POST['vname'];
$message = $_POST['vtext'] . "\r\n" . ' phone ' . $_POST['vphone'] ."\r\n" . $_POST['vmail'];
$headers = 'From:'. "xxx#email.com" . "\r\n"; // Sender's Email
$headers .= 'Cc:'. "xxx#email.com" . "\r\n"; // Carbon copy to Sender
$message = wordwrap($message, 70);
mail("xxx.yy#xxx.com", $subject, $message, $headers);
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#Modal').modal('show');
});
</script>";
}
}
}?>
The remedy is to use AJAX call instead of form submission. It allows you to do better error handling as well.
I am working on a site, and having never done something like this, I am unsure how to proceed with PHP. I am working with bootstrap and looking to send an email based on a modal. My HTML looks like
<div class="modal fade" id="contact" role="dialoge">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Plan your Party!</h4>
</div>
<form class="name" name="contact">
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="name" required="required" placeholder="Full Name">
</div>l
</div>
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" name="email" required="required" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="message" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8" style="resize: vertical;" required="required" placeholder="Message" name="message"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
<button class="btn btn-success" type="submit" id="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button>
</div>
</div>
</div>
</div>
So I am just wondering if anyone could give me some pointers to make this form actually send the email. I am looking to learn and willing to try anything. Thanks in advance, help and constructful criticism appreciated. Also, how would I approach adding a confirmation that the message has been sent?
Thanks, John.
<script>
$(document).ready(function () {
$("input#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php", //
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#form-content").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
</script>
This is the script I tried to add to call the php:
<?php
$myemail = 'myemail#myemail.ca';
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
echo "<stong>Name:</strong> ".$name."<br>";
echo "<stong>Email:</strong> ".$email."<br>";
echo "<stong>Message:</strong> ".$message."<br>";
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}
?>
And I mean I am sure there is something I am missing, or some simple fix, this is all just so new to me.
Following are the edits for you:
1) You have two forms in the modal and none of them having closing form tag. Remove <form class="form-horizontal"> form and change your other form to <form class="contact">
2) Give closing form tag.
3) Change submit button to <button class="btn btn-success" id="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button>
4) Also check updated AJAX code and PHP code.
Hope this should help you..
HTML
<div id="thanks"> </div>
<p>
<a data-toggle="modal" href="#contact"
class="btn btn-primary">Contact us</a>
</p>
<!-- model content -->
<div class="modal hide fade in" style="display: none; " id="contact" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Plan your Party!</h4>
</div>
<form class="contact">
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="name" required="required" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" name="email" required="required" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="message" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8" style="resize: vertical;" required="required" placeholder="Message" name="message"></textarea>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
<button class="btn btn-success" id="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button>
</div>
</div>
</div>
</div>
AJAX
<script>
$(function() {
//twitter bootstrap script
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg);
$("#contact").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
</script>
process.php
<?php
$myemail = 'myemail#myemail.ca';
if (isset($_POST['name']))
{
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
$msg_success = "";
$msg_fail = "Error sending mail.";
$msg_success .= "<span class=\"alert alert-success\" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
$msg_success .= "<stong>Name:</strong> ".$name."<br>";
$msg_success .= "<stong>Email:</strong> ".$email."<br>";
$msg_success .= "<stong>Message:</strong> ".$message."<br>";
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email";
if(mail($to,$email_subject,$email_body,$headers))
echo $msg_success;
else
echo $msg_fail;
}
else
echo "Input parameters missing";
?>
In form tag include action attribute to point any PHP page, from there you can send emails...