How do I show a Bootstrap modal using PHP? - php

I don't think my title does this question justice but it may get confusing and I don't want to extend the title over several lines.
Here goes:
I have a single page website which has a contact form with the below code:
<form class="move-down" name="contactform" method="post" action="contact-form-handler.php">
<div class="controls controls-row">
<input id="name" name="name" type="text" class="span3" placeholder="Name">
<input id="email" name="email" type="email" class="span3" placeholder="Email address">
</div>
<div class="controls">
<textarea id="message" name="message" class="span6" placeholder="Your Message" rows="7"></textarea>
</div>
<div class="controls pull-right">
<button id="contact-submit" type="submit" class="btn btn-default">Send it!</button>
</div>
</form>
As you can see its action is to call an external php file called "contact-form-handler", which is shown below:
<?php
$errors = '';
$myemail = 'hello#wunderful.co.uk';//<-----Put Your email address here.
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']))
{
$errors .= die(header('Location: #errorModal'));
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address))
{
$errors .= die(header('Location: #errorModal'));
}
if( empty($errors))
{
$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_address\n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' modal
header('Location: #thanksModal');
}
?>
<?php
?>
This has been working fine but as my new site is one page I don't want separate pages loading, nor do I just want to echo black text on a white background.
So my question is - How do I show the Bootstrap Modal window when the submit button is clicked, with php code from inside the external file AND without the page reloading?
I hope it can be done. If it can't can someone help me launch a modal that says error or thanks when the submit button is clicked?

yes you can. Since you are not using oop way you can do this
1) on page submit you will assign some $mail_send = true; after email is send
2) you fill then say <?php if ($mail_send) { ?> code for modal here <?php } ?>
3) Drop this header('Location: #thanksModal'); you do not need that.
Put $mail_send = true; instead of that.
that is all.

Related

