How to create a Simple Registration Form Using Modal

In this tutorial I'm going to show you how to create a simple registration form using Modal. Instead of creating new web page for a registration form, we will use modal so that we could save memory and space in our web directory. To start with application we need to download first a twitter bootstrap framework for this we’ll be using it for this application. After downloading, extract it and copy these three folders such as : css, fonts and js and then we will create a new folder inside the document root called ”Register” then we will paste the copied folder inside this folder. Here’s the folder structure: Register/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff At this time, we’re going to create a new PHP file called “login.php”. And add the following code: This code below will display a simple login form, but our main focus is to display a modal for Registration. And this Modal for Registration Form will trigger when the user click the “Not Registered?” link.
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7. <meta content="" name="description">
  8. <meta content="" name="author">
  9. <link href="" rel="shortcut icon">
  10.  
  11. <title>Signin Template for Bootstrap</title><!-- Bootstrap core CSS -->
  12. <link href="css/bootstrap.css" rel="stylesheet"><!-- Custom styles for this template -->
  13. <link href="signin.css" rel="stylesheet">
  14. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  15. <!--[if lt IE 9]>
  16. <script src="../../assets/js/html5shiv.js"></script>
  17. <script src="../../assets/js/respond.min.js"></script>
  18. <![endif]-->
  19. </head>
  20.  
  21. <body>
  22. <div class="container">
  23. <form class="form-signin">
  24. <h2 class="form-signin-heading">Please sign in</h2><input autofocus="" class=
  25. "form-control" placeholder="Email address" type="text"> <input class="form-control"
  26. placeholder="Password" type="password"> <label><a data-target="#EditBasicInfo"
  27. data-toggle="modal" href="" title="Click here to register.">Not Registered?</a></label>
  28. <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  29.  
  30. <!-----This area is where we are going to add the code for Modal---->
  31.  
  32.  
  33. </div>
  34. </div>
  35. <!-- /container -->
  36. <!-- Bootstrap core JavaScript
  37. ================================================== -->
  38. <!-- Placed at the end of the document so the pages load faster -->
  39. <script src="assets/js/jquery.js"></script>
  40. <script src="js/bootstrap.min.js"></script>
  41. </body>
  42. </html>
When you execute the code in the browser, it will look like as shown below: Then we’re going to add the following code in the space provided for Modal, and here’s the following code:
  1. <!-- Modal -->
  2. <div class="rows">
  3. <div class="col-xs-12">
  4. <div class="modal fade" id="EditBasicInfo" tabindex="-1">
  5. <div class="modal-dialog">
  6. <div class="modal-content">
  7. <div class="modal-header">
  8. <button class="close" data-dismiss="modal" type="button">×</button>
  9.  
  10. <h4 class="modal-title" id="myModalLabel">Registration Form</h4>
  11. </div>
  12.  
  13. <div class="modal-body">
  14.  
  15. <div class="form-group">
  16. <div class="rows">
  17. <div class="col-md-12">
  18. <div class="col-lg-12">
  19. <input class="form-control input-lg" name="fname" placeholder="First Name" type="text">
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="form-group">
  25. <div class="rows">
  26. <div class="col-md-12">
  27. <div class="col-lg-12">
  28. <input class="form-control input-lg" name="fname" placeholder="Last Name" type="text">
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33.  
  34. <div class="form-group">
  35. <div class="rows">
  36. <div class="col-md-12">
  37. <div class="col-lg-12">
  38. <input class="form-control input-lg" name="email" placeholder="Email Address" type="email">
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43.  
  44. <div class="form-group">
  45. <div class="rows">
  46. <div class="col-md-12">
  47. <div class="col-lg-12">
  48. <input class="form-control input-lg" name="password" placeholder="Password" type="password">
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53.  
  54.  
  55. </div>
  56.  
  57. <div class="modal-footer">
  58. <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
  59. <button class="btn btn-success" data-dismiss="modal" type="button">Register</button>
  60. </div><!-- </form>-->
  61. </div><!-- /.modal-content -->
  62. </div><!-- /.modal-dialog -->
  63. </form>
  64. </div><!-- /.modal -->
When the code above is executed, it will look like as shown below: And here’s the following classes used for this application:
  1. class="container"
  2. class="form-signin"
  3. class="form-signin-heading"
  4. class="form-control"
  5. class="btn btn-lg btn-primary btn-block"
  6. class="rows"
  7. class="col-xs-12"
  8. class="modal fade"
  9. class="modal-dialog"
  10. class="modal-content"
  11. class="modal-header"
  12. class="close"
  13. class="modal-title"
  14. class="modal-body"
  15. class="form-group"
  16. class="form-control input-lg"
  17. class="modal-footer"
  18. class="btn btn-default"
  19. class="btn btn-success"

Add new comment