PHP form submission returns blank

Question

I'm a total novice so please bear with me :)…I've managed to create a form and used PHP to send the data to an email address. However, once I click submit; the screen goes blank instead of staying on the current page and displaying a message. I'm guessing i'm missing some sort of PHP code?

Also, i'd like to use the JQuery validator plugin on my form, how can I add it without basically screwing up the form?

MY HTML:

<div>
<form id="form_id" name="form_name" action="scripts/index.php" method="post">
                <div>
                    <label for="name">Name: </label>
                    <input type="text" name="name" id="name" placeholder="John Smith" required/>
                </div>

                <div>
                    <label for="email">Email: </label>
                    <input type="email" name="email" id="email" placeholder="name@mail.com" required/>
                </div>

                <div>
                    <label for="message">Message: </label>
                    <textarea name="message" id="message" rows="5" cols="30"></textarea>
                </div>

                <div>
                    <input id="submit" type="submit" name="submit" value="submit" />
                </div>
            </form>
            <p id="feedback"><?php echo $feedback; ?></p>
</div>

MY PHP:

<?php

$to = 'example@gmail.com';
$subject = 'Message from The Rocket Factory';

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$body = <<<EMAIL

Hi, my name is $name.

$message

From $name
My Address is $email


EMAIL;

$header = "From: $email";

if($_POST){
    mail($to, $subject, $body, $header);
    $feedback = 'Thanks for your message';
}

?>

Answer 1

You can achieve this in two ways : 1. Have php and html code in one page. 2. Use ajax to submit your form.

 <div>
    <form id="form_id" name="form_name" action="scripts/index.php" method="post">
            <div>
                <label for="name">Name: </label>
                <input type="text" name="name" id="name" placeholder="John Smith" required/>
            </div>

            <div>
                <label for="email">Email: </label>
                <input type="email" name="email" id="email" placeholder="name@mail.com" required/>
            </div>

            <div>
                <label for="message">Message: </label>
                <textarea name="message" id="message" rows="5" cols="30"></textarea>
            </div>

            <div>
                <input id="submit" type="submit" name="submit" value="submit" />
            </div>
        </form>
 </div>

   <?php

     $to = 'example@gmail.com';
     $subject = 'Message from The Rocket Factory';

     $name = $_POST['name'];
     $email = $_POST['email'];
      $message = $_POST['message'];

      $body = <<<EMAIL
         Hi, my name is $name.
           $message
         From $name
        My Address is $email
       EMAIL;

  $header = "From: $email";

if($_POST){
     mail($to, $subject, $body, $header);
    $feedback = 'Thanks for your message';
    echo '<p id="feedback">'.$feedback.'</p>'; <-- Notice this..
 }
?>

You can also use ajax in jquery ($.ajax) or javascript.

Answer 2

PHP script that you create will return an empty page, because that script just to send email. I think you need to combine PHP script and HTML script together with PHP script in top of script to get that you want and edit form action to empty like this sample:

<?php

$to = 'example@gmail.com';
$subject = 'Message from The Rocket Factory';

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$body = <<<EMAIL

Hi, my name is $name.

$message

From $name
My Address is $email


EMAIL;

$header = "From: $email";

if($_POST){
    mail($to, $subject, $body, $header);
    $feedback = 'Thanks for your message';
}

?>

<div>
<form id="form_id" name="form_name" action="" method="post">
                <div>
                    <label for="name">Name: </label>
                    <input type="text" name="name" id="name" placeholder="John Smith" required/>
                </div>

                <div>
                    <label for="email">Email: </label>
                    <input type="email" name="email" id="email" placeholder="name@mail.com" required/>
                </div>

                <div>
                    <label for="message">Message: </label>
                    <textarea name="message" id="message" rows="5" cols="30"></textarea>
                </div>

                <div>
                    <input id="submit" type="submit" name="submit" value="submit" />
                </div>
            </form>
            <p id="feedback"><?php echo $feedback; ?></p>
</div>

Answer 3

Your form will take the user to scripts/index.php. You are echoing the '$feedback' var on the page with the HTML form. Redirect from scripts/index.php using
header("location: filelocation"); exit();