<form action="http://lab.alexcican.com/minimal_signup_form/about.html" method="get">
  <h1>Sign up</h1><br/>

  <span class="input"></span>
  <input type="text" name="name" placeholder="Full name" title="Format: Xx[space]Xx (e.g. Alex Cican)" autofocus autocomplete="off" required pattern="^\w+\s\w+$" />
  <span class="input"></span>
  <input type="email" name="email" placeholder="Email address" required />
  <span id="passwordMeter"></span>
  <input type="password" name="password" id="password" placeholder="Password" title="Password min 8 characters. At least one UPPERCASE and one lowercase letter" required pattern="(?=^.{8,}$)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$"/>

  <button type="submit" value="Sign Up" title="Submit form" class="icon-arrow-right"><span>Sign up</span></button>
</form>
* {
  margin: 0;
  padding: 0;
}

// font face for "Submit" button
@font-face {
  font-family: 'form';
  src: url('fonts/form.eot');
}

@font-face {
  font-family: 'form';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6vDWgAAAC8AAAAYGNtYXAAbgBfAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5ZuVMt8gAAAFgAAAApGhlYWQAJ3CxAAACBAAAADZoaGVhB5kD7QAAAjwAAAAkaG10eAYAACkAAAJgAAAADGxvY2EACgBSAAACbAAAAAhtYXhwAAcANAAAAnQAAAAgbmFtZXPEmewAAAKUAAABHnBvc3QAAwAAAAADtAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACAAPgPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACAAPv//AAAAIAA+////4f/EAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAMAKf/2A9cDpAAUACkAMQAAExQeAjMyPgI1NC4CIyIOAhUhFA4CIyIuAjU0PgIzMh4CFSUVMxU3JxUjKUqArGJirIBKSoCsYmKsgEoDSDpkhkxMhmQ6OmSGTEyGZDr9ytHDw9EBzWKsgEpKgKxiYqyASkqArGJMhmQ6OmSGTEyGZDo6ZIZMXLhzz89zAAAAAAEAAAABAABSMHaPXw889QALBAAAAAAAzpiWDQAAAADOmJYNAAD/9gPXA6QAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAApA9cAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAACkAAAAAAAoAUgABAAAAAwAyAAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEACAAAAAEAAAAAAAIADgAyAAEAAAAAAAMACAAeAAEAAAAAAAQACABAAAEAAAAAAAUAFgAIAAEAAAAAAAYABAAmAAEAAAAAAAoAKABIAAMAAQQJAAEACAAAAAMAAQQJAAIADgAyAAMAAQQJAAMACAAeAAMAAQQJAAQACABAAAMAAQQJAAUAFgAIAAMAAQQJAAYACAAqAAMAAQQJAAoAKABIAGYAbwByAG0AVgBlAHIAcwBpAG8AbgAgADAALgAwAGYAbwByAG1mb3JtAGYAbwByAG0AUgBlAGcAdQBsAGEAcgBmAG8AcgBtAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'),
     url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQgAAsAAAAAA9QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq8NaGNtYXAAAAFoAAAAPAAAADwAbgBfZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAKQAAACk5Uy3yGhlYWQAAAJQAAAANgAAADYAJ3CxaGhlYQAAAogAAAAkAAAAJAeZA+1obXR4AAACrAAAAAwAAAAMBgAAKWxvY2EAAAK4AAAACAAAAAgACgBSbWF4cAAAAsAAAAAgAAAAIAAHADRuYW1lAAAC4AAAAR4AAAEec8SZ7HBvc3QAAAQAAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAgAD4DwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAgAD7//wAAACAAPv///+H/xAABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAADACn/9gPXA6QAFAApADEAABMUHgIzMj4CNTQuAiMiDgIVIRQOAiMiLgI1ND4CMzIeAhUlFTMVNycVIylKgKxiYqyASkqArGJirIBKA0g6ZIZMTIZkOjpkhkxMhmQ6/crRw8PRAc1irIBKSoCsYmKsgEpKgKxiTIZkOjpkhkxMhmQ6OmSGTFy4c8/PcwAAAAABAAAAAQAAUjB2j18PPPUACwQAAAAAAM6Ylg0AAAAAzpiWDQAA//YD1wOkAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAKQPXAAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAAApAAAAAAAKAFIAAQAAAAMAMgADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAgAAAABAAAAAAACAA4AMgABAAAAAAADAAgAHgABAAAAAAAEAAgAQAABAAAAAAAFABYACAABAAAAAAAGAAQAJgABAAAAAAAKACgASAADAAEECQABAAgAAAADAAEECQACAA4AMgADAAEECQADAAgAHgADAAEECQAEAAgAQAADAAEECQAFABYACAADAAEECQAGAAgAKgADAAEECQAKACgASABmAG8AcgBtAFYAZQByAHMAaQBvAG4AIAAwAC4AMABmAG8AcgBtZm9ybQBmAG8AcgBtAFIAZQBnAHUAbABhAHIAZgBvAHIAbQBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
  font-weight: normal;
  font-style: normal;
}

