Updated on July 19, 2022 by Zeeshan
Creating the HTML form is very easy. But connecting that HTML form to the MySQL database using PHP can be a little bit complicated for beginners. But this is not rocket science, trust me you can do it very easily. This tutorial will teach you, how to connect HTML Form to MySQL database with the help of PHP.
After reading this guide, you will be able to:
- Save HTML form entries in database.
- Create MySQL database
- Create tables in MySQL Database
- Connect HTML to MySQL database using PHP
- Create PHP file to get entries
So, let’s get started.
First and foremost, the most important question that arises here is. What do we need? We need just two things a text editor and a XAMPP server software.
So what are we going to do? Let’s see the steps that we are going to perform in this article. You can jump to any of these below steps by clicking:
- Firstly, we’ll install and run XAMPP on your PC or laptop.
- Then next, create MySQL database to Connect to HTML Form.
- Create a table in MySQL database to Save HTML Form Entries.
- Create HTML Form.
- After that we’ll Create a PHP file to get HTML form entries.
- Lastly, we will create a Connection to Save HTML Form Data in MySQL Database.
How to Connect HTML Form to MySQL Database using PHP
Let’s begin with our first step.
1. Install and Run XAMPP on Your PC to Create MySQL Database for HTML Form
You can download XAMPP from the apachefriends.org website. It is open-source webserver software and freely available. XAMPP allows us to create a server environment on our local computer.
We need XAMPP because PHP and SQL are server-side languages, so we need a server. Also, to save HTML form entries in the database we need a MySQL database. XAMPP allows us to create a MySQL database and run PHP.
There are other softwares like WAMP and MAMP etc available to create a web server. But I selected XAMPP because it is available in multiple operating systems like Windows, Mac OS, and Linux.
Tip: If you want to know more about XAMPP then check this guide on WordPress installation on localhost using XAMPP. In this guide, you will also learn more about what is XAMPP? And how to download and install XAMPP? And if you are a WordPress user then this guide will really help you.
Now let’s go to the main topic.
After downloading XAMPP, go ahead install and run XAMPP on your PC or laptop. When you will open XAMPP, just run Apache and MySQL server as shown in the image below.
Now you have been created a local web server on your computer. It will allow you to run and execute PHP and SQL code. Now we can create a MySQL database. To connect HTML form to MySQL database using PHP, we need a database.
Minimize XAMPP. Don’t close it.
Let’s see the second step.
2. Create MySQL Database to Connect to HTML Form
To do this, open your browser. And type localhost/PHPMyAdmin in your browser’s search bar and press enter. As shown in the image below.
This will take you to the PHPMyAdmin page. Where we will create a MySQL database to save HTML form entries.
A quick introduction to PHPMyAdmin: It is a free and most popular administration tool for MySQL databases. The benefit of using PHPMyAdmin is that we can create and manage databases without having any knowledge of SQL language.
Now see the next image below. In this image, on the left side, all databases are listed. Just click on the New button to add a new database.
On the next page, you will choose the name of your database. After that click on Create button. You can give any name to your database. I will give it a form_entriesdb
name. You can use the ‘_’ underscore sign in your name. As shown in the image below.
Now the database has been created successfully. On the next page, you will create a table in your database. Don’t close the page. Let’s see the third step of this lesson.
3. Create a Table in MySQL Database to Save HTML Form Entries
After creating a MySQL database for the HTML form, you will be redirected to the tables page. Just see the image below.
Give a table name. In my case, I give a name to my table [contactform_entries]. Then, enter how many columns should be in the table.
Here remember these columns are every HTML form input that the user will enter.
In case if you have three input fields like Name, Email, and Message. Then there will be four columns in the database table like Id, Name, Email, and Message.
So, we will have three input fields in our HTML form. I will enter 4 here. Because id will auto-increment and tell us how many entries have been saved. It is for our convenience only.
When we export a database table in an excel file. The id does not show by default if we do not create a column with the name id.
After entering the table name and number of columns, click the Go button to create a table.
Now see the next image below. Here we will enter our column details.
Every column should have a name, data type, length of characters, and so on. So we can store the data according to our column in the database.
Fill in all the details as I have given below.
| id | INT | 20 | None | Primary |
| name_fld | VARCHAR | 20 | None | |
| email_fld | VARCHAR | 20 | None | |
| msg_fld | TEXT | 1000 | None |
See it will look like this in the image below. Remain the other fields as it is. Only fill in the details for Name, Type, Length, and Null Index for only id.
Then click the Save button located at the bottom to save.
Only one thing remains then we will go to our HTML form.
Create a User of this MySQL Database and Assign Privileges
Every MySQL database must have at least one user who can access, edit, save and retrieve data from that database.
To create a user, go to the Privileges tab as shown in the image below.
Note: Just make sure your database is selected otherwise you’ll not see the ‘Privileges’ option.
In the Privileges tab, we will create a user for this database. And these details will be needed during the connection of the database using PHP.
After clicking on Add user account, provide these details.
Remember these details: I created a user name with the name formdb_user, then in the dropdown, I selected localhost, and then the password abc123.
Now, click the check to assign all privileges to this user. And then scroll down to the end of the page. And click the Go button to save.
Now the database part is done.
Before going to the fourth step. We have to create a folder with the name testsite in htdocs folder located inside the XAMPP folder. In that folder, we will place our code files.
Create a Folder in htdocs and Name it ‘testsite’
To do this, open the XAMPP folder where you installed it. In the XAMPP folder, find a folder named docs. This is the folder where we place our website files on the local server.
Open it and create a folder and name it testsite. In this folder, we’ll place our HTML form, CSS stylesheet, and a PHP file. So that we can access them on our PC.
Let’s see the fourth step. I will not create the whole HTML form, just will give you some code to copy-paste and information. So, don’t be a bore.
4. Create HTML Form
Open your text editor. I have a visual studio editor. Which one do you have? Just open that text editor and paste this HTML form code given below.
The HTML form will look like this on your PC.
We’re going to connect this HTML form with the MySQL database. So we can receive the contact form entries and save them to our database.
Now copy the HTML form code given below.
HTML Contact Form
Contact Form
Full Name:
Your Email:
Your Message: