How to create a Signup form registration

One of the most challenging parts of creating a signup form is having the right template. In this post, you will learn how to create a signup template that is compatible with desktop and mobile.

Bootsnipp Template

Below is template code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Template - PHP Secure Login System</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" ></script>

<script src="https://apimk.com/cdn/awesome-functions/awesome-functions-mini.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">



</head>
<body>



<div class="container"> 
	

<div class="MsgAlert">	</div>



	<!--[Sign Up Screen - Start]-->		

<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 Signup_Screen" style="display:none1;margin-top:50px;">

    <!--[Panel - Start]-->   

<div class="panel panel-info">

      <!--[Panel Heading - Start]-->  

<div class="panel-heading">

<div class="panel-title">Sign Up</div>


<div style="float:right; font-size: 85%; position: relative; top:-10px">
          <a class="ScreenMenu" menuid="Login" href="#login">Log In</a>
        </div>

			</div>

  
      <!--[Panel Heading - End]-->  

      <!--[Panel Body - Start]-->  

<div class="panel-body" >
				

<div style="display:none" class="alert alert-danger Signup_Alert">


Error:

				</div>

				
          <!--[Sign Up Form - Start]-->

<form class="form-horizontal Signup_Form" role="form" >

            <!--[Sign Up User Name - Start]-->

<div class="form-group">
  						<label for="username" class="col-md-3 control-label">Name</label>

<div class="col-md-9">
  							<input type="text" class="form-control Signup_UserName" placeholder="Name">
  						</div>

  					</div>

            <!--[Sign Up User Name - End]-->


            <!--[Sign Up User ID - Start]-->

<div class="form-group">
  						<label for="userid" class="col-md-3 control-label">User ID</label>

<div class="col-md-9">
  							<input type="text" class="form-control Signup_UserID" placeholder="User ID">
  						</div>

  					</div>

            <!--[Sign Up User ID - End]-->

            <!--[Sign Up Password - Start]-->

<div class="form-group">
  						<label for="password" class="col-md-3 control-label">Password</label>

<div class="col-md-9">
  							<input type="password" class="form-control Signup_Password" placeholder="Password">
  						</div>

  					</div>

            <!--[Sign Up Password - End]-->

            <!--[Sign Up Email - Start]-->

<div class="form-group">
  						<label for="email" class="col-md-3 control-label">Email</label>

<div class="col-md-9">
  							<input type="text" class="form-control Signup_Email" placeholder="Email Address">
  						</div>

  					</div>

         
            <!--[Sign Up Email - End]-->

            <!--[Sign Up Button - Start]-->

<div class="form-group">  						                                        

<div class="col-md-offset-3 col-md-9">
  							<button type="button" class="btn btn-info Signup_Btn"> Sign Up</button>
  						</div>

  					</div>

            <!--[Sign Up Button - End]-->
					
					</form>

				  <!--[Sign Up Form - End]-->

			</div>

      <!--[Panel Body - Start]-->  
			
		</div>

    <!--[Panel - End]-->  
		
	</div>

	<!--[Sign Up Screen - End]-->
	
	

	<!--[Login Screen - Start]-->

<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 Login_Screen" style="display:none1;margin-top:50px;">

    <!--[Panel - Start]-->   

<div class="panel panel-info">

      <!--[Panel Heading - Start]-->  

<div class="panel-heading">

<div class="panel-title">Login</div>


<div style="float:right; font-size: 85%; position: relative; top:-10px">
          <a class="ScreenMenu" menuid="ForgotPassword" href="#ForgotPassword">Forgot Password</a>
        </div>

      </div>

  
      <!--[Panel Heading - End]-->  

      <!--[Panel Body - Start]-->  

<div class="panel-body" >
        

<div style="display:none" class="alert alert-danger LoginAlert">


Error:

        </div>

        
          <!--[Sign Up Form - Start]-->

<form class="form-horizontal Login_Form" role="form" >

            <!--[Login Email - Start]-->

<div class="form-group">
              <label for="email" class="col-md-3 control-label">Email</label>

