Contact form - success message in the same page

[adex1]

Hi guys,

 

I am completing my bootstrap site and I added a contact form with recaptcha check on that.

 

I have my form in an html page and the php files that check the captcha and send the email.

Everything works fine but I want the confirmation message in the same page of the form instead of a new page.

 

this is the html form

<form id="comment_form" action="master/form.php" method="post">
 
                    <div class="col-md-6 padding-right-zero">
                        <div class="form-group">
                                <input type="text" class="form-control" placeholder="Your Name *" name="name" required data-validation-required-message="Please enter your name.">
                                <p class="help-block text-danger"></p>
                            </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                                <input type="email" class="form-control" placeholder="Your Email *" name="email" required data-validation-required-message="Please enter your email address.">
                                <p class="help-block text-danger"></p>
                            </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Subject *" name="subject" required data-validation-required-message="Please enter your subject.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                            <textarea class="form-control" placeholder="Your Message *" name="message" required data-validation-required-message="Please enter a message."></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                      <div class="clearfix"></div>
                      <div class="col-lg-12 text-center">
                          <div id="success"></div>
						  <div class="g-recaptcha" data-sitekey="mysitekey"></div>
                          <input type="submit" name="submit" value="Send message">
						  <?php echo $result; ?>	
                      </div>
                    </div>
                </form>

this is my php script:

<?php
        $to="myemail@gmail.com";
        $captcha;$name;$email;$subject;$message;
        if(isset($_POST['name'])){
           $name=$_POST['name'];
         }if(isset($_POST['email'])){
          $email=$_POST['email'];
        }if(isset($_POST['subject'])){
          $subject=$_POST['subject'];
        }if(isset($_POST['message'])){
          $message=$_POST['message'];
        }if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
        if(!$captcha){
          echo '<h2>Please check the the captcha form.</h2>';
          exit;
        }
	$secretKey = "key";
	$ip = $_SERVER['REMOTE_ADDR'];
        $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
	$responseKeys = json_decode($response,true);
        if(intval($responseKeys["success"]) !== 1) {
          echo '<h2>You are spammer!</h2>';
        } else {
          
          mail($to, $subject, $message, "From:" . $name);
		  header('index.html');
		  $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
echo "sent";
        }
?>

I tried to use the $result variable but one the email has been sent - I get it and it's fine - the page doesn't redirect to the html form but stays in this php page showing just the small confirmation message.

 

Any help?

[.josh]

You need to restructure your code to use AJAX. Read up on how to submit an AJAX POST request and receive a response to update a div or w/e on the same page.  There are a billion tutorials out there for it.  Come back with specific questions about it if you get stuck. 

[benanamen]

There is no need for Ajax. Basic form handling is all you need.

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
    // Send email code
    die('Thank You!');
}
?>
<form method="POST">
<label>Name</label><br >
<input name="Name">
<input type="submit" value="Submit" >
</form>

Edited December 16, 2016 by benanamen

[.josh]

yeah well I have a feeling that's not what he really wants.