3 Steps Order Form With PHP MySQL – Really Simple Example

Welcome to a tutorial and example on how to create a simple order form with PHP and MySQL. Need to add an order form to your website? Contrary to what some beginners think, it is actually a pretty straightforward process.

An order form in the simplest design actually only requires a few components:

  1. A database table to store the necessary order details.
  2. Create the HTML order form itself.
  3. Lastly, a PHP script to save the order form into the database upon submission – Optionally, send it out via email.

Let us walk through a simple order form in this guide – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want the code and skip the tutorial.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Order Form Useful Bits & Links
Tutorial Video The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

  • Create a test database and import 1-orders.sql.
  • Change the database settings in 3-process.php to your own.
  • Launch 2-order-form.php in the browser.

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SIMPLE ORDER FORM

All right, let us now get started with the order form now.

 

STEP 1) ORDERS DATABASE TABLE

1-orders.sql
CREATE TABLE `orders` (
  `order_id` int(11) NOT NULL,
  `dop` datetime NOT NULL DEFAULT current_timestamp(),
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `qty` int(5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `orders`
  ADD PRIMARY KEY (`order_id`),
  ADD KEY `dop` (`dop`);

ALTER TABLE `orders`
  MODIFY `order_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

The first step is to create a database table to store all the required order details. In this example, we will be capturing:

Field Description
order_id Primary key, just a unique running number in the system to keep track of which order is which.
dop Date of purchase.
name Name of customer.
email Customer’s email.
qty Quantity.

But this is only an example ultimately – Feel free to add/remove fields in your own project as necessary.

P.S. For the total beginners, you can easily manage your database with a free manager such as phpMyAdmin or MySQL Workbench.

 

 

STEP 2) ORDER HTML PAGE 

THE HTML

2-form.php
<?php
// (A) PROCESS ORDER FORM
if (isset($_POST['name'])) { 
  require "3-process.php"; 
  echo $result == "" 
    ? "<div class='notify'>Thank You! We have received your order</div>" 
    : "<div class='notify'>$result</div>" ;
}
?>
 
<!-- (B) ORDER FORM -->
<form id="orderform" method="post" target="_self">
  <label for="name">Name:</label>
  <input type="text" name="name" required value="John Doe"/> 
 
  <label for="email">Email:</label>
  <input type="email" name="email" required value="john@doe.com"/> 
 
  <label for="qty">Quantity Needed:</label>
  <input type="number" name="qty" required value="1"/> 
 
  <input type="submit" value="Place Order"/>
</form>

Wait, there is PHP code mixed inside! Keep calm and look carefully:

  • B  – A simple HTML order form with the 3 fields. Name, email, quantity.
  • A – When the HTML form is submitted, we use PHP to handle things accordingly.

 

 

THE CSS

2-theme.css
/* (A) ORDER FORM */
#orderform {
  padding: 15px;
  max-width: 400px;
  background: #f2f2f2;
}
#orderform h1 { margin: 0; }
#orderform label, #orderform input, #orderform textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  resize: none;
}
#orderform input[type=submit] {
  margin-top: 10px;
  border: 0;
  background: #3f429c;
  color: #fff;
  cursor: pointer;
}

/* (B) NOTIFICATION BAR */
.notify {
  background: #d7ffe9;
  padding: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
 
/* (X) DOES NOT MATTER */
body, html, input, textarea {
  font-family: arial, sans-serif;
}

Just some simple cosmetics here to make the order form look better. Feel free to adapt and make it fit the theme of your own project.

 

 

STEP 3) PHP PROCESSING

3-process.php
<?php
// (A) PROCESS RESULT
$result = "";

// (B) CONNECT TO DATABASE - CHANGE SETTINGS TO YOUR OWN!
$dbhost = "localhost";
$dbname = "test";
$dbchar = "utf8";
$dbuser = "root";
$dbpass = "";
try {
  $pdo = new PDO(
    "mysql:host=$dbhost;dbname=$dbname;charset=$dbchar",
    $dbuser, $dbpass, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
  );
} catch (Exception $ex) { $result = $ex->getMessage(); }

// (C) SAVE ORDER TO DATABASE
if ($result=="") {
  try {
    $stmt = $pdo->prepare("INSERT INTO `orders` (`name`, `email`, `qty`) VALUES (?,?,?)");
    $stmt->execute([$_POST['name'], $_POST['email'], $_POST['qty']]);
  } catch (Exception $ex) { $result = $ex->getMessage(); }
}

// (D) SEND ORDER VIA EMAIL
if ($result=="") {
  $to = "admin@site.com"; // CHANGE TO YOUR OWN!
  $subject = "ORDER RECEIVED";
  $message = "";
  foreach ($_POST as $k=>$v) { $message .= "$k - $v\r\n"; }
  if (!@mail($to, $subject, $message)) { $result = "Error sending mail!"; }
}

This may look like a “confusing bunch”, what it does is straightforward – Connect to the database, save the order, and send it out via email. That’s all to the “complicated system”.

 

 

USEFUL BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

RECOMMENDATIONS

As you may have noticed, this order form may work, but it is raw barebones. A couple of recommended “homework” and “add-ons”:

  • An open order form is just waiting for spammers to open fire upon. You might want to add Google ReCaptcha and protect it against spam.
  • Alternatively, consider opening it to registered users only –
  • There is no admin page for the database orders. Feel free to use PHPMyAdmin, MySQL Workbench, or create your own simple admin panel.

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Order Form With PHP MySQL (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this short tutorial. I hope it has helped you to create a better website. If you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

3 thoughts on “3 Steps Order Form With PHP MySQL – Really Simple Example”

  1. I haven’t coded anything in years and have little formal training. I’m working on making a very simple order form page for parents’ store, and this site quickly helped me get back in the groove of things.

    Thanks a lot!

    1. Oh yeah, this code has probably not been updated since 1990. Not sure if it is still good, because it uses modern HTML5 input fields, form checking, and PHP PDO. Seriously? 😉

Leave a Comment

Your email address will not be published. Required fields are marked *