Develop Reference

How to refresh contact form on the same page HTML PHP JavaScript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Really struggling with this one, didn't think a simple form would be this complicated. I'm a newbie when it comes to the back-end.
I have 3 fields; name, email, and message. On submit, I just want a simple "thank you" message inside the form box. I do not want to send to another page or refresh to the top of the current page. I want the form to refresh with the 'thank you' message, ideally with the message disappearing after a few seconds.
After trying a few different methods I am almost there with JS, using an event listener to show the "thank you" message after clicking submit.
However, now the contact form doesn't refresh on submit and the data that was inputted still shows on the form along with the thank you message. How do you get the form to refresh on submit?
I have always used WordPress, and contact forms seemed so simple. I have spent hours on this so far.
HTML
<div class="form-box">
<p id="thank-you-message">
Thank you for your message. We will be in touch with you very soon.
</p>
<form method="POST" action="contact-form.php" >
<div class="form-control">
<input class="text-box" id="name" name="name" type="text" placeholder="Your Name*" required>
<input class="text-box" id="email" name="email" type="email" placeholder="Your Email Adress*" required>
</div>
<div>
<textarea id="message" name="message" placeholder="Project Details" required></textarea>
<button class="send" name="submit" type="submit">SEND</button>
</div>
</form>
PHP
<?php
if(isset($_POST['email']) && $_POST['email'] !='') {
$name = $_POST['name'];
$visitor_email = $_POST ['email'];
$message = $_POST ['message'];
$email_from = 'website.com';
$email_subject = "New Form Submission";
$email_body = "User Name: $name.\n".
"User Email: $visitor_email.\n".
"User Message: $message.\n";
$to = "contact#email.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
mail($to,$email_subject,$email_body,$headers);
header("Location: index.html");
}
?>
JS
const form = document.querySelector('form');
const thankYouMessage = document.querySelector('#thank-you-message');
form.addEventListener('submit', (e) => {
e.preventDefault();
thankYouMessage.classList.add('show');
setTimeout(() => form.submit(), 2000);
});
#James Bakker
HTML
<form method="POST" action="contact-form.php" >
<?php echo $successMessage ?>
<div class="form-control">
<input type="hidden" name="valid" value="false">
<input class="text-box" id="name" name="name" type="text" placeholder="Your Name*" required>
<input class="text-box" id="email" name="email" type="email" placeholder="Your Email Adress*" required>
</div>
<div>
<textarea id="message" name="message" placeholder="Project Details" required></textarea>
<button class="send" name="button" type="submit">SEND</button>
</div>
</form>
JS
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
form.valid.value = 'true';
consultForm.submit();
});
PHP
<?php
$successMessage == '';
if($_POST['valid'] == 'true'){
$name = $_POST['name'];
$visitor_email = $_POST ['email'];
$message = $_POST ['message'];
$email_from = 'website.com';
$email_subject = "New Form Submission";
$email_body = "User Name: $name.\n".
"User Email: $visitor_email.\n".
"User Message: $message.\n";
$to = "contact#email.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
$header("Location: index.html");
$success = mail($to,$email_subject,$email_body,$headers);
if ($success){
$successMessage = 'Your Message was sent!';
} else {
$successMessage = 'There was a problem, message was not sent';
}
}
?>

If you were to use fetch or regular XMLHttpRequest you can use the callback to manipulate the DOM after the data has been sent to the backend PHP script.
The PHP script that handles the request will no longer require the header('Location: index.html'); - instead you could echo/return a message to be used by the ajax callback.
The below is not tested as such
document.addEventListener('DOMContentLoaded',()=>{
let form=document.querySelector('form');
form.querySelector('button[type="submit"]').addEventListener('click',e=>{
e.preventDefault();
fetch( 'contact-form.php' , { method:'post', body:( new FormData( e.target.parentNode.parentNode ) ) } )
.then( r=>r.text() )
.then( data=>{
//show the message
document.querySelector('#thank-you-message').classList.add('show');
//iterate through form elements and set the value to empty string if it is not a button
for( i=0; i<form.elements.length; i++ ){
let el=form.elements[i]
if( el.type!='button' )el.value='';
}
// remove the button
e.target.parentNode.removeChild(e.target);
})
})
});
<div class="form-box">
<p id="thank-you-message">
Thank you for your message. We will be in touch with you very soon.
</p>
<form method="POST" action="contact-form.php" >
<div class="form-control">
<input class="text-box" id="name" name="name" type="text" placeholder="Your Name*" required>
<input class="text-box" id="email" name="email" type="email" placeholder="Your Email Adress*" required>
</div>
<div>
<textarea id="message" name="message" placeholder="Project Details" required></textarea>
<button class="send" name="submit" type="submit">SEND</button>
</div>
</form>
</div>

