HTML表单显示代码而不是PHP输出

I've been trying to implement this form into my HTML (Bootstrap 4 alpha) website, but I can't get it working properly.

Let's start with the goals:

  1. A working form that checks if valid input is given for all fields before it sends an email.
  2. If the user didn't enter a valid input for one or more of the fields, an error message should appear on the page itself (so no redirect to an error page).
  3. preferably, when the user made a mistake with one of the input fields and the error shows up, the previously entered data shall remain in the fields.

I found some useful help somewhere on the internet, a PHP and HTML of which I could use the stuff I needed. However, this form doesn't work, even when I upload the original code without changing anything.

I thought PHP might not be supported by the server I was uploading it to, but it is and I even got a form working that would just take the input and send it to the receiver with no questions asked.

What I didn't get to work though was to echo an output of my PHP file in my HTML. What am I doing wrong?

HTML:

<form action="php/mail.php" role="form" method="post" class="">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label sr-only">Naam</label>
        <input type="text" class="form-control form-control-sm form" id="name" name="name" placeholder="Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
        <?php echo "<p class='text-danger'>$errName</p>";?>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label sr-only">Email</label>
        <input type="email" class="form-control form-control-sm form" id="email" name="email" placeholder="your.name@example.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
        <?php echo "<p class='text-danger'>$errEmail</p>";?>
    </div>
    <div class="form-group">
        <label for="message" class="col-sm-2 control-label sr-only">Message</label>
        <textarea class="form-control form-control-sm form" rows="4" name="message" placeholder="My Message..."><?php echo htmlspecialchars($_POST['message']);?></textarea>
        <?php echo "<p class='text-danger'>$errMessage</p>";?>
    </div>
    <div class="form-group">
        <label for="human" class="col-sm-2 control-label sr-only">2 + 3 = ?</label>
        <input type="text" class="form-control form-control-sm form" id="human" name="human" placeholder="2 + 3 = ?">
        <?php echo "<p class='text-danger'>$errHuman</p>";?>
    </div>
    <div class="form-group">
        <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary btn-sm">
        <input type="reset" value="Clear" class="btn btn-primary btn-sm">
    </div>
    <div class="form-group">
        <?php echo $result; ?>
    </div>
</form>

PHP:

<?php
    if (isset($_POST["submit"])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $human = intval($_POST['human']);
        $from = 'Demo Contact Form'; 
        $to = 'test@testmail.com'; 
        $subject = 'Message from Contact Demo ';

        $body = "From: $name
 E-Mail: $email
 Message:
 $message";

        // Check if name has been entered
        if (!$_POST['name']) {
            $errName = 'Please enter your name';
        }

        // Check if email has been entered and is valid
        if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
            $errEmail = 'Please enter a valid email address';
        }

        //Check if message has been entered
        if (!$_POST['message']) {
            $errMessage = 'Please enter your message';
        }
        //Check if simple anti-bot test is correct
        if ($human !== 5) {
            $errHuman = 'Your anti-spam is incorrect';
        }

// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
    } else {
        $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
    }
}
    }
?>

The results I get from this are like this:

Screenshot

Seems to me that the HTML file doesn't execute the PHP code, instead just displays raw code. I tried both saving the HTML as .html and as .php, both gave different but false results.

Just :

<?php if (isset($errName)) { echo "<p class='text-danger'>$errName</p>"; } ?>

For all your fields.

For your comment :

 // Create this variable for your error detection
 $hasError = FALSE;

 // Check if name has been entered
 if (!$_POST['name']) {
      $errName = 'Please enter your name';
      $hasError = TRUE;
 }

 // Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    $errEmail = 'Please enter a valid email address';
    $hasError = TRUE;
}

//Check if message has been entered
if (!$_POST['message']) {
    $errMessage = 'Please enter your message';
    $hasError = TRUE;
}

//Check if simple anti-bot test is correct
if ($human !== 5) {
   $errHuman = 'Your anti-spam is incorrect';
   $hasError = TRUE;
}

// If there are no errors, send the email
if ($hasError == FALSE) {
   ....

As Vincent just mentioned, that should be the solution to solve your problem, but it could have a little explanation as well.

PHP only can echo existing variables, so in order to echo them they need to exist, otherwise it will throw an error.

So basically the isset() function checks if the variable exists or not. isset() returns a bool(true of false) as mentioned in the PHP docs.

You can take a look at this example for more details: W3School

looks its all because you have not validated all your variables using isset() before using it like

if(isset($varialbe))
{
   // ... use $varialbe here ...
}

you can use same with help of ternary operator (condition)?true part:false part; like

$othervariable = (isset($varialbe))?$varialbe:'';

or

echo ((isset($varialbe))?$varialbe:'');

First of all, turn error_reporting to off by putting this in the top.

error_reporting(0);

Then submit the form again. Make sure form file must saved in .php format.

And I can see your file code should be like this:

<?php
    error_reporting(0);
    if (isset($_POST["submit"])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $human = intval($_POST['human']);
        $from = 'Demo Contact Form'; 
        $to = 'test@testmail.com'; 
        $subject = 'Message from Contact Demo ';

        $body = "From: $name
 E-Mail: $email
 Message:
 $message";

        // Check if name has been entered
        if (!$_POST['name']) {
            $errName = 'Please enter your name';
        }

        // Check if email has been entered and is valid
        if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
            $errEmail = 'Please enter a valid email address';
        }

        //Check if message has been entered
        if (!$_POST['message']) {
            $errMessage = 'Please enter your message';
        }
        //Check if simple anti-bot test is correct
        if ($human !== 5) {
            $errHuman = 'Your anti-spam is incorrect';
        }

// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
    } else {
        $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
    }
}
    }
?>
<form action="yourfilename.php" role="form" method="post" class="">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label sr-only">Naam</label>
        <input type="text" class="form-control form-control-sm form" id="name" name="name" placeholder="Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
        <?php echo "<p class='text-danger'>$errName</p>";?>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label sr-only">Email</label>
        <input type="email" class="form-control form-control-sm form" id="email" name="email" placeholder="your.name@example.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
        <?php echo "<p class='text-danger'>$errEmail</p>";?>
    </div>
    <div class="form-group">
        <label for="message" class="col-sm-2 control-label sr-only">Message</label>
        <textarea class="form-control form-control-sm form" rows="4" name="message" placeholder="My Message..."><?php echo htmlspecialchars($_POST['message']);?></textarea>
        <?php echo "<p class='text-danger'>$errMessage</p>";?>
    </div>
    <div class="form-group">
        <label for="human" class="col-sm-2 control-label sr-only">2 + 3 = ?</label>
        <input type="text" class="form-control form-control-sm form" id="human" name="human" placeholder="2 + 3 = ?">
        <?php echo "<p class='text-danger'>$errHuman</p>";?>
    </div>
    <div class="form-group">
        <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary btn-sm">
        <input type="reset" value="Clear" class="btn btn-primary btn-sm">
    </div>
    <div class="form-group">
        <?php echo $result; ?>
    </div>
</form>