没有ajax的联系表格只是php和html页面

Question

I have a simple Contact Form it works very freat but I want the result on the same page in a small box just under the form where the fail messages are coming and success too

<form method="post" action="contact.php" name="contactform" id="contactform">
    <div class="one_half">
        <input name="name" type="text" id="name" size="30" onfocus="if(this.value == 'Name') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Name'; }" value="Name">
        <input name="alter" type="text" id="alter" size="3" onfocus="if(this.value == 'Alter') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Alter'; }" value="Alter">
        <input name="email" type="text" id="email" size="30" onfocus="if(this.value == 'E-Mail') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'E-Mail'; }" value="E-Mail">
        <input name="phone" type="text" id="phone" size="30" onfocus="if(this.value == 'Handynummer') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Handynummer'; }" value="Handynummer">
        <input name="facebook" type="text" id="facebook" size="200" onfocus="if(this.value == 'Facebook') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Facebook'; }" value="Facebook">
        <input name="instagram" type="text" id="instagram" size="200" onfocus="if(this.value == 'Instagram') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Instagram'; }" value="Instagram">
    </div>
    <div class="one_half last">
        <textarea name="comments" cols="40" rows="3" id="comments" onfocus="if(this.value == 'Nachricht') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Nachricht'; }">Nachricht</textarea>
    </div>
    <input type="submit" class="send_message" id="submit" value="Senden"/>
</form>

and here the PHP file

<?php
    if (!$_POST) exit;

    if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n");

    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $comments = $_POST['comments'];
    $alter = $_POST['alter'];
    $facebook = $_POST['facebook'];
    $instagram = $_POST['instagram'];

    if (get_magic_quotes_gpc()) {
        $comments = stripslashes($comments);
    }

    $address = "xxx@xxx.de";
    $e_subject = 'Contact from ' . $name;
    $e_body = "von: $name" . PHP_EOL . PHP_EOL;
    $e_reply = "Alter: $alter\r\nE-mail: $email\r\nHandynummer: $phone";
    $e_content = "Nachricht:\r\n$comments" . PHP_EOL . PHP_EOL;
    $e_links = "Facebook:\r\n$facebook\r\nInstagram:\r\n$instagram" . PHP_EOL . PHP_EOL;

    $msg = wordwrap($e_body . $e_links . $e_content . $e_reply, 70);

    $headers = "From: $email" . PHP_EOL;
    $headers .= "Reply-To: $email" . PHP_EOL;
    $headers .= "MIME-Version: 1.0" . PHP_EOL;
    $headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
    $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

    if (mail($address, $e_subject, $msg, $headers)) {

        // Email has sent successfully, echo a success page.

        echo "<fieldset>";
        echo "<div id='success_page'>";
        echo "<h1>Bewerbung erfolgreich</h1>";
        echo "<p>Danke <strong>$name</strong>, deine Bewerbung wurde erfolgreich an uns gesendet</p>";
        echo "</div>";
        echo "</fieldset>";

    } else {
        echo 'FEHLER!';
    }

It works PERFECT

but it's always getting on a new site, no matter if error or success.

I want to add a small block under the form where all results are displayed

I hope u can help me.

I don't want ajax or something else. I just want it added like it is.

Answer 1

A solution for your problem might be to have in the same PHP file the logic with the form rendering. Doing this, the form action will be the same PHP file, so it will load the PHP code before rendering the form view. By that, you'll be able to render bellow the form whatever you want to according with the output from the sending email.

For example, take a closer look at the $mailResult variable:

<?php

$name = $_POST['name'] ?? null;
$email = $_POST['email'] ?? null;
$phone = $_POST['phone'] ?? null;
$comments = $_POST['comments'] ?? null;
$alter = $_POST['alter'] ?? null;
$facebook = $_POST['facebook'] ?? null;
$instagram = $_POST['instagram'] ?? null;

if (get_magic_quotes_gpc()) {
    $comments = stripslashes($comments);
}

$address = "xxx@xxx.de";
$e_subject = 'Contact from ' . $name;
$e_body = "von: $name" . PHP_EOL . PHP_EOL;
$e_reply = "Alter: $alter\r\nE-mail: $email\r\nHandynummer: $phone";
$e_content = "Nachricht:\r\n$comments" . PHP_EOL . PHP_EOL;
$e_links = "Facebook:\r\n$facebook\r\nInstagram:\r\n$instagram" . PHP_EOL . PHP_EOL;
$msg = wordwrap($e_body . $e_links . $e_content . $e_reply, 70);

$headers = "From: $email" . PHP_EOL;
$headers .= "Reply-To: $email" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;
$mailResult = '';

if (isset($name, $email)) {
    if (mail($address, $e_subject, $msg, $headers)) {
        $mailResult = "<fieldset>";
        $mailResult .= "<div id='success_page'>";
        $mailResult .= "<h1>Bewerbung erfolgreich</h1>";
        $mailResult .= "<p>Danke <strong>$name</strong>, deine Bewerbung wurde erfolgreich an uns gesendet</p>";
        $mailResult .= "</div>";
        $mailResult .= "</fieldset>";
    } else {
        $mailResult .= 'FEHLER!';
    }
}
?>
<html lang="en">
<head>
    <title>Title page!</title>
</head>
<body>
<form method="post" name="contactform" id="contactform">
    <div class="one_half">
        <input name="name" type="text" id="name" size="30"
               onfocus="if(this.value === 'Name') { this.value = ''; }"
               onblur="if(this.value === '') { this.value = 'Name'; }"
               value="Name">
        <input name="alter" type="text" id="alter" size="3"
               onfocus="if(this.value === 'Alter') { this.value = ''; }"
               onblur="if(this.value === '') { this.value = 'Alter'; }"
               value="Alter">
        <input name="email" type="text" id="email" size="30"
               onfocus="if(this.value === 'E-Mail') { this.value = ''; }"
               onblur="if(this.value === '') { this.value = 'E-Mail'; }"
               value="E-Mail">
        <input name="phone" type="text" id="phone" size="30"
               onfocus="if(this.value === 'Handynummer') { this.value = ''; }"
               onblur="if(this.value === '') { this.value = 'Handynummer'; }"
               value="Handynummer">
        <input name="facebook" type="text" id="facebook" size="200"
               onfocus="if(this.value === 'Facebook') { this.value = ''; }"
               onblur="if(this.value === '') { this.value = 'Facebook'; }"
               value="Facebook">
        <input name="instagram" type="text" id="instagram" size="200"
               onfocus="if(this.value === 'Instagram') { this.value = ''; }"
               onblur="if(this.value === '') { this.value = 'Instagram'; }"
               value="Instagram">
    </div>
    <div class="one_half last">
        <textarea name="comments" cols="40" rows="3" id="comments"
                  onfocus="if(this.value === 'Nachricht') { this.value = ''; }"
                  onblur="if(this.value === '') { this.value = 'Nachricht'; }">
            Nachricht
        </textarea>
    </div>
    <input type="submit" class="send_message" id="submit" value="Senden"/>
</form>
<?php echo $mailResult ?>
</body>
</html>

I would anyway avoid this kind of solution. I would approach this problem with AJAX. In these solutions, we are mixing the logic with the rendering.