Form Layouts - Authentication Forms

Front's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.

Signup #1

hs.show-animation.js plugin used to switch between form windows.

Welcome Back!

Login to manage your account.

Do not have an account? Signup
OR
                  
                    <form class="js-validate">
                      <!-- Login -->
                      <div id="login" data-target-group="idForm">
                        <!-- Title -->
                        <header class="text-center mb-7">
                          <h2 class="h4 mb-0">Welcome Back!</h2>
                          <p>Login to manage your account.</p>
                        </header>
                        <!-- End Title -->

                        <!-- Form Group -->
                        <div class="form-group">
                          <div class="js-form-message js-focus-state">
                            <label class="sr-only" for="signinEmail">Email</label>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <span class="input-group-text" id="signinEmailLabel">
                                  <span class="fas fa-user"></span>
                                </span>
                              </div>
                              <input type="email" class="form-control" name="email" id="signinEmail" placeholder="Email" aria-label="Email" aria-describedby="signinEmailLabel" required
                                     data-msg="Please enter a valid email address."
                                     data-error-class="u-has-error"
                                     data-success-class="u-has-success">
                            </div>
                          </div>
                        </div>
                        <!-- End Form Group -->

                        <!-- Form Group -->
                        <div class="form-group">
                          <div class="js-form-message js-focus-state">
                            <label class="sr-only" for="signinPassword">Password</label>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <span class="input-group-text" id="signinPasswordLabel">
                                  <span class="fas fa-lock"></span>
                                </span>
                              </div>
                              <input type="password" class="form-control" name="password" id="signinPassword" placeholder="Password" aria-label="Password" aria-describedby="signinPasswordLabel" required
                                     data-msg="Your password is invalid. Please try again."
                                     data-error-class="u-has-error"
                                     data-success-class="u-has-success">
                            </div>
                          </div>
                        </div>
                        <!-- End Form Group -->

                        <div class="d-flex justify-content-end mb-4">
                          <a class="js-animation-link small link-muted" href="javascript:;"
                             data-target="#forgotPassword"
                             data-link-group="idForm"
                             data-animation-in="slideInUp">Forgot Password?</a>
                        </div>

                        <div class="mb-2">
                          <button type="submit" class="btn btn-block btn-sm btn-primary transition-3d-hover">Login</button>
                        </div>

                        <div class="text-center mb-4">
                          <span class="small text-muted">Do not have an account?</span>
                          <a class="js-animation-link small" href="javascript:;"
                             data-target="#signup"
                             data-link-group="idForm"
                             data-animation-in="slideInUp">Signup
                          </a>
                        </div>

                        <div class="text-center">
                          <span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
                        </div>

                        <!-- Login Buttons -->
                        <div class="d-flex">
                          <a class="btn btn-block btn-sm btn-soft-facebook transition-3d-hover mr-1" href="#">
                            <span class="fab fa-facebook-square mr-1"></span>
                            Facebook
                          </a>
                          <a class="btn btn-block btn-sm btn-soft-google transition-3d-hover ml-1 mt-0" href="#">
                            <span class="fab fa-google mr-1"></span>
                            Google
                          </a>
                        </div>
                        <!-- End Login Buttons -->
                      </div>

                      <!-- Signup -->
                      <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
                        <!-- Title -->
                        <header class="text-center mb-7">
                          <h2 class="h4 mb-0">Welcome to Front.</h2>
                          <p>Fill out the form to get started.</p>
                        </header>
                        <!-- End Title -->

                        <!-- Form Group -->
                        <div class="form-group">
                          <div class="js-form-message js-focus-state">
                            <label class="sr-only" for="signupEmail">Email</label>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <span class="input-group-text" id="signupEmailLabel">
                                  <span class="fas fa-user"></span>
                                </span>
                              </div>
                              <input type="email" class="form-control" name="email" id="signupEmail" placeholder="Email" aria-label="Email" aria-describedby="signupEmailLabel" required
                                     data-msg="Please enter a valid email address."
                                     data-error-class="u-has-error"
                                     data-success-class="u-has-success">
                            </div>
                          </div>
                        </div>
                        <!-- End Input -->

                        <!-- Form Group -->
                        <div class="form-group">
                          <div class="js-form-message js-focus-state">
                            <label class="sr-only" for="signupPassword">Password</label>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <span class="input-group-text" id="signupPasswordLabel">
                                  <span class="fas fa-lock"></span>
                                </span>
                              </div>
                              <input type="password" class="form-control" name="password" id="signupPassword" placeholder="Password" aria-label="Password" aria-describedby="signupPasswordLabel" required
                                     data-msg="Your password is invalid. Please try again."
                                     data-error-class="u-has-error"
                                     data-success-class="u-has-success">
                            </div>
                          </div>
                        </div>
                        <!-- End Input -->

                        <!-- Form Group -->
                        <div class="form-group">
                          <div class="js-form-message js-focus-state">
                            <label class="sr-only" for="signupConfirmPassword">Confirm Password</label>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <span class="input-group-text" id="signupConfirmPasswordLabel">
                                  <span class="fas fa-key"></span>
                                </span>
                              </div>
                              <input type="password" class="form-control" name="confirmPassword" id="signupConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" aria-describedby="signupConfirmPasswordLabel" required
                                     data-msg="Password does not match the confirm password."
                                     data-error-class="u-has-error"
                                     data-success-class="u-has-success">
                            </div>
                          </div>
                        </div>
                        <!-- End Input -->

                        <div class="mb-2">
                          <button type="submit" class="btn btn-block btn-sm btn-primary transition-3d-hover">Get Started</button>
                        </div>

                        <div class="text-center mb-4">
                          <span class="small text-muted">Already have an account?</span>
                          <a class="js-animation-link small" href="javascript:;"
                             data-target="#login"
                             data-link-group="idForm"
                             data-animation-in="slideInUp">Login
                          </a>
                        </div>

                        <div class="text-center">
                          <span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
                        </div>

                        <!-- Login Buttons -->
                        <div class="d-flex">
                          <a class="btn btn-block btn-sm btn-soft-facebook transition-3d-hover mr-1" href="#">
                            <span class="fab fa-facebook-square mr-1"></span>
                            Facebook
                          </a>
                          <a class="btn btn-block btn-sm btn-soft-google transition-3d-hover ml-1 mt-0" href="#">
                            <span class="fab fa-google mr-1"></span>
                            Google
                          </a>
                        </div>
                        <!-- End Login Buttons -->
                      </div>
                      <!-- End Signup -->

                      <!-- Forgot Password -->
                      <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
                        <!-- Title -->
                        <header class="text-center mb-7">
                          <h2 class="h4 mb-0">Recover Password.</h2>
                          <p>Enter your email address and an email with instructions will be sent to you.</p>
                        </header>
                        <!-- End Title -->

                        <!-- Form Group -->
                        <div class="form-group">
                          <div class="js-form-message js-focus-state">
                            <label class="sr-only" for="recoverEmail">Your email</label>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <span class="input-group-text" id="recoverEmailLabel">
                                  <span class="fas fa-user"></span>
                                </span>
                              </div>
                              <input type="email" class="form-control" name="email" id="recoverEmail" placeholder="Your email" aria-label="Your email" aria-describedby="recoverEmailLabel" required
                                     data-msg="Please enter a valid email address."
                                     data-error-class="u-has-error"
                                     data-success-class="u-has-success">
                            </div>
                          </div>
                        </div>
                        <!-- End Form Group -->

                        <div class="mb-2">
                          <button type="submit" class="btn btn-block btn-sm btn-primary transition-3d-hover">Recover Password</button>
                        </div>

                        <div class="text-center mb-4">
                          <span class="small text-muted">Remember your password?</span>
                          <a class="js-animation-link small" href="javascript:;"
                             data-target="#login"
                             data-link-group="idForm"
                             data-animation-in="slideInUp">Login
                          </a>
                        </div>
                      </div>
                      <!-- End Forgot Password -->
                    </form>
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.validation.js"></script>
                    <script src="../../assets/js/components/hs.focus-state.js"></script>
                    <script src="../../assets/js/components/hs.show-animation.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of form validation
                        $.HSCore.components.HSValidation.init('.js-validate', {
                          rules: {
                            confirmPassword: {
                              equalTo: '#signupPassword'
                            }
                          }
                        });

                        // initialization of forms
                        $.HSCore.components.HSFocusState.init();

                        // initialization of show animations
                        $.HSCore.components.HSShowAnimation.init('.js-animation-link');
                      });
                    </script>
                  
                

