3 Steps To Save HTML Form Into Database In PHP MySQL

Welcome to a beginner’s tutorial on how to save an HTML form into the database with PHP and MySQL. So you have finally come to fight the boss stage of full-stack programming – Combining HTML, PHP, and MySQL to save a submitted form into the database.

Yep, it’s really that simple but read on for an actual example!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

STEP 1) CREATE THE DATABASE TABLE

CREATE TABLE `survey` (
  `email` varchar(255) NOT NULL,
  `name` varchar(255) NOT NULL,
  `color` varchar(128) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 
ALTER TABLE `survey`
  ADD PRIMARY KEY (`email`);

For this example, we will be doing a simple “survey” on the favorite color that the users like; We will be capturing 3 fields – The email, name, and the color itself.

 

 

STEP 2) CREATE THE HTML FORM

<?php
// (A) SAVE SURVEY FORM ON SUBMIT
if (isset($_POST["email"])) { require "3-save.php"; }
?>
 
<!-- (B) SURVEY FORM -->
<form method="post">
  <label>Email</label>
  <input type="email" name="email" required>
  <label>Name</label>
  <input type="text" name="name" required>
  <label>Favorite Color</label>
  <input type="text" name="color" required>
  <input type="submit" value="Go!">
</form>

Shouldn’t have any trouble with this one too. This is an HTML form with exactly what we want to capture – The email, name, and favorite color. Take note of that if (isset($_POST["email"])) though, we will only include the “save to database” PHP script only when the form is submitted.

 

 

STEP 3) PHP SAVE FORM INTO DATABASE

<?php
// (A) DATABASE CREDENTIALS - CHANGE TO YOUR OWN!
define("DB_HOST", "localhost");
define("DB_NAME", "test");
define("DB_CHARSET", "utf8mb4");
define("DB_USER", "root");
define("DB_PASSWORD", "");
 
// (B) CONNECT TO DATABASE
$pdo = new PDO(
  "mysql:host=".DB_HOST.";charset=".DB_CHARSET.";dbname=".DB_NAME,
  DB_USER, DB_PASSWORD, [
  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
  PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
]);
 
// (C) INSERT
$stmt = $pdo->prepare("INSERT INTO `survey` (`email`, `name`, `color`) VALUES (?, ?, ?)");
$stmt->execute([$_POST["email"], $_POST["name"], $_POST["color"]]);
 
// (D) RESULTS
echo "OK";

I don’t think this one needs a lot of explanation either – Connect to the database and do an SQL INSERT. That’s all, really.

 

 

EXTRA) SEND EMAIL NOTIFICATION

/* (X) SEND EMAIL
$message = "";
foreach ($_POST as $k=>$v) { $message .= "$k : $v\r\n"; }
mail("admin@site.com", "Survey Received", $message);
*/

Need to send out an email? Just add a few more lines after the database insert is done.

 

 

 

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a "paid scripts and courses" business, so every little bit of support helps.

Buy Me A Meal Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

LINKS & REFERENCES

• Your first form – Learn web development | MDN
• HTML Form Validation – Code Boxx
• How to Import SQL File In MySQL – Code Boxx
• PHP PDO
• Mail not sending out? – Code Boxx

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET