如何在联系表单提交中显示成功/失败消息

Question

I'm trying to figure out a simple way to to show that a message was either sent or not in a contact form. At the moment on success or failure it is redirecting to a designated success or failure page. All I'm looking to do is instead of redirect, maybe show a div, or modal or popup but I'm not sure how to do that in PHP.

Form:

<div class="col-lg-7 col-sm-7 contactboxform">
    <form action="contact_me.php" method="POST" id="contactform">
      <input type="text" name="name" placeholder="Name..." class="input-text">
      <input type="text" name="phone" placeholder="Phone Number..." class="input-text">
      <input type="email" name="email" placeholder="E-mail Address..." class="input-text">
      <input type="checkbox" name="interested">
      <textarea name="message" placeholder="What would you like to say?" class="input-text text-area" rows="7"></textarea>
      <button type="submit" id="subbtn" class="btn btn-default btn-lg">Submit</button>
    </form>
    </div>

PHP:

// send email
if (!empty($name) && !empty($email) && !empty($phone) && !empty($message)) {
    $success = mail($emailTo, $subject, $body, "From: <$emailFrom>");
}
if ($success){
    header('Location: success.html');
}
else {
    header('Location: failed.html');
}
//redirect to success page

So I'm just not sure how to properly say in PHP that on success, show specific div / popup.

Thanks in advance

Answer 1

You can try creating a div and then inserting into it a response from a AJAX request.

For example, add to your HTML code:

<div id="form_status"></div>

When the submit button is clicked, you perform the AJAX request:

<button type="submit" id="subbtn" class="btn btn-default btn-lg" onClick="validateForm();">Submit</button>

And the validateForm function can be:

function validateForm()
{
    var status = $('div#form_status');
    var form = $('form#contactform');
    $.ajax({
        url: 'your-php-file.php?'+form.serialize()
    }).done(function(data){
        status.html(data);
    });
}

On your-php-file.php, you can access all the data from the form with $_GET['input_name'], with input_name being the name of the input on the form.

With this, anything that you print on the your-php-file.php will be printed into the div#form_status, without the need to refresh the page.