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.
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
Stop Building Websites That Pay You Once.
Use Shiply CMS to launch websites faster, manage clients easier, and turn every project into recurring monthly income.
