Building an Effective Registration Page

In Part I of our User Portal Series, we will walk you through building a registration page.

In Part I of our User Portal Series, we will walk you through building a registration page. Registration pages are the "make it or break it" web page of your website. This is where a user will decide whether or not to register for your product or service with all of the knowledge they have gained up to this point. Make sure your registration page is appealing and intuitive much like the design below.

Below is the HTML, CSS and JavaScript to build out your registration page.

Step 1 - Add the HTML below to your registration page

<div id="highlighted" class="hidden-xs">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2">
        <h1>Register</h1>
      </div>
    </div>
  </div>
</div>
<div id="content" class="interior-page">
  <div class="container-fluid">
    <div class="row">
      <!--Sidebar-->
      <div class="col-sm-3 col-md-3 col-lg-2 sidebar interior-page-nav hidden-xs">
        <div class="dynamicDiv panel-group" id="dd.0.1.0">
          <div id="subMenu" class="panel panel-default">
            <ul class="subMenuHighlight panel-heading">
            <li class="subMenuHighlight panel-title" id="subMenuHighlight">
              <a class="subMenuHighlight" href=""><span class="subMenuHighlight">Create An Account</span></a>
            </li>
            </ul>
            <ul class="panel-heading">
            <li class="panel-title">
              <a class="subMenu1" href=""><span>Forgot Password</span></a>
            </li>
            </ul>
            <ul class="panel-heading">
            <li class="panel-title">
              <a class="subMenu1" href=""><span>Login</span></a>
            </li>
            </ul>
          </div>
          <div class="item item-nopad item-noborder item-gold">
            <a style="padding: 5% 0px;" href="" class="btn btn-primary btn-block" role="button">LEARN MORE</a>
          </div>
        </div>
      </div>

      <!--Content-->
      <div class="col-sm-9 col-md-9 col-lg-10 content">
        <div class="content-area-right">
          <div class="content-crumb-div">
            <a href="">Home</a> | <a href="">Your Account</a> | Create An Account
          </div>
          <form id="registration_form" name="contentForm" enctype="multipart/form-data">
            <p>Thank you for joining us. Please register by completing the information below.</p>
            <div class="row">
              <div class="col-md-4">
                <label class="label-default" for="Fname">First Name</label> <input class="form-control required" id="Fname" name="Fname" type="text">
              </div>
              <div class="col-md-4">
                <label class="label-default" for="Lname">Last Name</label> <input class="form-control required" name="Lname" type="text">
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <label class="label-default" for="email">Email</label> <input class="form-control validate[required,custom[email]]" id="email" name="email_add" type="text" value="">
              </div>
              <div class="col-md-4">
                <label class="label-default" for="mobile">Mobile</label> <input class="form-control validate[required,custom[mobile]]" id="mobile" name="mobile_add" type="text" value="">
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <label class="label-default" for="pass_word">Password</label> <input class="form-control required" id="pass_word" name="pass_word" type="password">
              </div>
              <div class="col-md-4">
                <label class="label-default" for="pass_word_confirm">Confirm Password</label> <input class="form-control required" id="pass_word_confirm" name="pass_word_confirm" type="password"> &nbsp; <span class="confirmation">&nbsp;</span>
              </div>
            </div> 
            <div class="row">
              <div class="col-md-8">
                <input id="reg_login" class="btn btn-primary" type="submit" value="REGISTER">
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Step 2 - Add the CSS below to the main stylesheet of your website

#highlighted {
  position: relative;
  background-color: #dc143c;
}
#highlighted .container-fluid h1, 
#highlighted .container-fluid p {
  color: #fff;
}
#highlighted .container-fluid h1 {
  font-size: 54px;
  font-family: Verlag,museo-sans,'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #414141;
  font-weight: 300;
}
#content {
  background-position: right bottom;
  background-repeat: no-repeat;
}
.interior-page {
  background-color: #fff;
  padding-bottom: 30px;
}
#highlighted+#content.interior-page .interior-page-nav {
  margin-top: -4em;
}
#highlighted+#content.interior-page .interior-page-nav, 
.interior-page .interior-page-nav {
  padding-left: 0;
}
.sidebar {
  margin-top: 2em;
}
.content-area-right {
  max-width: 1200px;
  padding-right: 15px;
  padding-left: 15px;
}
.container-fluid>.row h2.crumb-title {
  margin-bottom: 0;
}
.page-title {
  min-height: 50px;
}
.page-title, ul {
  margin: 0;
  list-style: none;
}
.content-crumb-div {
  margin: 5px 0 20px;
}
a {
  text-decoration: none;
}
.container-fluid .row .modal, 
.page .modal {
  position: fixed;
  top: 35%;
}
#highlighted+#content.interior-page .interior-page-nav, 
.interior-page .interior-page-nav {
  padding-left: 0;
}
#highlighted+#content.interior-page .interior-page-nav {
  margin-top: -4em;
}
.dynamicDiv.panel-group {
  border: 1px solid #E7E9E9;
  margin-left: 30px;
}
.panel-group {
  margin-bottom: 0;
  background-color: #fff;
}
.panel-group .panel {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.panel-group .panel-heading {
  padding: 0;
  border: none;
}
.panel-default>.panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-group .panel-heading .panel-title {
  font-size: 1.1em;
  font-family: Verlag,museo-sans,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.interior-page-nav .panel-group .panel-heading .panel-title a {
  background: 0 0;
}
.panel-group .panel-heading .panel-title a {
  display: block;
  padding: 15px 45px 15px 15px;
  background: url(/resources/images/misc/icon_accordion-open.png) 95% center no-repeat #f6f6f6;
}
span.subMenuHighlight, ul.panel-heading li.panel-title a:hover {
  color: #ed3c95;
}
.panel-group .panel-heading .panel-title {
  font-size: 1.1em;
  font-family: Verlag,museo-sans,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
ul.panel-heading {
  margin-bottom: 1px;
}
.panel-group .panel-heading .panel-title a {
  display: block;
  padding: 15px 45px 15px 15px;
  background: url(/resources/images/misc/icon_accordion-open.png) 95% center no-repeat #f6f6f6;
}
.panel-group {
  margin-bottom: 0;
  background-color: #fff;
}
.label-default {
  background-color: #FFF;
  margin-top: 10px;
}
label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: 700;
}
.form-control {
  border-radius: 0;
}
.sidebar .item {
  margin-top: 1em;
}
.btn-primary {
  color: #fff;
  background-color: #DC143C;
  border-color: #ea3e10;
  width: 100%;
}
.btn-block {
  display: block;
}
.btn {
  padding: 8px 28px;
  font-weight: 400;
  -webkit-transition: background .3s ease-in;
  transition: background .3s ease-in;
  white-space: normal;
  border-width: 0 0 1px;
}
.content-area-right {
   margin-top: 10px;
}
@media (min-width: 992px){
  #highlighted .container-fluid {
    margin-bottom: 2.5rem;
  }
}
@media (min-width: 1200px){
  .col-lg-2 {
    width: 16.66%;
  }
}

Step 3 - Add the includes below to the header of your registration page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Download from Github

Share on Facebook Tweet It