The short answer is: You need to change the name attribute of your submit button to something other than submit, then you will be able to call form.submit() using your JS.
Currently your page works as such:
User enters info and clicks submit
Your JS captures the event and
prevents default action
You display the thank you message and then
submit() the form.
The problems with this approach are:
The thank you message is displayed before the actual message is sent.
There is no form validation
The message is only displayed for 2 seconds, and only before the actual email is sent.
A better approach is:
User fills out form and clicks submit
JS captures the event, prevents default, validates all of the data, and if everything is valid if submits the form, POSTing the form values to the current page, this will reload the page and clear the form fields.
Your PHP script will take the POSTed variables, send the email, and display your thank you message on the page.
The advantages are:
You don't display a message until the email is actually sent
You are making sure the form has valid entries
Your message is displayed after refresh and wont disappear after 2 seconds
Heres how, (code isn't tested):
Make a hidden input in your form with the name 'valid':
<input type="hidden" name="valid" value="false">
Once the your JS has validated the inputs you would set this to true and submit() the form. This will post the variable to your PHP along with the rest of the form values.
form.valid.value = 'true';
consultForm.submit();
in your php you write an if statement:
$successMessage == '';
create empty variable success message than we will assign a message if a form submission is detected.
if($_POST['valid] == 'true'){ //keep in mind we are passing a string
not an actual boolean
//insert your php email script here
$success = mail($to,$email_subject,$email_body,$headers);
//assigning return value of mail() to variable named success
if($success){
$successMessage = 'Your Message was sent!'
} else {
$successMessage = 'There was a problem, message was not sent'
}
you can then echo $successMessage anywhere in your HTML.
<?php echo $successMessage ?>
when the page is initially loaded, before the form submit, $successMessage will be an empty string, so echo $successMessage will have no affect on the page.

Why am I getting a 404 error when i try to use php to send me an email on my website?

I want to be emailed the email addresses of the people that sign up. I don't know much about php, but I would like to use the mail() method to send the emails to me. When someone signs up, a 404 error pops up, and it says, "This error is generated when there was no web page with the name you specified at the web site."
This is simply a landing page, and I don't know much about php, so I'm not exactly sure what to try.
<!DOCTYPE html>
<html>
<body>
<h1>AmCompare is a New App that Helps You Save Time and Money!</h1>
<div id="container">
<p id="welcome">
<b>Hello!</b><br /><br />We hope you're having an awesome day. AmCompare is an app that can instantly compare the price of a product to similar products on Amazon. All it takes is a picture, and AmCompare will find you the best deal online to
help you save money! By signing up below, you're showing interest in a product designed to help you save time and money.
<br /><br />
<b>Thanks so much,</b>
<br /> The Entire AmCompare Team
</p>
<form style="border:1px solid #ccc" method="post">
<label for="email">Email</label>
<input type="text" placeholder="Enter Email" name="email" required>
<button type="submit" class="signupbtn">
Sign Up
</button>
</form>
</div>
<div id="footer">© AmCompare 2019</div>
<script src="share.js"></script>
<br>
<?php
if(!isset($_POST['submit']))
{
echo "Error; You need to submit the form.";
}
$email = $_POST['email'];
if(empty($email)) {
echo "Email is mandatory.";
exit;
}
$email_from = '$email \n';
$email_subject = "New Form Submission";
$email_body = "New email: $email \n".
$to = "jordanpattonsnowflake#gmail.com";
$headers = "From: $email_from \r\n";
mail($to,$email_subject,$email_body,$headers);
?>
</body>
</html>

Getting Empty emails using html5 form and php

I have some html5 form fields on a website that I manage that push the data inputted by users to a php file that sends an email to a dedicated yahoo email for the site.
Here is the html:
<form role="form" method="post" action="php/contact-us.php" lang="es" id="contactForm">
<div class="row">
<div class="form-group col-lg-4 required">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" required placeholder="Enter Name" />
</div>
<div class="form-group col-lg-4 required">
<label for="email">Email</label>
<input type="email" class="form-control" name="email" required placeholder="Enter valid email" />
</div>
<div class="form-group col-lg-4">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" name="phone" placeholder="e.g. (000) 000 - 0000">
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 required">
<label for="message">Mensaje</label>
<textarea class="form-control" rows="6" name="message" required placeholder="Write your message here"></textarea>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default">Enviar</button>
</div>
</div>
</form>
Before, I did not have any validation on the fields, but I was getting empty emails with no user content so I thought people are just pushing the button without entering anything which I could also test myself. So I added the following validation JS, also eused webshim for unsupported browsers (and the required tags in the form elements above):
<script>
$('#contactForm input[type=text], select, textarea').on('change invalid', function() {
var field = $(this).get(0);
field.setCustomValidity('');
if (!field.validity.valid) {
field.setCustomValidity('Please fill required fields');
}
});
$('#contactForm input[type=email]').on('change invalid', function() {
var field = $(this).get(0);
field.setCustomValidity('');
if (!field.validity.valid) {
field.setCustomValidity('Enter a valid email');
}
});
</script>
Previously I was getting the inputted email form the user and setting it as the senders email but I was having issues with certain email addresses, etc. So I defaulted it to a random email that would always work and just included the users inputted email in the message. Here is my php file (contact-us.php):
<?php
// Set your email below
$to = "<dedicatedemail>#yahoo.com";
// Receive and sanitize input
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$subject = "Request from website";
$headers = "From: no-reply#gmail.com";
// set up email
$msg = "Sender Information \nName: " . $name . "\nEmail: " . $email . "\nPhone: " . $phone . "\n\n" . $message;
$msg = wordwrap($msg,70);
// mail
mail($to,$subject,$msg,$headers);
header('Location: ../contact-thank-you.html');
?>
So first let me say that everything is working. When I test the functionality here everything works. I am able to send an email from my ios device and my laptop and I have had a couple friends send from their android devices. The validation works for me so it does not let me send an email without at least filling the required fields out. I was getting empty emails before I added validation and setting the sender email to a default one. However I still get empty emails even after all the changes. When I test I cannot test across all platforms and browsers but I cannot force an empty email after I added checks. Is my validation failing somewhere? I feel like people are filling in the fields but somehow the email is coming in empty. When I say empty I mean the stuff that I programmatically add to the message comes through but the actual info that the user is suppose to input does not? How is this happening?

Always perform server side validation and confirm there is a POST incoming. Otherwise even something as simple as a webcrawler will tigger empty emails.
<?php
if (empty($_POST['email']) || empty($_POST['name'])) {
// Respond with a proper error message
...
} else {
// Send email
$to = "<dedicatedemail>#yahoo.com";
$name = $_POST['name'];
$email = $_POST['email'];
...
}

Clear form field after submit

I have read other answers for the same question but I am having problems and would be grateful for some advice.
I have javaScript in my html file, and an Onclick() statement on the submit button to clear the form but now the email confirmation message does not come up and the message is no longer sent. If I put the onClick(); in the body of the form, every field is cleared just by clicking on a form field. I really want to be able to submit a message, then have the form cleared on successful send.
<script type ="text/javascript">
function clearform () {
document.getElementById("name").value="";
document.getElementById("email").value="";
document.getElementById("subject").value="";
document.getElementById("message").value="";
}
</script>
<div class="row">
<div class="col-sm-6">
<h2>Send us a message</h2>
<!-- action="replace it with active link."-->
<form action="contact.php" method="post" name="contact-form" id="contact-form" >
<label for="name">Your Name <span>*</span></label>
<input type="text" name="name" id="name" value="" required />
<label for="email">Your E-Mail <span>*</span></label>
<input type="text" name="email" id="email" value="" required />
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" value="" />
<label for="message">Your Message</label>
<textarea name="message" id="message"></textarea>
<div class="row">
<div class="col-sm-6">
<input type="submit" name="sendmessage" id="sendmessage" value="Submit" onclick="clearform();" />
</div>
<div class="col-sm-6 dynamic"></div>
</div>
</form>
I then have the following in the PHP file:
private function sendEmail(){
$mail = mail($this->email_admin, $this->subject, $this->message,
"From: ".$this->name." <".$this->email.">\r\n"
."Reply-To: ".$this->email."\r\n"
."X-Mailer: PHP/" . phpversion());
if($mail)
{
$this->response_status = 1;
//$this->response_html = '<p>Thank You!</p>';
}
}
function sendRequest(){
$this->validateFields();
if($this->response_status)
{
$this->sendEmail();
}
$response = array();
$response['status'] = $this->response_status;
$response['html'] = $this->response_html;
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span>";
header("Location: contact.php");// redirect back to your contact form
exit;
}
}
$contact_form = new Contact_Form($_POST, $admin_email, $message_min_length);
$contact_form->sendRequest();
?>

No ajax form post
If you are not using ajax to submit the form (you don't seem to be using it), there is no need for javascript to clear the form, the form will be reloaded on submit and it will be empty.
However, you have a problem with your location redirect: You are outputting html before that so the redirect will probably fail.
You should not output anything before you redirect and you could add a query variable to the url so that you can show your success message when the form loads:
if($this->response_status)
{
$this->sendEmail();
}
header("Location: contact.php");// redirect back to your contact form
exit;
Using ajax to post the form
If you are using ajax (the setting of your response variables seems to indicate that you want to do that), you should put the clearform () call in the success function of your ajax call and remove the header() redirect in php. Instead you probably want to return / output the results:
if($this->response_status)
{
$this->sendEmail();
}
$response = array();
$response['status'] = $this->response_status;
$response['html'] = $this->response_html;
echo json_encode($response);
exit;

You've got to make sure the event continues to propagate and the form is submitted:
function clearform () {
document.getElementById("name").value="";
document.getElementById("email").value="";
document.getElementById("subject").value="";
document.getElementById("message").value="";
return true;
}

jQuery If/else statement that adds text to DIV upon successful form submit

I have a form built that works perfectly fine. However, when a message is successfully submitted, the user gets redirected to a new page with the 'success' message I have set up. Instead, I want the success message to be displayed in a div which is placed next to the form, and the form to reset in case the user would like to send another message. Likewise, I am also hoping to have my 'error' message show up in the same div upon failure. Was hoping someone can help with my if/else statement to make this possible.
Here's my HTML:
<div id="contact-area">
<form id="theform" name="theform" method="post" action="feedback.php">
<input type="hidden" name='sendflag' value="send">
<p>
<label for="Name">Name:</label>
<input type="text" name="name" id="name" value="" />
</p>
<p>
<label for="Email">Email:</label>
<input type="text" name="email" id="email" value="" />
</p>
<p>
<label for="Message">Message:</label><br />
<textarea name="message" rows="20" cols="20" id="message"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</p>
</form>
</div>
<div class="message">
<p class="submitMessage"></p>
</div>
Here's my PHP:
<?php
$mail_to_send_to = "myemail#gmail.com";
$your_feedbackmail = "noreply#domain.com";
$sendflag = $_REQUEST['sendflag'];
if ( $sendflag == "send" )
{
$name = $_REQUEST['name'] ;
$email = $_REQUEST['email'] ;
$message = $_REQUEST['message'] ;
$headers = "From: $name" . "\r\n" . "Reply-To: $email" . "\r\n" ;
$a = mail( $mail_to_send_to, "Feedback form", $message, $headers );
if ($a)
{
print("Message was sent, you can send another one");
} else {
print("Message wasn't sent, please check that you have changed emails in the bottom");
}
}
?>

If I understand your question correctly, you're looking to never leave a page but rather have a div appear or disappear based off of a successful form submission. If so, it looks like you're going to have to use AJAX. Luckily, jQuery has this built right in! I'd suggest something like the following:
$.post("url.php", { option1: value1, option2: value2 }, function(data) {
if(data != '')
$('#theDiv').html("Success!");
});
For more information, read up on the documentation here.

Read and follow examples here: jQuery AJAX
You'll basically do something like this.
$.ajax({
url: /url/to/your/php,
data: dataObjectPosting
success: function(data){
//the data object will have your PHP response;
$('#divid').text('success message');
},
error: function(){
alert('failure');
}
});
Remember, success simply means HTTP 200, not necessarily that your PHP code ran successfully as you would see it.