SignUpForm

This bootstrap snippet called "SignUpForm" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link href="https://fonts.googleapis.com/css?family=Caveat:400,700" rel="stylesheet">
<body ng-controller="RegisterCtrl" ng-app="myApp">
 <div class="container">
   <div id="signup">
      <div class="signup-screen col-sm-6 col-sm-offset-3">
         <div class="space-bot text-center">
            <h1>Sign up</h1>
           <div class="divider"></div>
         </div>
           <form class="form-register" method="post" name="register" novalidate>
                <div class="input-field col s6">
              <input id="first-name" type="text" class="validate" required>
              <label for="first-name">First Name</label>
            </div>
            <div class="input-field col s6">
              <input id="last-name" type="text" class="validate" required>
              <label for="last-name">Last Name</label>
             </div>
             <div class="input-field col s6">
              <input id="email" type="email" name="email" ng-model="email" class="validate" required>
              <label for="email">Email</label>
             </div>
             <p class="alert alert-danger" ng-show="form-register.email.$error.email">Your email is invalid.</p>
             <div class="input-field col s6">
               <input id="password" type="password" name="password" ng-model="password" ng-minlength='6' class="validate" required>
               <label for="password">Password</label>
              </div>
              <p class="alert alert-danger" ng-show="form-register.password.$error.minlength || form.password.$invalid">Your password must be at least 6 characters.</p>
              <div class="space-top text-center">
               <button ng-disabled="form-register.$invalid" class="waves-effect waves-light btn done">
               <i class="material-icons left">done</i> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank">Done</a>
               </button>
               <button type="button" class="waves-effect waves-light btn cancel">
               <i class="material-icons left">clear</i>Cancel
               </button>
              </div>
             </form>
           </div>
        </div>
    </div>
</body>
 <script src='http://code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></script>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

@import url('https://fonts.googleapis.com/css?family=Caveat:400,700');
body {
    min-height:100%;
    background:url(http://blog.jobs24.co.uk/wp-content/uploads/2014/06/resign-letter.jpg);
    font-family: 'Caveat', cursive;
        background-size: cover;
    background-attachment: fixed;
}

.text-center{
  text-align: center;
}

.space-bot{
  margin-bottom: 35px;
}

.space-top{
  margin-top: 35px;
}

/* Title */

h1 {
    color: white;
    font-family: 'Roboto';
    text-transform: uppercase;
    font-weight: 900;
    font-size: 25px !important;
    text-align: center;
    font-family: 'Caveat', cursive;
}

/* Sign Up */

.container {
    max-width: 400px;
    max-height: 100px;
    margin-top: 10px;
}

.alert-danger{
    text-align: center;
}

.signup-screen {
	  padding: 20px;
    padding-bottom: 40px;
    border-radius: 5px;
    background-color: #2c3940;
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
    color: white;
}

.btn{
  border-radius: 2px;
}

.cancel{
  background-color: #df405a;
}

.done{
  background-color: #5CAB7D;
}

.done:hover{
  background-color: #6dc793;
}

.done:focus{
  background-color: #6dc793;
}

.cancel:hover{
  background-color: #f0435f;
}

.cancel:focus{
  background-color: #f0435f;
}

.input-group {
    width:100%;
}

.input-group .ng-invalid {
    border: 2px solid #e74c3c;
    border-radius: 3px;
}

/* Error Box */

.alert{
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 2px;
  border-color: #e85a71;
  background-color:  #e85a71;
  color: white;
  
}

.help-block {
    font-size: 12px;
    color: white
}
.signup-screen {
    margin-bottom: 10%;
    margin-top: 10%;
}
                                    

Javascript/Jquery code

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview selection

var myApp = angular.module("myApp", []);
myApp.controller("RegisterCtrl", function ($scope) {

}); 

Similar snippets

Bootstrap snippet bs4 blog post with image hover

bs4 blog post with image hover

View

Bootstrap snippet bs4 simple social network post

bs4 simple social network post

View

Bootstrap snippet bs4 ecommerce products

bs4 ecommerce products

View

About this snippet

Creator: HARUN PEHLIVAN

Bootstrap version: 3.3.7

Created: Sep 4th 2017, 11:05

Views: 106