[class*="icon-"] {
  font-family: 'form';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-right:before {
  content: "\3e";
}

// mixin for animations
@mixin animation {
  -webkit-transition: color .2s;
  -moz-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s;
}

// mixin for placeholders
@mixin placeholder {
  color: #999;
  @include animation;
}

// font declarations
body, input {
  font-family: "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: #111;
}

a {
  color: #e74c3c;
  text-decoration: none;
  @include animation;
}

a:hover {
  text-decoration: underline;
  color: #111;
}

// positions the form and adds subtle animation
form {
  margin: 12% auto;
  width: 19em;
  text-align: center;
  position: relative;
  -webkit-animation: moveDown .3s;
  -moz-animation: moveDown .3s;
  animation: moveDown .3s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

// animates to come down
@-webkit-keyframes moveDown {
  0%   {-webkit-transform: translate(0,-10%);opacity: 0;}
  100% {-webkit-transform: translate(0,0);opacity: 1;}
}

@-moz-keyframes moveDown {
  0%   {-moz-transform: translate(0,-10%);opacity: 0;}
  100% {-moz-transform: translate(0,0);opacity: 1;}
}

@keyframes moveDown {
  0%   {transform: translate(0,-10%);opacity: 0;}
  100% {transform: translate(0,0);opacity: 1;}
}

// removes default autocomplete yellow bg
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

// styles the input field. Strip from default styling and add borders
input {
  color: #444;
  font-size: 1.5em;
  outline: none; // Chrome outline
  box-shadow: none; // Firefox outline
  -webkit-appearance: none; // mobile Safari
  border-radius: 0; // mobile Safari
  border-top: none;
  border-left: solid 1px;
  border-right: solid 1px;
  border-bottom: solid 1px;
  border-color: #bbb;
  background: transparent;
  display: block;
  height: 2em;
  width: 12em;
  margin-bottom: 5%;
  padding: 0 3%;
  position: relative;
  z-index: 0;
  -webkit-transition: border .25s; // slightly slower than placeholder colour
  -moz-transition: border .25s;
  -o-transition: border .25s;
  transition: border .25s;
}

// on focus change styling of borders
input:focus {
  color: #111;
  border-color: #444;
}

// width of user typed input must not go over submit button on the right (adds padding)
#password {
  width: 10.5em;
  padding-right: 1.85em;
}

// left rectangle that hides left border line
.input, #passwordMeter {
  speak: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  position: relative;
  width: .25em;
  height: 3em;
  background: #fff;
  margin: 0% 0 -2em;
  z-index: 1;
}

// right rectangle that hides right border line
.input:after, #passwordMeter:after {
  content: '';
  width: 1em;
  height: 100%;
  position: absolute;
  right: -19.5em; // eyeball the number
  background: #fff;
}

// styles placeholder colour
.placeholder {
  @include placeholder;
}

::-webkit-input-placeholder {
  @include placeholder;
}

:-moz-placeholder {
  @include placeholder;
}

:-ms-input-placeholder {
  @include placeholder;
}

// on focus change colour of placeholder
.placeholder:focus {
  color: #ddd;
}

input:focus::-webkit-input-placeholder {
  color: #ddd;
}

input:focus::-moz-input-placeholder {
  color: #ddd;
}

input:focus::-ms-input-placeholder {
  color: #ddd;
}

// error fields for Safari and other unsupportive browsers
.error {
  border-color: #E35F5F;
  color: #E35F5F;
}

// moves down because of the errors
.error+button {
  margin-bottom: 2em;
}

// right rectangle that hides right border line
#passwordMeter:before {
  content: '';
  height: 1px;
  position: absolute;
  // bottom: -1.1em; // eyeball the number
  bottom: -17px; // eyeball the number
  left: 0;
  -webkit-transition: width .3s;
  -moz-transition: width .3s;
  -o-transition: width .3s;
  transition: width .3s;
}

