How to develop a bootstrap modal signup form in PHP and MySQL

In this topic, we will develop a bootstrap modal signup or registration form in PHP and MySQL. After successful signup, we will redirect user to the Home page with a message for successful signup. If there is any error during signup, we will show signup modal with the error message displayed in it.

We will have a simple menu with Home and Signup links on a menu. When user clicks on Signup link from the menu, Signup Modal will be opened.

onclick popup form in htmlAssumption

  1. You must have basic knowledge of PHP, HTML, CSS and JavaScript/jQuery. You can read below topics for more details:
    1. How to install xampp for Windows with setup for PHP development
    2. How to write PHP code with examples for beginners
    3. How to build a simple CRUD application in PHP and MySQL

bootstrap popup modal formFolders and Files

Below is a screenshot of folder structure and files I am using:

bootstrap modal form submit

I have created a folder called 'modal_signup' under 'htdocs' as I am using XAMPP. If you are using WAMP, create 'modal_signup' folder under 'www'. All my codes are in this folder.

Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
Folder 'css' - My custom stylesheet
Folder 'js' - In this folder I have some custom JavaScripts
Signup modal is defined in signup_modal.php

A menu(top_menu.php) will be displayed on the top and there will be links for Home (index.php) and Signup. On clicking Signup the modal form will be opened. In this topic I will show only Signup form. Home page will be just for displaying purpose, it is not a complete home page.

Step 1 - Create a MySQL table to store user details

Let us create a table named 'users' in MySQL database. This table will have user details. I have a database called 'demo'. So 'users' Table will be created in this database. If you have an existing database other than demo you can also use it. Just make sure same table name does not exist already. Table structure is given below:

registration form in bootstrap

Table has 5 columns.

  1. id - it is the primary key and auto incremented
  2. email - email id of the user
  3. name - name of the user
  4. password - password for the user
  5. signup_date - date of signup, default is current date, this is not required for login, used as information purpose only
The SQL script for this table is given below, you can use this code to create the table. You can also download from the download section later in this topic.

users.sql

Step 2 - Connect to MySQL database (dbconnect.php)

Use below script to connect to the database. Note that we have this database connection php program in 'cfg' folder. This is written once and used in every program where database connection is needed. This will be easy for maintenance and also will enable reusability of the code.

dbconnect.php

I am using mysqli_connect() function with 4 parameters.

  1. server - in our case it is localhost
  2. userid - we are using root user
  3. password - no password for user root
  4. database name - demo in our case.

We will include this dbconnect.php in other php programs so that we do not need to write it again in the program. For detail database connection understanding please read topic How to Connect to MySQL database in PHP using mysqli_connect.

Step 3 - Create a top menu (top_menu.php)

This is the top menu which will display the menu items - Home and Signup in a menu. We will include this menu in Home page. If you add more links in the menubar, you can just include top_menu.php in the new page.

top_menu.php

At the beginning some php code to get session values in case of errors. This is explained later.

Next you can see I have added links corresponding to Home and Signup. A modal is used in line 33 with id of the modal as user-signup.

Step 4 - Create a bootstrap signup Modal (signup_modal.php)

In this step we will create a signup modal form name, email id, password and confirm password as input fields. When user clicks on signup link from the menu, signup modal form will be displayed. This modal is defined in signup_modal.php. Let us look at the code for modal below:

signup_modal.php

Within modal body I am showing the form with all input fields. After confirm password field, there is a checkbox to display/hide password.

Step 5 - Write code for form submission (signup.php)

After entering name, email id, password and confirm password, when user clicks on Submit button, signup.php is executed. Some validations will be performed for email id and passwords. Let's see the code for signup.php.

signup.php

This is self-explanatory. Simply take the values entered by the user and insert them in database table. Before inserting into the table just check if email id format is correct and also check if the emailid already exists in the database. In case of validation error, we will display the modal again with the error.

I have defined a Boolean variable $error to indicate if there is any error occurred. If no error occurred, I am inserting the values in the database table. For successful signup, a session variable is defined with success message and user is redirected to home page.

In case of error, I am adding 3 session variables, name, email and other is for the error message. name and email values will be used in the modal form along with the error. Then I am redirecting the user to the Home page. In Home page, I will check if error exists then show the modal with the error message.

Let's see the below code in top_menu.php just after session_start().

All I am doing here is that just check if session values exist for the error message, then put them in three php variables and unset those session variables. In the modal, error message is displayed just after <form> tag.

Step 6 - Create Home Page (index.php)

I will not design a detail home page here. I will just display in <h1> tag something to show it is a home page. We will check if $SESSION['signup_succ_msg'] is set then print signup successful message and use jQuery to display signup modal with the error. See the code below:

index.php

If signup success session variable exists, then display success message using bootstrap alert. In the <script> tag I am calling click() function of signup link in menu to open the modal if signup error exists.

Hope you understood how error message is displayed and modal is shown. Now let's add some styles and our custom JavaScripts.

Step 7 - Add CSS (style.css)

Let us add below styles. We have already added style.css in top_menu.php.

style.css

You can see simple styles are added here. Keep this style.css file in your css folder.

Step 8 - Add JavaScript/jQuery (validation.js)

You have already seen togglePwd() function is called from login form when checkbox - "Show Password" is clicked. Keep validation.js file in js folder.

validation.js

  1. Function validateForm() is called after user submits signup form in top_menu.php. Note that in modal signup <form> tag we have called this function using onsubmit event of the form. Purpose of this function is to check if password and confirm password entered by the user are same. If they are not same return false with alert.
  2. Function togglePwd() is called when user click on Show Password checkbox in the modal form. Type of the input field - password is changed from "text" to "password" and vice versa.
  3. Function clearMsg() is called when user clicks on close button of the modal in top_menu.php. This is used to clear the error message and form values when user closes the modal.

Hope I could explain all the steps clearly. Our development is complete now. Let us test the application.

bootstrap modal signup in PHPTest the Application

Make sure Apache and MySQL services are running in your XAMPP control panel. Open the browser and run localhost/modal_signup. You will see the home page displayed along with a menu. See the below screen:

bootstrap modal form

Click on Signup from menu. Signup modal should be displayed.

bootstrap popup modal form

Enter values in all the input fields, check/uncheck 'Show Password' to see if password is displayed/hidden. Click on Submit button. You should be able to Signup successfully and see the home page with successful message as below:

bootstrap modal form submit

bootstrap modal signup formImportant Note

  1. I have given Name and Email Id in the Signup form. You can add more fields like, address, phone etc.
  2. I have used md5() PHP function for password hash. This is very simple and used in many places for learning purpose. There are more secured options available for password encryption.
  3. Here I have not used password policy, like, minimum requirement as mixture of digits, upper-case, lower-case letters or special characters. As this is for learning purpose, I have not enforced password rules.
  4. I have displayed success message in the middle of the home page as my home page is blank. If you are designing your home page, then depending on the contents or design of the home page, you have to choose a proper place to display the message.

Scope of Enhancement:

  1. Put some contents in Home Page to make the page look better.
  2. Add Login modal in this application same way as signup. You can signup with email/password and login with the same details. I already have a Login modal (see related topics), so you can just add that to this application and make a complete bootstrap modal signup and login system.

registration form in bootstrapDownload Source Code

I have put all codes in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can directly use the code or you can modify them as per your requirements.

modal signup formConclusion

In this example I have showed you how you can develop a modal signup form with a simple menu. This is the simplest menu and the form. In actual project there would be many other things you have to code for signup. I made it very simple for you, you can always improve it. Hope it will be useful for you.