Form Layouts - Authentication Forms
Front's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.
<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
<!-- 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
<!-- 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
<!-- 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
<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>