Signup #2

Welcome to Front

Fill out the form to get started.

Already have an account? Login
                  
                    <!-- Form -->
                    <form class="js-validate">
                      <!-- Title -->
                      <div class="mb-7">
                        <h1 class="h3 text-primary font-weight-normal mb-0">Welcome to <span class="font-weight-semi-bold">Front</span></h1>
                        <p>Fill out the form to get started.</p>
                      </div>
                      <!-- End Title -->

                      <!-- Form Group -->
                      <div class="js-form-message form-group">
                        <label class="form-label" for="signinSrEmailExample3">Email address</label>
                        <input type="email" class="form-control" name="email" id="signinSrEmailExample3" placeholder="Email address" aria-label="Email address" required
                               data-msg="Please enter a valid email address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <!-- End Form Group -->

                      <!-- Form Group -->
                      <div class="js-form-message form-group">
                        <label class="form-label" for="signinSrPasswordExample2">Password</label>
                        <input type="password" class="form-control" name="password" id="signinSrPasswordExample2" placeholder="********" aria-label="********" required
                               data-msg="Your password is invalid. Please try again."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <!-- End Form Group -->

                      <!-- Form Group -->
                      <div class="js-form-message form-group">
                        <label class="form-label" for="signinSrConfirmPassword">Confirm password</label>
                        <input type="password" class="form-control" name="confirmPassword" id="signinSrConfirmPassword" placeholder="********" aria-label="********" required
                               data-msg="Password does not match the confirm password."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <!-- End Form Group -->

                      <!-- Checkbox -->
                      <div class="js-form-message mb-5">
                        <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
                          <input type="checkbox" class="custom-control-input" id="termsCheckbox" name="termsCheckbox" required
                                 data-msg="Please accept our Terms and Conditions."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                          <label class="custom-control-label" for="termsCheckbox">
                            <small>
                              I agree to the
                              <a class="link-muted" href="../pages/terms.html">Terms and Conditions</a>
                            </small>
                          </label>
                        </div>
                      </div>
                      <!-- End Checkbox -->

                      <!-- Button -->
                      <div class="row align-items-center mb-5">
                        <div class="col-5 col-sm-6">
                          <span class="small text-muted">Already have an account?</span>
                          <a class="small" href="../pages/login-simple.html">Login</a>
                        </div>

                        <div class="col-7 col-sm-6 text-right">
                          <button type="submit" class="btn btn-primary transition-3d-hover">Get Started</button>
                        </div>
                      </div>
                      <!-- End Button -->
                    </form>
                    <!-- End Form -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.validation.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of form validation
                        $.HSCore.components.HSValidation.init('.js-validate', {
                          rules: {
                            confirmPassword: {
                              equalTo: '#signupPassword'
                            }
                          }
                        });
                      });
                    </script>
                  
                