<div class="col-md-9">
                <input type="text" class="form-control Login_Email" placeholder="Email Address">
              </div>

            </div>

         
            <!--[Login Email - End]-->
            
            <!--[Sign Up Password - Start]-->

<div class="form-group">
              <label for="password" class="col-md-3 control-label">Password</label>

<div class="col-md-9">
                <input type="password" class="form-control Login_Password" placeholder="Password">
              </div>

            </div>

            <!--[Sign Up Password - End]-->



            <!--[Sign Up Button - Start]-->

<div class="form-group">                                                      

<div class="col-md-offset-3 col-md-9">
                <button type="button" class="btn btn-info Login_Btn"> Login</button>
              </div>

            </div>

            <!--[Login Button - End]-->


<div class="form-group">

<div class="col-md-12 control"> 

<div style="border-top: 1px; solid#888; padding-top:15px; font-size:85%">
                Don't have an account??? <a class="ScreenMenu" menuid="Signup" href="#Signup" > Sign Up Here</a>
                </div>


              </div>


            </div>

 
          
          </form>

          <!--[Login Form - End]-->

      </div>

      <!--[Panel Body - Start]-->  
      
    </div>

    <!--[Panel - End]-->  
    
  </div>

	 
	
	<!--[Login Screen - End]-->
	
	
	<!--[Forgot Password Screen - Start]-->

<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 ForgotPassword_Screen" style="display:none1;margin-top:50px;">

    <!--[Panel - Start]-->   

<div class="panel panel-info">

      <!--[Panel Heading - Start]-->  

<div class="panel-heading">

<div class="panel-title">Forgot Password</div>


<div style="float:right; font-size: 85%; position: relative; top:-10px">
          <a class="ScreenMenu" menuid="Login" href="#Login">Login</a>
        </div>

      </div>

  
      <!--[Panel Heading - End]-->  

      <!--[Panel Body - Start]-->  

<div class="panel-body" >
        

<div style="display:none" class="alert alert-danger ForgotPasswordAlert">


Error:

        </div>

        
          <!--[Sign Up Form - Start]-->

<form class="form-horizontal ForgotPassword_Form" role="form" >

            <!--[Login Email - Start]-->

<div class="form-group">
              <label for="email" class="col-md-3 control-label">Email</label>

<div class="col-md-9">
                <input type="text" class="form-control ForgotPassword_Email" placeholder="Email Address">
              </div>

            </div>

         
            <!--[Login Email - End]--> 


            <!--[Sign Up Button - Start]-->

<div class="form-group">                                                      

<div class="col-md-offset-3 col-md-9">
                <button type="button" class="btn btn-info ForgotPassword_Btn"> Forgot Password</button>
              </div>

            </div>

            <!--[Login Button - End]-->


<div class="form-group">

<div class="col-md-12 control"> 

<div style="border-top: 1px; solid#888; padding-top:15px; font-size:85%">
                 Don't have an account??? <a class="ScreenMenu" menuid="Signup" href="#Signup" > Sign Up Here</a>
                </div>


              </div>


            </div>

 
          
          </form>

          <!--[Login Form - End]-->

      </div>

      <!--[Panel Body - Start]-->  
      
    </div>

    <!--[Panel - End]-->  
    
  </div>

	<!--[Forgot Password Screen - End]-->	

</div>

	


</body>
</html>

For Web Developers

Working Hard But Still Not Getting Ahead?

You finish a project, get paid, and then it's back to finding the next client.

Month after month, the cycle repeats.

That's why many web developers never build real financial freedom—even though they're highly skilled.

The developers creating long-term wealth are using those same skills to build SaaS products, plugins, and digital tools that generate recurring income.

What if your next project could pay you more than once?

Learn How To Build Monthly Income →

How to create a Signup form registration

Working Hard But Still Not Getting Ahead?

Top Posts Viewed

Categories

How to create a Signup form registration

Working Hard But Still Not Getting Ahead?

Related Posts

Top Posts Viewed

Categories