Want to echo "Email sent!" in a specific div after form is submitted [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm implementing a contact-form to my website. When I click the "submit" button it sends me the email then redirects user to domain.com/mail.php and echoes "Email sent!" in a blank white page. Instead I want to have the user stay in index.html and have the "Email sent!" echoed inside <div class="alert-msg"></div>. Any help is appreciated!
contact.php:
<?php
if(isset( $_POST['fname']))
$name = $_POST['fname'];
if(isset( $_POST['email']))
$email = $_POST['email'];
if(isset( $_POST['subject']))
$subject = $_POST['subject'];
if(isset( $_POST['message']))
$message = $_POST['message'];
$content="Name: $name \n Email: $email \n Subject: $subject \n Message: $message";
$recipient = "myemail#domain.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
echo "Email sent!";
?>
index.html
<div class="contactcontainer">
<form action="contact.php" method="POST" id="contact-form">
<label for="fname">Full Name</label>
<input type="text" id="fname" name="fname" placeholder="Your name" required>
<label for="email">E-mail</label>
<input type="text" id="email" name="email" placeholder="E-mail" required>
<label for="email">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Subject" required>
<label for="subject">Message</label>
<textarea id="message" name="message" placeholder="Your message" style="height:200px" required></textarea>
<button class="btn btn-outline-light text-uppercase" onclick="document.getElementById('contact-form').submit();" type="submit" name="submit" id="submit">submit</button>
<div class="alert-msg"></div>
</form>
</div>
Page After clicking submit:
Email sent! in blank page with URL
For the alert-msg to work the PHP needs to be above the html.
There's a lot wrong with this as you have no sanitization of post data leaving you wide open to attack.
Here are some suggestions for the PHP;
<?php
// You should santize input, examples below;
// $data = strip_tags($data); - this removes tags like <a>
// $data = trim($data); - this removes whitespace
// New code
$status = ""; // First set the alert-msg to a null/empty value so it's not shown before the form is submitted.
// Listen for when the submit button is clicked
if (isset($_POST['submit'])) {
$name = $_POST['fname'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
// Now we have the post data and it has been sanitized we can check to make sure it isn't null/empty
if ($name == "" || $email == "" || $subject == "" || $message == "") {
// If any of these values are empty send the alert that email hasn't been sent
$status = "Email not sent!";
// If all values have some data, continue...
} else {
$content = "Name: $name \n Email: $email \n Subject: $subject \n Message: $message";
$recipient = "myemail#domain.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
// Set alert-msg value for success
$status = "Email sent!";
}
}
?>
Change the HTML form by removing the action and include your PHP script above the HTML on the same page. With the submit button, remove the onclick part as you are using PHP to send the form directly and add a php value to the alert-msg div;
New HTML
<form method="POST" id="contact-form">
<button class="btn btn-outline-light text-uppercase" type="submit" name="submit" id="submit">submit</button>
</form>
<div class="alert-msg"><?php echo $status; ?></div>
I omitted the rest of the HTML you posted as it's okay.

Every time you refresh the page, an e-mail is sent

I have a problem with my code. I'm creating a contact form. I don't know about php, I'm learning and I have a problem. What's wrong with this code, every time I refresh the page an email was sent and you I see "Confirm form resubmission" information which is annoying. Can you help me solve these problems?
<?php
$show = "";
if(isset($_POST['submit'])){
if(filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)){
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'].".\n\n"."Sent from contact form.";
$to = "Test <test#justtest.com>";
$headers = "From: ".$name."<".$email.">";
mail($to,$subject,$message,$headers);
$show = "<p class='success'>Your message was sent.</p>";
}
}
?>
<form action="index.php" method="POST" class="form">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Your email" required>
<input type="text" name="subject" placeholder="Subject">
<textarea name="message" rows="5" placeholder="Message" required></textarea>
<button type="submit" name="submit">Send</button>
<?php echo $show;?>
</form>
Generally the approach to solve the "Confirm form resubmission" is to redirect after processing a form post. So instead of just re-rendering the page, you'd do something like this:
if(isset($_POST['submit'])){
if(filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)){
// the rest of the code you already have, then...
header("Location:index.html");
die();
}
}
You can of course replace "index.html" with any page you like, in this case I imagine it would be the current page.
What this does is instruct the browser to not render the current response (if there even is anything in the response) but instead to issue a new GET request to the specified page in the header. So if the user then later refreshes that page, they're only refreshing the GET request and not re-submitting the form.
Edit: You can also still show your message to the user:
$show = "<p class='success'>Your message was sent.</p>";
What you would do in this case is not show the message where you currently have it, but instead include it as a separate operation on the page invoked by a query string parameter. So you might have something like this:
$show = "";
if(isset($_GET['sent'])){
$show = "<p class='success'>Your message was sent.</p>";
}
if(isset($_POST['submit'])){
if(filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)){
// unchanged code not shown here for brevity
mail($to,$subject,$message,$headers);
header("Location:index.html?sent=true");
die();
}
}
And later in the page you can output the message like you already do:
<?php echo $show;?>
The way this message gets triggered is by the query string paramter used in the redirect:
header("Location:index.html?sent=true");
Which means that technically any time somebody goes to your page with sent=true manually they would see the message without actually sending the email. But if users are tinkering like that then the behavior they get is the behavior they should expect. If you're keen on preventing this otherwise inoccuous tinkering then you could also store a flag in $_SESSION rather than in the query string. That's up to you.
when you submit the form, a post request is sent, and so by reloading the page, the same form is been resubmitted over and over.
In order to solve this, you just need to redirect the user to the same page, instead of returning the page itself, so you need to add
header("Location: http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";); // or paste here the url of the page where the form is located
die();
after
mail($to,$subject,$message,$headers);
So you ends up with this:
<?php
$show = "";
if(isset($_POST['submit'])){
if(filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)){
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'].".\n\n"."Sent from contact form.";
$to = "Test <test#justtest.com>";
$headers = "From: ".$name."<".$email.">";
mail($to,$subject,$message,$headers);
header("Location: http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";); // or paste here the url of the page where the form is located
die();
$show = "<p class='success'>Your message was sent.</p>";
}
}
?>
<form action="index.php" method="POST" class="form">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Your email" required>
<input type="text" name="subject" placeholder="Subject">
<textarea name="message" rows="5" placeholder="Message" required></textarea>
<button type="submit" name="submit">Send</button>
<?php echo $show;?>
</form>
php html
In order to keep the <p class='success'>Your message was sent.</p> you can use GET parameters:
<?php
$show = "";
if(isset($_POST['submit'])){
if(filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)){
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'].".\n\n"."Sent from contact form.";
$to = "Test <test#justtest.com>";
$headers = "From: ".$name."<".$email.">";
mail($to,$subject,$message,$headers);
header("Location: http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]?redirect=true";); // or paste here the url of the page where the form is located
die();
} else if(isset($_GET['redirect'])){
$show = "<p class='success'>Your message was sent.</p>";
}
}
?>
<form action="index.php" method="POST" class="form">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Your email" required>
<input type="text" name="subject" placeholder="Subject">
<textarea name="message" rows="5" placeholder="Message" required></textarea>
<button type="submit" name="submit">Send</button>
<?php echo $show;?>
</form>
php html

