Signup form block for user registration on websites and landing pages.

Dependencies

  • Foundation 6
  • FontAwesome
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Foundation Blocks - Signup 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="signup-2">
        <div class="signup-bg"></div>
        <div class="grid-container">
            <div class="grid-x grid-padding-x align-middle vh-height">
                <div class="cell small-12 medium-12 large-6 signup-form-wrap">
                    <h1 class="signup-title">Sign Up to discover<br>FWR blocks</h1>
                    <div class="signup-form">

                        <div class="form-group">
                            <label for="fullname" class="form-label">Name</label>
                            <input type="text" id="fullname" required>
                        </div>

                        <div class="form-group">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" id="email" required>
                        </div>

                        <div class="form-group">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" id="password" required>
                        </div>

                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="agree">
                            <label class="custom-control-label" for="agree">By signing up, you agree to Our Terms and
                                Privacy Policy</label>
                        </div>

                        <div class="signup-action">
                            <button type="submit" class="button primary">Create an Account</button>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- /.signup-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>
// Foundation variables and mixins
@import "~foundation-sites/scss/foundation";

// Variables
$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$header-font-family: $body-font-family;
$primary: #5863f8;
$light-gray: #6c757d;
$body-font-color: #212529;

$input-shadow: none;
$input-radius: 4px;
$button-radius: 50px;
$checkbox-bg: #dee2e6;


.signup-2 {
  font-family: $header-font-family;
  color: $body-font-color;
}

.signup-form-wrap {
  @include padding-direction('vertical', 1.5);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.signup-title {
  font-family: $header-font-family;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.signup-form {
  margin-top: 1.5rem;

  input {
    margin-bottom: 0;
    box-shadow: $input-shadow;
    border-radius: $input-radius;

    &:focus {
      border-color: rgba($primary, .5);
      box-shadow: 0 0 0 .2rem rgba($primary, .15);
    }
  }
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  font-size: .875rem;
  font-weight: 600;
  color: $light-gray;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

.button {
  background-color: $primary;
  border-radius: $button-radius;
  margin-bottom: 0;

  &.primary {
    @include button-style($primary, 'auto', $white);
  }
}

.custom-control {
  padding-left: 2rem;
}

.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-checkbox {
  padding-top: 6px;
  padding-left: 2rem;
  position: relative;

  .custom-control-input {
    display: inline-block;
    float: left;

    &:checked ~ .custom-control-label {
      &::before {
        background-color: $primary;
        box-shadow: 0 0 0 1px $white, 0 0 0 0.2rem rgba($primary, .25);
      }

      &::after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
      }
    }
  }

  .custom-control-label {
    display: block;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: .5rem;
      left: 0;
      width: 1.5rem;
      height: 1.5rem;
      display: block;
      pointer-events: none;
      user-select: none;
    }

    &::before {
      background-color: $checkbox-bg;
    }

    &::after {
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 50% 50%;
    }
  }
}

.custom-control-label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.signup-action {
  margin-top: 1.5rem;

  .button {
    font-size: 1.25rem;
    line-height: 1.5;
    padding: .5rem 1rem;
  }
}


@media #{breakpoint(medium)} {

  .signup-2 {
    @include padding-direction('vertical', 1.5);
  }

  .signup-form-wrap {
    @include padding-direction('vertical', 3);
  }

  .signup-title {
    font-size: 2rem;
  }

  .signup-action {
    margin-top: 3rem;

    .button {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

}


@media #{breakpoint(large)} {

  .signup-2 {
    position: relative;
    @include padding-direction('vertical', 3);
  }

  .signup-form-wrap {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .signup-bg {
    background: url('https://assets.free-website-resources.com/img/signup-bg.jpg') no-repeat center center / cover;
    position: absolute;
    right: 0;
    top: 0;
    width: calc(50vw - 50px);
    height: 100%;
  }

  .signup-action {
    .button {
      padding-left: 3rem;
      padding-right: 3rem;
    }
  }

}


@media (min-width: 1200px) {

  .signup-bg {
    width: calc(50vw - 100px);
  }

}
/**
 * Foundation for Sites by ZURB
 * Version 6.4.4-rc1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.signup-2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #212529;
}

.signup-form-wrap {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.signup-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.signup-form {
  margin-top: 1.5rem;
}

.signup-form input {
  margin-bottom: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 4px;
}

.signup-form input:focus {
  border-color: rgba(88, 99, 248, 0.5);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.15);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.15);
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  font-size: .875rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

.button {
  background-color: #5863f8;
  border-radius: 50px;
  margin-bottom: 0;
}

.button.primary {
  background-color: #5863f8;
  color: #fefefe;
}

.button.primary:hover, .button.primary:focus {
  background-color: #1827f5;
  color: #fefefe;
}

.custom-control {
  padding-left: 2rem;
}

.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-checkbox {
  padding-top: 6px;
  padding-left: 2rem;
  position: relative;
}

.custom-checkbox .custom-control-input {
  display: inline-block;
  float: left;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #5863f8;
  -webkit-box-shadow: 0 0 0 1px #fefefe, 0 0 0 0.2rem rgba(88, 99, 248, 0.25);
          box-shadow: 0 0 0 1px #fefefe, 0 0 0 0.2rem rgba(88, 99, 248, 0.25);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

.custom-checkbox .custom-control-label {
  display: block;
}

.custom-checkbox .custom-control-label::before, .custom-checkbox .custom-control-label::after {
  content: "";
  position: absolute;
  top: .5rem;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.custom-checkbox .custom-control-label::before {
  background-color: #dee2e6;
}

.custom-checkbox .custom-control-label::after {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-control-label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.signup-action {
  margin-top: 1.5rem;
}

.signup-action .button {
  font-size: 1.25rem;
  line-height: 1.5;
  padding: .5rem 1rem;
}

@media (min-width: 40em) {
  .signup-2 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .signup-form-wrap {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .signup-title {
    font-size: 2rem;
  }
  .signup-action {
    margin-top: 3rem;
  }
  .signup-action .button {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 64em) {
  .signup-2 {
    position: relative;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .signup-form-wrap {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .signup-bg {
    background: url("https://assets.free-website-resources.com/img/signup-bg.jpg") no-repeat center center/cover;
    position: absolute;
    right: 0;
    top: 0;
    width: calc(50vw - 50px);
    height: 100%;
  }
  .signup-action .button {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1200px) {
  .signup-bg {
    width: calc(50vw - 100px);
  }
}
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi9mb3JtL3NpZ251cC1mb3JtLTI=