Signin #1

Welcome back

Login to manage your account.

Don't have an account? Signup
                  
                    <!-- Form -->
                    <form class="js-validate w-md-50 mx-md-auto">
                      <!-- Title -->
                      <div class="mb-7">
                        <h2 class="h3 text-primary font-weight-normal mb-0">Welcome <span class="font-weight-semi-bold">back</span></h2>
                        <p>Login to manage your account.</p>
                      </div>
                      <!-- End Title -->

                      <!-- Form Group -->
                      <div class="js-form-message form-group">
                        <label class="form-label" for="signinSrEmailExample1">Email address</label>
                        <input type="email" class="form-control" name="email" id="signinSrEmailExample1" placeholder="Email address" aria-label="Email address" required
                               data-msg="Please enter a valid email address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <!-- End Form Group -->

                      <!-- Form Group -->
                      <div class="js-form-message form-group">
                        <label class="form-label" for="signinSrPasswordExample1">
                          <span class="d-flex justify-content-between align-items-center">
                            Password
                            <a class="link-muted text-capitalize font-weight-normal" href="../pages/recover-account-simple.html">Forgot Password?</a>
                          </span>
                        </label>
                        <input type="password" class="form-control" name="password" id="signinSrPasswordExample1" placeholder="********" aria-label="********" required
                               data-msg="Your password is invalid. Please try again."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <!-- End Form Group -->

                      <!-- Button -->
                      <div class="row align-items-center mb-5">
                        <div class="col-6">
                          <span class="small text-muted">Don't have an account?</span>
                          <a class="small" href="../pages/signup-simple.html">Signup</a>
                        </div>

                        <div class="col-6 text-right">
                          <button type="submit" class="btn btn-primary transition-3d-hover">Get Started</button>
                        </div>
                      </div>
                      <!-- End Button -->
                    </form>
                    <!-- End Form -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.validation.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of form validation
                        $.HSCore.components.HSValidation.init('.js-validate');
                      });
                    </script>
                  
                

