Geek Answers Handbook

Replacing the HTML form with a success message after submitting, the form sends mail using a separate php file

I have a html contact form that is built into index.html, and then I have a mail.php file that sends mail and also uses Javascript. When I fill out the form and submit, I encoded it to send mail, and then it appears with a message about the successful message and then redirects back to index.html.

I would like the form to be replaced with a success message to avoid page refresh, as well as to prevent a popup from appearing.

from index.html:

<form action="mail.php" method="POST"> <div class="row uniform"> <div class="6u 12u$(xsmall)"> <input type="text" name="name" id="name" value="" placeholder="Name" /> </div> <div class="6u$ 12u$(xsmall)"> <input type="email" name="email" id="email" value="" placeholder="Email" /> </div> <div class="12u$"> <!--<div class="select-wrapper"> </div>--> </div> <div class="12u$"> <textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea> </div> <center><div class="g-recaptcha" data-sitekey=""></div></center> <div class="12u$"> <ul class="actions"> <li><input type="submit" value="Send Message" class="special" /></li> <li><input type="reset" value="Reset" /></li> </ul> </div> </div> </form>

The php file, email address and recaptcha token are deleted for obvious reasons:

 <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $formcontent = "From: $name \n email: $email \n Message: $message"; $recipient = 'email address here'; $subject = 'Message from Website'; $mailheader = "From: $email \r\n"; $captcha; { if(isset($_POST['g-recaptcha-response'])) { $captcha=$_POST['g-recaptcha-response']; } if(!$captcha) { echo '<script language="javascript">'; echo 'alert("Please check the Captcha")'; echo '</script>'; exit; } $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); if($response.success==false) { echo '<h2>Please do not try and spam here.</h2>'; }else { mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); echo '<script language="javascript">'; echo 'alert("Your Message successfully sent, we will get back to you ASAP.");'; echo 'window.location.href="index.html";'; echo '</script>'; } } ?>

This is the topic I really looked at:

Clear form after sending and successful message

+7
javascript html php forms
source share
3 answers

The best way to do everything you need is to use ajax. Include jquery in your html.

Put your form in a wrapper div

 <div class="something"> <!-- your form here --> </div>

Submit your form via ajax, instead of using the basic submission form

 //"idform" is the id of the form $("#idForm").submit(function() { var url = "path/to/your/script.php"; // the script where you handle the form input. $.ajax({ type: "POST", url: url, // serialize your form elements. data: $("#idForm").serialize(), success: function(data) { // "something" is the class of your form wrapper $('.something').html(data); } }); // avoid to execute the actual submit of the form. return false; });

And the last thing you need to change is your php code

save only one echo for success

 echo "Your Message successfully sent, we will get back to you ASAP.";
+2
source share

You can accomplish this using jQuery and Ajax form.

First include jquery in your head element

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head>

Then specify your id form

 <form id='mail_form' action="mail.php" method="POST">

Add a space somewhere with id = 'error'

 <span id='error' style='color:red; font-weight:bold;'></span>

Correct the mail.php file as follows:

 <?php $success = true; $errors = array(); $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $formcontent = "From: $name \n email: $email \n Message: $message"; $recipient = 'email address here'; $subject = 'Message from Website'; $mailheader = "From: $email \r\n"; $captcha = false; if(isset($_POST['g-recaptcha-response'])) { $captcha=$_POST['g-recaptcha-response']; } if(!$captcha) { $success = false; array_push($errors, "Please check the captcha"); } $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); if($response.success==false) { $success = false; array_push($errors, "Please do not try and spam here."); } if ($success) { mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); } $output_array = array("success" => $success, "errors" => $errors); echo json_encode($output_array); ?>

Then at the bottom of the page add

 <script> $('#mail_form').on('submit', function(){ var dataIn = $(this).serialize(); //serialize turns the form data into a string that can be passed to mail.php. Try doing alert(dataIn); to see what it holds. $.post( "./mail.php", dataIn ) .done(function( dataOut ) { //dataOut holds the response from mail.php. The response would be any html mail.php outputs. I typically echo out json encoded arrays as responses that you can parse here in the jQuery. var myArray = JSON.parse(dataOut ); if (myArray['success'] == true) //Check if it was successfull. { $("#mail_form").html("Congrats! We just e-mailed you!"); } else //there were errors { $('#error').html(""); //Clear error span $.each(myArray['errors'], function(i){ $('#error').append(myArray['errors'][i] + "<br>"); } }); return false; //Make sure you do this or it will submit the form and redirect }); </script>
+1
source share

First of all, you must use the AJAX call to submit the form. If you insist on using pure JS, then the script will look like this (in 5 seconds - it may take some tweaking):

 <script> document.forms['yourForm'].onsubmit = function(form) { // you have to add 'name' attribute to the form and replace 'yourForm' with it var data = ... //here you have to get all the values from form elements and store them in data object. to make less changes to the script use the elements' names as object names if (window.XMLHttpRequest) { var xhReq = new XMLHttpRequest(); } else { var xhReq = new ActiveXObject("Microsoft.XMLHTTP"); } var method= 'POST') var async = false; //you can actually set true here, it doesn't matter much in this case var url = 'mail.php'; xhReq.open(method, url, async); xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhReq.send(data); document.getElementById("form parent ID goes here").innerHTML = "new content" return false; } </script>

Then you need to remove all the echo from the php file, as it will not be shown in any case. You can also add some more complexity to this script, for example. check if mail worked correctly (returning something to php file and checking AJAX response in JS) or catch captcha errors. It would also be very easy to achieve in jQuery if you wanted to go that route.

+1
source share

More articles:


All Articles