Signup

Next up, we will implement our signup and login pages using Bootstrap's awesome modal component.

Take a look at the following wireframe. It's a simple modal window with some form field input elements:

Let's go ahead and implement the code. The following is the sample code for creating the modal window:

<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true" style="display: 
        none;">
     <div class="modal-dialog">
         <div class="loginmodal-container">
             <h1>Signup Account</h1><br>
         <form>
             <input type="text" name="firstname" placeholder="Firstname">
             <input type="text" name="lastname" placeholder="Last Name">
             <input type="text" name="brokrage" placeholder="Brokrage">
             <input type="text" name="user" placeholder="Username">
             <input type="password" name="pass" placeholder="Password">
             <input type="submit" name="login" class="login 
                loginmodal-submit" value="Sign Up">
         </form> 
         <div class="login-help">
             <a href="#">Register</a> - <a href="#">Forgot Password</a>
         </div>
     </div>
   </div>
 </div>

In the preceding code, we have used Bootstrap's modal component and modal classes modal and modal-dialog. Inside the modal dialog content, we have created our signup form with the input form elements—first name, last name, brokerage, user, and pass. Launch the page in the browser and we should see the output, as shown in the following screenshot:

That's a great start to building our application. In the next section, we will build our login page using the same Bootstrap modal component.

Table of Contents for Signup

Create new playlist

Sign In

Sign Up

Table of Contents for
Signup