// on blur reduce width of passwordMeter
#passwordMeter.blur:before {
  width: 0 !important;
}

// red colour
.weak:focus {
  border-left-color: #E35F5F;
}

#passwordMeter.weak:before {
  background: #E35F5F;
  width: 3.8em;
}

.good:focus {
  border-left-color: #87E696;
}

#passwordMeter.good:before {
  background: #87E696;
  width: 7.6em;
}

.better:focus {
  border-left-color: #55D969;
}

#passwordMeter.better:before {
  background: #55D969;
  width: 11.4em;
}

.strong:focus {
  border-left-color: #3EC753;
}

#passwordMeter.strong:before {
  background: #3EC753;
  width: 15.2em;
}

.military:focus {
  border-color: #10AD27;
}

#passwordMeter.military:before {
  background: #10AD27;
  width: 19em;
}

// positions submit button and strips from default styling
button {
  outline: none;
  -webkit-appearance: none; // mobile Safari
  border: none;
  background: transparent;
  color: #bbb;
  font-size: 2.05em;
  padding: 3% 7%;
  cursor: pointer;
  position: absolute;
  right: -6%; // slight overlap with custom rectangle that hides border
  bottom: 0%;
  @include animation;
}

// on submit hover changes the colour
button:hover, button:focus {
  color: #111;
}

// hides text from presentation
button span {
  display: none;
}

div {
  margin: 15% auto 0;
  max-width: 32em;
  -webkit-animation: moveDown .3s;
  -moz-animation: moveDown .3s;
  animation: moveDown .3s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

p {
  margin-bottom: .8em;
}

footer {
  text-align: center;
  padding: 3% 0;
  opacity: .3;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

footer:hover {
  opacity: 1;
}

.twitter-share-button {
  vertical-align: -15%;
  margin-right: -25px !important;
}
// for form validation
var unsupportedBrowsers = false;
if ((navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) || (navigator.userAgent.match(/MSIE\s(?!10)/))) {
  unsupportedBrowsers = true;
}

// Tests with Modernizr if supports HTML5 placeholder="" attribute. If old browser, load necessary JS files and run them
if (!Modernizr.input.placeholder) {
  Modernizr.load({
    load: [
      'http://lab.alexcican.com/minimal_signup_form/placeholder.min.js',
    ],
    complete: function(){
      $('input').placeholder();
    }
  })
}

// ugly browser sniffer for form validation
if (unsupportedBrowsers) {
  Modernizr.load({
    load: [
      'http://lab.alexcican.com/minimal_signup_form/jquery.validate.min.js'
    ],
    complete: function(){
      // parse through each required input
      $('form').find('input[required]').each(function () {
        // add a class to each required field with "required" & the input type
        // using the normal "getAttribute" method because jQuery's attr always returns "text"
        $(this).attr('class', 'required ' + this.getAttribute('type')).removeAttr('required');
      });

      // call jQuery validate plugin on each form
      $('form').each(function () {
        $(this).validate();
      });
    }
  })
}



// check password strength on key up
$('#password').keyup(function() {
  var pass = $(this).val();
  var cacheResult = checkPassStrength(pass);
})

// on blur makes passwordMeter border same colour as not focused
$('#password').blur(function() {
  $('#passwordMeter').addClass('blur');
})

// on focus removes class that makes passwordMeter border same colour as not focused
$('#password').focus(function() {
  if ($('#passwordMeter').hasClass('blur'))
    $('#passwordMeter').removeClass('blur');
})



// rates user's password
function scorePassword(pass) {
  var i = pass.length,
      score = 0;
  if (i >= 7) {
    score += /[a-z]/.test(pass) ? 3 : 0;
    score += /[A-Z]/.test(pass) ? 4 : 0;
    score += /\d/.test(pass) ? 1 : 0;
    score += /[^\w\d\s]/.test(pass) ? 1 : 0;
  }
  if (i >= 22 && score >= 9)
    score += 1;

  return score;
}

// adds classes depending on score
function checkPassStrength(pass) {
  var score = scorePassword(pass);
  console.log(score);
  if (score < 1)
    $('#password, #passwordMeter').removeClass().addClass('weak');
  if (score >= 7)
    $('#password, #passwordMeter').removeClass().addClass('good');
  if (score >= 8)
    $('#password, #passwordMeter').removeClass().addClass('better');
  if (score >= 9)
    $('#password, #passwordMeter').removeClass().addClass('strong');
  if (score >= 10)
    $('#password, #passwordMeter').removeClass().addClass('military');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js