Remove PHP email validation

How can I remove the ugly error caused by PHP? I don't know if the webhost is causing it or if I can fix it with PHP/CSS, I have no email validation in my code The error
<div class="row">
<div class="row">
<div class="input-field col s6">
<input id="email" type="email" class="validate" name="email">
<label for="email" data-error="Geen geldig e-mailadres" data-success="Dit e-mailadres word alleen gebruikt om een antwoord te versturen.">Email</label>
</div>
</div>
</div>
<?php
error_reporting(0);
$errors = '';
$myemail = 'my#mail.com';
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']))
{
$errors .= "/n fill in all fields";
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
if( empty($errors))
{
$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_address\n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
header('Location: bedankt.html');
}
?>
</body>
</html>
This is the full code for the email part, error_reporting(0); does not seem to work for the described problem
Change Your Html Email
From
<input type="email" >
To
<input type="text" >
As I commented, changing the mail type to text in your HTML will remove the validation. You mentioned you want to keep the field type as email. To disable the the HTML5 validation, you need to add novalidate to your form.
As in:
<form method="post" action="/yourAction" novalidate>...</form>
Reference

How to show a success dialog box after submitting the form in html?

I'm a newbie to php and html, I've created a form which will accept the inputs from user and will send it to a specified Email id. Everything is working fine but on submitting the form, it goes to another new page.
How this can be replaced with a dialog box as a confirmation message upon submitting the form?
HTML -
<form method="POST" name="contactform" action="contact-form-handler.php">
<p>
<label for='name'>Your Name:</label> <br>
<input type="text" name="name">
</p>
<p>
<label for='email'>Email Address:</label> <br>
<input type="text" name="email"> <br>
</p>
<p>
<label for='message'>Message:</label> <br>
<textarea name="message"></textarea>
</p>
<input type="submit" value="Submit"><br>
</form>
PHP -
<?php
$errors = '';
$myemail = 'mymail#gmail.com';//<-----Put Your email address here.
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']))
{
$errors .= "\n Error: all fields are required";
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address))
{
$errors .= "\n Error: Invalid email address";
}
if( empty($errors))
{
$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_address \n Message : $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
echo "Your Message successfully sent, we will get back to you ASAP.";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Contact form handler</title>
</head>
<body>
<!-- This page is displayed only if there is some error -->
<?php
echo nl2br($errors);
?>
</body>
</html>
You can submit the form in the same page and can simply show JavaScript alert message to the users.
Below code will help you resolving your issue.
<?php
if(isset($_POST['btnSubmit'])){
$errors = '';
$myemail = 'mymail#gmail.com';//<-----Put Your email address here.
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']))
{
$errors .= "\n Error: all fields are required";
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address))
{
$errors .= "\n Error: Invalid email address";
}
if( empty($errors))
{
$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_address \n
Message : $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
//echo "Your Message successfully sent, we will get back to you ASAP.";
}
print("<script>alert('Your Message successfully sent, we will get back to
you ASAP.');</script>");
}
?>
<form method="POST" name="contactform" action="">
<p>
<label for='name'>Your Name:</label> <br>
<input type="text" name="name">
</p>
<p>
<label for='email'>Email Address:</label> <br>
<input type="text" name="email"> <br>
</p>
<p>
<label for='message'>Message:</label> <br>
<textarea name="message"></textarea>
</p>
<input type="submit" value="Submit" name="btnSubmit"><br>
</form>
Hope it helps!
It can be done with following jQuery function:
$(document).ready(function() {
$("[name='contactForm']").submit(function() {
if(confirm("You are about to submit the form. Are you sure?")){
window.location = "http://www.google.com/"
};
});
});
But you will be redirected to a blank new page anyways. In order to prevent that you can either use an AJAX submit(simply add AJAX construction inside the function) or do the redirect using JavaScript function I added to jQuery script

PHP Form Submit Button Unclickable

SOLVED - permissions
I want to walk through my debug process so that it might help anyone else working through the same thing... 1) I wiped both pages and replaced with the code that I knew worked. 2) I then changed the form piece by piece until I got it how i wanted and continued testing 3) I then copied the current php file completely and redirected my form to it. 4) it failed... I changed the permissions to 655 and wallah it worked. Now I can go about hacking about the PHP code to get what I want. thanks for all of the suggestions, you definitely led me down the road to my solution
SOLVED
I have two separate intake forms on a site. Intake form 1 works perfectly. I takes, name, email and comment and sends it through a sendmail script.
I also wanted an intake form for lead capture to track those that want to access the demo videos so I modified the code from the form (for the new page) and then created an additional php file called videoform.php - which is basically just a modified version of my sendmail.php file.
When I fill out the form it does nothing when I click on submit. It validates, as it not let you enter a null value in any of the fields but I am not sure what I am missing. Is it something simple (I am by no means PHP reliable) or can I simply not do that?
Here is the form and the php:
<div class="message"></div>
<form action="./php/videoform.php" method="POST" id="contact-form">
<p class="column one-half">
<input name="name" type="text" placeholder="Your Name" required>
</p>
<p class="column one-half">
<input name="email" type="email" placeholder="Your Email" required>
</p>
<p class="column one-half">
<input name="phone" type="text" placeholder="Your Phone" required>
</p>
<p>
<input name="submit" type="submit" value="Submit">
</p>
</form>
</div>
This is the PHP
<?php if(!$_POST) exit;
$to = "xxxxx#example.com";
$email = $_POST['email'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$content = $_POST['content'];
$subject = "You've been contacted by $name";
$content = "$name filled out a request to view the online videos:\r\n\n";
$content .= "Phone: $phone \n\nEmail: $email \n\n";
if ($success) {
header("Location: /videos.html");
exit;
} else {
header("Location: /video-form.html");
exit;
}
?>
I am comfortable with a number of coding formats but I am so weak when it comes to PHP. Any insight would be both appreciated and get me on the road to understanding PHP better.
Working scripts for comparison
Form
Send us a message
<p class="column one-half last">
<input name="email" type="email" placeholder="Your Email" required>
</p>
<p class="clear">
<textarea name="comment" placeholder="Your Message" cols="5" rows="3" required></textarea>
</p>
<p>
<input name="submit" type="submit" value="Comment">
</p>
</form>
</div>
PHP sendmail.php file
<?php if(!$_POST) exit;
$to = "xxxxx#example.com";
$email = $_POST['email'];
$name = $_POST['name'];
$comment = $_POST['comment'];
$subject = "You've been contacted by $name";
$content = "$name sent you a message from your enquiry form:\r\n\n";
$content .= "Contact Reason: $comment \n\nEmail: $email \n\n";
if(#mail($to, $subject, $content, "Reply-To: $email \r\n")) {
echo "<h5 class='success'>Message Sent</h5>";
echo "<br/><p class='success'>Thank you <strong>$name</strong>, your message has been submitted and someone will contact you shortly.</p>";
}else{
echo "<h5 class='failure'>Sorry, Try again Later.</h5>";
}?>
From your php:
//...
$content = "$name filled out a request to view the online videos:\r\n\n";
$content .= "Phone: $phone \n\nEmail: $email \n\n";
if ($success) {
header("Location: /videos.html");
exit;
} else {
//...
You never define $success. Since it doesn't have a value, if ($success) fails, and it always enters the else portion of the statement. It looks like you're missing a line that's something like $success = mail($to, $subject, $content);

Categories