Contact form error messages on same page

Question

I have a working php code but when the user clicks "Send" it takes him to an empty page saying "thanks for sending" or it shows an error. Here my php code and html form. l want error and success text to show above first input. I tried it with iframe and it worked, but I can't change the font color so I can't really use it. Form is in an HTML file called inquiry.html and PHP is in inquiry.php

<form method="post" action="inquiry.php">

    <h2>CONTACT US</h2>

    <p>We are here to answer any questions you may have about our company. Reach out to us and we'll respond as soon as
        we can. </p>

    <input id="input" name="name" placeholder="Your Name">

    <input id="input" name="email" type="email" placeholder="Your Email">

    <input id="input" name="subject" type="subject" placeholder="Subject">

    <textarea id="textarea" name="message" placeholder="Your Message"></textarea>

    <input id="submit" name="submit" type="submit" value="Send">

</form>

<?php

    if(isset($_POST['email'])) {                     

        // EDIT THE 2 LINES BELOW AS REQUIRED

        $email_to = "leonstopar1@gmail.com";

        $email_subject = $_POST['subject'];;


        function died($error) {

            // your error code can go here

            echo "We are very sorry, but there were error(s) found with the form you submitted. ";

            echo "These errors appear below.<br /><br />";

            echo $error."<br /><br />";

            echo "Please go back and fix these errors.<br /><br />";

            die();         
        }

        // validation expected data exists

        if(!isset($_POST['name']) ||

            !isset($_POST['email']) ||

            !isset($_POST['subject']) ||

            !isset($_POST['message'])) {

            died('We are sorry, but there appears to be a problem with the form you submitted.');       

        }         


        $name = $_POST['name']; // required

        $email_from = $_POST['email']; // required

        $subject = $_POST['subject']; // not required

        $message = $_POST['message']; // required


        $error_message = "";

        $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

      if(!preg_match($email_exp,$email_from)) {

        $error_message .= 'The Email Address you entered does not appear to be valid.<br />';

      }

        $string_exp = "/^[A-Za-z .'-]+$/";

      if(!preg_match($string_exp,$name)) {

        $error_message .= 'The Name you entered does not appear to be valid.<br />';

      }

      if(strlen($message) < 2) {

        $error_message .= 'The Message you entered do not appear to be valid.<br />';

      }

      if(strlen($error_message) > 0) {

        died($error_message);

      }


        function clean_string($string) {

          $bad = array("content-type","bcc:","to:","cc:","href");

          return str_replace($bad,"",$string);

        }


        $email_message .= "Name: ".clean_string($name)."\n";

        $email_message .= "Email: ".clean_string($email_from)."\n";

        $email_message .= "Message: \n\n".clean_string($message)."\n";


    // create email headers


    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
    $headers .= "From: ".$name."\r\n" .
    "Reply-To: ".$name."\r\n" .
    "X-Mailer: PHP/" . phpversion();

    @mail($email_to, $email_subject, $email_message, $headers);  

?>


<!-- include your own success html here -->


Thank you for contacting us. We will be in touch with you very soon.



<?php

?>

Use ajax request to catch either success or error response to later put in the proper place in your html doc. — leo.fcx, Aug 04 '15 at 17:18
You could try checking this question out, it's done with using a jquery plug-in. http://stackoverflow.com/questions/13671710/jquery-form-validation-on-button-click — knocked loose, Aug 04 '15 at 17:39
you haven;t included your success html page in your contact php fill it in and then it will work — Rachel Gallen, Aug 04 '15 at 18:55

score 0 · Answer 1 · answered Aug 04 '15 at 20:10

In your contact form add a div before your first input (where you want the result to be displayed)

<div id="result"></div>

In that same file add a script tag with the following content

if you have included jQuery

$.ajax({
  type: 'POST',
  url: 'inquiry.php',
  success: function(resp) {
     $("#result").text("success!");
  },
  error: function() {
     $("#result").text("error!");
  }
});

if you haven't jQuery

var request = new XMLHttpRequest();
request.open('POST', 'inquiry.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
    document.getElementById("result").textContent = resp;
  } else {
    // We reached our target server, but it returned an error
    document.getElementById("result").textContent = "error!";
  }
};

request.onerror = function() {
  // There was a connection error of some sort
  document.getElementById("result").textContent = "error!";
};

request.send();

And finally in your inquiry.phpfile make sure that you return or echo what you want to be displayed

Contact form error messages on same page

1 Answers1