Unable to replace form with message on submission - php

Question

I've created an HTML5 form, which incorporates reCAPTCHA, and I've also written a PHP script that sends an email when the form is submitted. At the moment, the script redirects the user to an error or thankyou page, but I'm trying to adjust it to dynamically replace the form within a message within the same page.
I've tried the following script, but it displays the message as soon as the page loads, before any user interaction.
PHP/HTML:
<?php
if ($_POST) {
// Load reCAPTCHA library
include_once ("autoload.php");
$name = Trim(stripslashes($_POST['name']));
$email = Trim(stripslashes($_POST['email']));
$message = Trim(stripslashes($_POST['message']));
$emailFrom = $email;
$emailTo = "my#email.com";
$subject = "Contact Request";
// Prepare email body text
$body = "<strong>Name:</strong> $name <br /> <strong>Email:</strong> $email <br /> <strong>Message:</strong> $message";
$headers .= 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "From: $name <$emailFrom>" . "\r\n";
$secret = 'XXX';
$recaptcha = new \ReCaptcha\ReCaptcha($secret);
$resp = $recaptcha->verify($_POST['g-recaptcha-response'],$_SERVER['REMOTE_ADDR']);
echo 'Your message was submitted!';
} else {
?>
<div class="contact-form">
<form role="form" method="post" action="index.php">
<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
<label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
<label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label>
<label><span> </span><div id="recaptcha"><div class="g-recaptcha" data-sitekey="6LcBawsTAAAAAKBPfGs1jApXNRLvR2MIPng0Fxol"></div></div></label>
<label><span> </span><input type="submit" value="" class="submit-button" /></label>
</form>
</div>
<?php
}
?>
I'm new to PHP, so I'm not sure if it's a syntax or semantics issue. Any help would be greatly appreciated!

Answer 1

Here's one way of doing it.
Check to see if the form has been submitted with if(isset($_POST['submit'])). You can also use if($_SERVER['REQUEST_METHOD'] == 'POST') to see if the form has been submitted.
Then we check if the email has been successfully sent, and if it has we set the $success_message variable.
We then check to see if the $success_message variable is set, and if it isn't, we show the form.
Also, note that I added name="submit" to the submit button element. This is how we're checking to see if the form has been submitted.
I also changed stripslashes() to strip_tags() to prevent any malicious code from getting through.
<?php
// Load reCAPTCHA library
include_once ("autoload.php");
if(isset($_POST['submit'])) {
$name = trim(strip_tags($_POST['name']));
$email = trim(strip_tags($_POST['email']));
$message = trim(strip_tags($_POST['message']));
$emailFrom = $email;
$emailTo = "my#email.com";
$subject = "Contact Request";
// Prepare email body text
$body = "<strong>Name:</strong> $name <br /> <strong>Email:</strong> $email <br /> <strong>Message:</strong> $message";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "From: $name <$emailFrom>" . "\r\n";
$secret = 'XXX';
$lang = 'en';
$recaptcha = new \ReCaptcha\ReCaptcha($secret);
$resp = $recaptcha->verify($_POST['g-recaptcha-response'],$_SERVER['REMOTE_ADDR']);
// EDIT: repositioned recaptcha from OP's PasteBin script, as requested and adjusted messaging
// changed $success var to $message and added error message
// Original if statement, which redirected the user
if($resp->isSuccess()){
// send the email
if(mail($emailFrom, $subject, $body, $headers)) {
// set the success message
$success_message = 'The form was sent! Yay!';
} else {
// error message
$error_message = 'Could not send email';
}
} else {
$error_message = 'Prove you are a human!';
}
}
?>
<div>
<!-- quick and dirty way to print messages -->
<?php if(isset($success_message)) { echo $success_message; } ?>
<?php if(isset($error_message)) { echo $error_message; } ?>
</div>
<?php if(!isset($success_message)): ?>
<div class="contact-form">
<form role="form" method="post" action="index.php">
<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
<label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
<label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label>
<div class="g-recaptcha" data-sitekey="6LcBawsTAAAAAKBPfGs1jApXNRLvR2MIPng0Fxol"></div>
<script type="text/javascript"
src="https://www.google.com/recaptcha/api.js?hl=<?php echo $lang; ?>">
</script>
<label><span> </span><input type="submit" name="submit" value="" class="submit-button" /></label>
</form>
</div>
<?php endif; ?>