How do I get all form inputs and send them to an email?

Question

I have a form page that I need to gather all input data and send them to my email. How do I do this using only html, css, php, or javascript?

here is what the page looks like https://www.dropbox.com/s/zjhqrldyprrofnl/FORM.PNG?dl=0

here is my php code

<?php 
$DATE = $_POST['DATE'];
$TIME = $_POST['TIME'];
$NAME = $_POST['NAME'];

$formcontent="From: $NAME \n Message: $DATE and $TIME";
$recipient = "rickyj250@gmail.com";
$subject = "Contact Form";
$mailheader = "From: $NAME \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "<script type='text/javascript'>alert('The Rocco's Team will contact 
you soon!')</script>";
?>

I've tried different types of get and actions methods but so far no luck.

Here is the HTML code

<div class="tab-pane fade show active" id="submit" role="tabpanel" aria-labelledby="submit-tab">
         <div class="card-body text-center">

            <br>
            <h5 class="card-title"><u> DATE & TIME </u></h5>
            <h7>Order ready by:</h7>

            <form method="post" action="form.php">
             <div class=" container form-group">
                 <div class="col-12">
                    <input class="form-control" type="date" value="2012-12-12" id="DATE">
                  </div>

                  <div class="col-12">
                    <input class="form-control" type="time" value="13:45:00" id="TIME">
                  </div>
                </div>



              <h5 class="card-title"><u>ENTER INFO</u></h5>

        <div class="container">

            <div class="row" style="justify-content: center;">


                <div class="input-group col-12">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="NAME">First & Last Name</span>
                  </div>
                  <input type="text" class="form-control">
                  <input type="text" class="form-control">
                </div>


        <div class="container">
            <div class="row">


                <div class="input-group col-12">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="EMAIL">Email</span>
                  </div>
                  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                 </div>

                </div>

        </div>


                 <div class="input-group col-12">
                  <div class="input-group-prepend">
                  <span class="input-group-text">Phone Number</span>
                 </div>
                    <input class="form-control" type="tel" value="1-(555)-555-5555" id="PHONE">
                  </div>


            </div>
        </div>

        <div class="container">
            <div class="row">

            <div class="form-group col-12"><br>
                <h5 class="card-title"><u>ENTER YOUR ORDER</u></h5>
                <textarea class="form-control" placeholder="# of pizzas and toppings   Type of pasta and sauce    Full or Half Orders    ETC.." id="ORDER" rows="5"></textarea>
              </div>
                </form>

                        </div>
                    </div>

        <div class="container">
            <button type="button" class="btn btn-secondary btn-lg btn-block">Reset</button>
            <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
        </div>
        <br>


                </div> <!-- END OF SUBMIT CARD BODY-->
    </div><!-- END OF SUBMIT FORM-->

I want the form data to be formatted into an ordered email.

Answer 1

First off, you're using too many form elements!
(See this stack overflow post).

Use one form tag with the entire form interface (the textareas and buttons) inside or it.

Also, add the type="submit" to your Submit button.

You'll also have to add another line to your PHP code to grab the "ORDER" textareas value.

$ORDER = $_POST['ORDER'];

And then you can append that to the email as you'd like. But one more thing to consider: This form is extremely vulnerable and dangerous!

You are taking input straight from the user (who could be a malicious hacker) and feeding it straight to your email. That's not good! Even a very inexperienced hacker could exploit this and type in malicious code into the "DATE" field (or any of the other fields) and submit it. When you open up the email, wham! His code executes and the hacker does his evil deeds to your computer. Please read up on input sanation/HTML character escaping for PHP. You should end up wrapping your $DATE and other PHP variables you grab from POST with htmlspecialchars(). For example:.

$ORDER = htmlspecialchars($_POST['ORDER']);

Now hackers can't put malicious code into your ORDER field as it will be escaped and not executed when you open the email on your computer.

W3Schools has an alright explanation about handling input securely from forms.

Also as your pointed out, you need to use name and not id for your input fields (I missed that at first too, whoops).

Also, make sure that your webserver has mail sending capability. Not every server has that ability.