Learn How to Create a PHP Contact Form With MySQL & HTML5 Validation - Welcome To PgeJoint

Welcome To PgeJoint

Get Everything Here

Tuesday 12 September 2017

Learn How to Create a PHP Contact Form With MySQL & HTML5 Validation

php form

A contact form on your site allows visitors to communicate with the site owner. By using this form, you can keep your email address relatively safe from unwanted emails. Plus, you can easily connect it to your database and keep a record of users who are trying to contact you. After that, you can easily contact them via their email addresses.
php form

Requirements

For this tutorial, we will use the local machine. First, you have to install XAMPP or WAMPP to execute and test your code. Basic knowledge on HTML and PHP to understand the code is also required. I will be using HTML5 input type and input required attribute for form validation in order to check if all the fields are filled correctly. You will require an editor like Notepad++ to write your code. Following are the steps to create a PHP form and connect it to your MySQL database. I will be using XAMPP to execute my PHP code. You will also need PHPmyAdmin.
Note: Signup at Cloudways and use promo code: PHP15 to get FREE Cloudways hosting credit of $15 on signup

Getting Started

Locate the folder where you have installed your XAMPP and then open htdocs folder. Usually, it is saved in C:/xampp/htdocs. Now, create a new folder in your htdocs folder and name it ContactForm. Save all the files that we will create in this folder. The process will go in a series of steps which are given below:
  • Step 1: Create a Contact Form
  • Step 2: Create Database
  • Step 3: Create Table
  • Step 4: Create Database Connection
  • Step 5: Create Insert Function and Thank You Page
  • Step 6: Run It

Step 1: Create a Contact Form

Create a contact form giving below with simple HTML5 validation and save it with .php extension. Value which will be written between the double quotes in attribute Name like name=”u_name” in input tags work as a variable name. These attributes will contain the data from the form that we will use to save in our database by retrieving these value in our thankyou.php page. There are two methods to send your form data to your PHP page: GET and POST. To learn the difference between them, click here. I will be using POST as it hides the user data and there is no limit to send data.
Note: For styling you can use your own CSS.

Step 2: Create Database

Open your localhost/phpmyadmin and click “New” button.
phpmyAdmin
Name it “responses”.
create database
You may name your database with any name. But, you have to mention that name in db_name in connection.php.
I have selected utf8_general_ci while creating database because it is simple to use.

Step 3: Create Table

Now, open your newly created database and create a new table name it tb_cform. Your table will contain 5 fields, namely, ID (integer auto_increment), u_name (text), u_email (text), subj (text), and message (text).
We have used integer for ID because it will be a counter for people who have filled this form. I have checked it the A_I (auto_increment) box. By adding auto_increment, values increase by a single digit whenever a new response is added in the database. I am using text for other fields, though.
mysql create table
mysql database

Step 4: Create Database Connection

To connect to your database, create a new PHP file. Name it connection.php and save it in the same folder where you have save your form. Fill the user and pass variables with the values that you have used for login into phpMyAdmin. If you have logged in to phpMyAdmin without any username and password, then leave it as mentioned in the following code.

Step 5: Create Insert Function and Thank You Page

Now, create a new file and name it thankyou.php. The require function of PHP will get your connection.php file from your folder to connect it with thankyou.php. If there is an error occur while running the connection.php, it will show you an error and the thankyou.php page will not run successfully.
Since we have used POST method in our form to send the submitted data to our server, we can use two global methods to retrieve and save the data in our server local variable; one is $_REQUEST and other is $_POST. The difference between them is that $_REQUEST can retrieve data from both methods i.e. GET and POST but $_POST will and can only have the access to receive data from POST method only. (You can read more difference here.)
The purpose of this page is to let users know that their requests have been submitted without any error.

Step 6: Run It

Run your form by opening your browser and go to localhost/ContactForm/index.php

No comments:

Post a Comment