Recover account #1

Forgot your password?

Enter your email address below and we'll get you back on track.

                  
                    <!-- Form -->
                    <form class="js-validate w-md-50 mx-md-auto">
                      <!-- Title -->
                      <div class="mb-7">
                        <h1 class="h3 text-primary font-weight-normal mb-0">Forgot your <span class="font-weight-semi-bold">password?</span></h1>
                        <p>Enter your email address below and we'll get you back on track.</p>
                      </div>
                      <!-- End Title -->

                      <!-- Form Group -->
                      <div class="js-form-message form-group">
                        <label class="form-label" for="signinSrEmailExample2">Email address</label>
                        <input type="email" class="form-control" name="email" id="signinSrEmailExample2" placeholder="Email address" aria-label="Email address" required
                               data-msg="Please enter a valid email address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <!-- End Form Group -->

                      <!-- Button -->
                      <div class="row align-items-center mb-5">
                        <div class="col-4 col-sm-6">
                          <a class="small link-muted" href="../pages/login-simple.html">Back to sign in</a>
                        </div>

                        <div class="col-8 col-sm-6 text-right">
                          <button type="submit" class="btn btn-primary transition-3d-hover">Request Reset Link</button>
                        </div>
                      </div>
                      <!-- End Button -->
                    </form>
                    <!-- End Form -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.validation.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of form validation
                        $.HSCore.components.HSValidation.init('.js-validate');
                      });
                    </script>
                  
                

Change password #1

Password strength:

New password must be 8-20 characters long. Tip: Make it hard to guess (wrong: password123).

                  
                    <form id="changePasswordForm" class="js-validate">
                      <!-- Input -->
                      <div class="js-form-message mb-6">
                        <label class="form-label">
                          Current password
                        </label>

                        <div class="form-group">
                          <input type="password" class="form-control" name="currentPassword" placeholder="Enter your current password" aria-label="Enter your current password" required
                                 data-msg="Password does not match."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                      <!-- End Input -->

                      <!-- Input -->
                      <div class="mb-6">
                        <div class="js-form-message">
                          <label class="form-label">
                            New password
                          </label>

                          <div class="form-group">
                            <input id="newPassword" type="password" class="form-control" name="newPassword" placeholder="Enter your password" aria-label="Enter your password" required
                                 data-msg="Please enter your password."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success"
                                 data-pwstrength-container="#changePasswordForm"
                                 data-pwstrength-progress="#passwordStrengthProgress"
                                 data-pwstrength-verdict="#passwordStrengthVerdict"
                                 data-pwstrength-progress-extra-classes="bg-white height-4">
                          </div>
                        </div>
                      </div>
                      <!-- End Input -->

                      <!-- Input -->
                      <div class="js-form-message mb-6">
                        <label class="form-label">
                          Confirm password
                        </label>

                        <div class="form-group">
                          <input type="password" class="form-control" name="confirmNewPassword" placeholder="Confirm your password" aria-label="Confirm your password" required
                                 data-msg="Password does not match the confirm password."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                      <!-- End Input -->

                      <div class="w-lg-50">
                        <!-- Password Strength -->
                        <div class="mb-6">
                          <div class="d-flex justify-content-between mb-2">
                            <h3 class="h6">Password strength:</h3>
                            <span id="passwordStrengthVerdict"></span>
                          </div>

                          <div id="passwordStrengthProgress" class="mb-2"></div>

                          <p class="small">New password must be 8-20 characters long. Tip: Make it hard to guess (wrong: password123).</p>
                        </div>
                        <!-- End Password Strength -->

                        <!-- Buttons -->
                        <button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Password</button>
                        <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button>
                        <!-- End Buttons -->
                      </div>
                    </form>
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/pwstrength-bootstrap/dist/pwstrength-bootstrap.min.js"></script>
                    <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.password-strength.js"></script>
                    <script src="../../assets/js/components/hs.validation.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of password strength module
                        $.HSCore.components.HSPasswordStrength.init('#newPassword');

                        // initialization of form validation
                        $.HSCore.components.HSValidation.init('.js-validate', {
                          rules: {
                            confirmNewPassword: {
                              equalTo: '#newPassword'
                            }
                          }
                        });
                      });
                    </script>