Form Layouts
Front's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.
Overview
Some Front forms use hs.show-animation.js
plugin to show/hide components and reveal them with animations on click. For more detailed information on how to use the plugin, see: Show Animation plugin documentation.
Signup #1
hs.show-animation.js
plugin used to switch between form windows.
HTML:
<div class="w-40 mx-auto">
<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 -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-user u-form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-2">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-lock u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="password" required
placeholder="Password"
aria-label="Password"
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<div class="clearfix mb-4">
<a class="js-animation-link float-right small u-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-primary u-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 u-btn-facebook--air transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm u-btn-google--air 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 -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-user u-form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-lock u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="password" required
placeholder="Password"
aria-label="Password"
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-key u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="confirmPassword" required
placeholder="Confirm Password"
aria-label="Confirm Password"
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="mb-2">
<button type="submit" class="btn btn-block btn-primary u-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 u-btn-facebook--air transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm u-btn-google--air 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 -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fas fa-envelope u-inner-form__text"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Your email"
aria-label="Your email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary u-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>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<script src="../assets/js/helpers/hs.show-animation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link');
});
</script>
Signup #2
HTML:
<form class="js-validate w-60 mx-auto">
<div class="js-form-message mb-4">
<label class="h6 small d-block text-uppercase">Email address</label>
<div class="js-focus-state input-group u-form">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="jack@walley.com"
aria-label="jack@walley.com"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-4">
<label class="h6 small d-block text-uppercase">Password</label>
<div class="js-focus-state input-group u-form">
<input type="password" class="form-control u-form__input" name="password" required
placeholder="********"
aria-label="********"
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-3">
<label class="h6 small d-block text-uppercase">Confirm Password</label>
<div class="js-focus-state input-group u-form">
<input type="password" class="form-control u-form__input" name="confirmPassword" required
placeholder="********"
aria-label="********"
data-msg="Password does not match the confirm password."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="custom-control custom-checkbox d-flex align-items-center small text-muted mb-5">
<input type="checkbox" class="custom-control-input" id="termsCheckbox">
<label class="custom-control-label" for="termsCheckbox">
I agree to the
<a class="u-link-muted" href="#">Terms and Conditions</a>
</label>
</div>
<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="#">Login</a>
</div>
<div class="col-7 col-sm-6 text-right">
<button type="submit" class="btn btn-primary u-btn-primary transition-3d-hover">Get Started</button>
</div>
</div>
</form>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Login #2
HTML:
<form class="js-validate w-60 mx-auto">
<div class="js-form-message mb-4">
<label class="h6 small d-block text-uppercase">Email address</label>
<div class="js-focus-state input-group u-form">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="jack@walley.com"
aria-label="jack@walley.com"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-4">
<div class="d-flex justify-content-between align-items-center">
<label class="h6 small d-block text-uppercase">Password</label>
<div class="mb-2">
<a class="small u-link-muted" href="#">Forgot Password?</a>
</div>
</div>
<div class="js-focus-state input-group u-form">
<input type="password" class="form-control u-form__input" name="password" required
placeholder="********"
aria-label="********"
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<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="#">Signup</a>
</div>
<div class="col-6 text-right">
<button type="submit" class="btn btn-primary u-btn-primary transition-3d-hover">Get Started</button>
</div>
</div>
</form>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Recover account #2
HTML:
<form class="js-validate mt-5">
<div class="js-form-message mb-4">
<label class="h6 small d-block text-uppercase">Email address</label>
<div class="js-focus-state input-group u-form">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="jack@walley.com"
aria-label="jack@walley.com"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="row align-items-center mb-5">
<div class="col-4 col-sm-6">
<a class="small u-link-muted" href="#">Back to sign in</a>
</div>
<div class="col-8 col-sm-6 text-right">
<button type="submit" class="btn btn-primary u-btn-primary transition-3d-hover">Request Reset Link</button>
</div>
</div>
</form>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Contacts #1
HTML:
<!-- Contacts Form -->
<form class="js-validate">
<div class="row">
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label class="h6 small d-block text-uppercase">
Your name
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" name="name" required
placeholder="Jack Wayley"
aria-label="Jack Wayley"
data-msg="Please enter your name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label class="h6 small d-block text-uppercase">
Your email address
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="email" name="email" required
placeholder="jackwayley@gmail.com"
aria-label="jackwayley@gmail.com"
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 -->
<div class="w-100"></div>
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label class="h6 small d-block text-uppercase">
Subject
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" name="subject" required
placeholder="Web design"
aria-label="Web design"
data-msg="Please enter a subject."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label class="h6 small d-block text-uppercase">
Your Phone Number
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="number" name="phone" required
placeholder="1-800-643-4500"
aria-label="1-800-643-4500"
data-msg="Please enter a valid phone number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
</div>
<!-- Input -->
<div class="js-form-message mb-9">
<label class="h6 small d-block text-uppercase">
How can we help you?
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<textarea class="form-control u-form__input" rows="4" name="text" required
placeholder="Hi there, I would like to ..."
aria-label="Hi there, I would like to ..."
data-msg="Please enter a reason."
data-error-class="u-has-error"
data-success-class="u-has-success"></textarea>
</div>
</div>
<!-- End Input -->
<div class="text-center">
<button type="submit" class="btn btn-primary u-btn-primary u-btn-wide transition-3d-hover mb-4">Submit</button>
<p class="small">We'll get back to you in 1-2 business days.</p>
</div>
</form>
<!-- End Contacts Form -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Hire us #1
HTML:
<form class="js-validate w-lg-50 mx-auto">
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Your name
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="Jack Wayley"
aria-label="Jack Wayley"
data-msg="Please enter your frist name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Your email address
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="email" required
placeholder="jackwayley@gmail.com"
aria-label="jackwayley@gmail.com"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
What is your timeline for this project?
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="1 month"
aria-label="1 month"
data-msg="Please enter a valid date."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="mb-6">
<label class="h6 small d-block text-uppercase">Your website URL</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text"
placeholder="https://www.jackwayley.com"
aria-label="https://www.jackwayley.com">
</div>
</div>
<div class="mb-6">
<label class="h6 small d-block text-uppercase">Your company name</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text"
placeholder="JackWayley Inc."
aria-label="JackWayley Inc.">
</div>
</div>
<div class="mb-6">
<label class="h6 small d-block text-uppercase">
Choose your platform
<span class="text-danger">*</span>
</label>
<div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-outline-secondary flex-fill u-checkbox-btn">
<input type="checkbox" name="options" id="option1">
Shopify
</label>
<label class="btn btn-outline-secondary flex-fill u-checkbox-btn">
<input type="checkbox" name="options" id="option2">
Web
</label>
<label class="btn btn-outline-secondary flex-fill u-checkbox-btn">
<input type="checkbox" name="options" id="option3">
Other
</label>
</div>
</div>
<div class="mb-6">
<label class="h6 small d-block text-uppercase">
Tell us about your budget
<span class="text-danger">*</span>
</label>
<select class="custom-select">
<option selected>$20,000 to $50,000</option>
<option value="budget1">$20,000 to $50,000</option>
<option value="budget2">$100,000 to $200,000</option>
<option value="budget3">$200,000+</option>
</select>
</div>
<div class="js-form-message mb-9">
<label class="h6 small d-block text-uppercase">
Tell us about your project
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<textarea class="form-control u-form__input" rows="4" required
placeholder="Hi there, I would like to ..."
aria-label="Hi there, I would like to ..."
data-msg="Please enter a reason."
data-error-class="u-has-error"
data-success-class="u-has-success"></textarea>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-lg btn-primary u-btn-primary transition-3d-hover mb-4">Let's Start Working Together</button>
<p class="small">We'll get back to you in 1-2 business days.</p>
</div>
</form>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Hire us #2
HTML:
<div class="position-relative u-gradient-half-primary-v1">
<div class="container u-space-4-top u-space-2-bottom">
<div class="w-lg-80 mx-auto">
<div id="applyForJob">
<form class="js-validate">
<div class="row">
<div class="col-sm-6 mb-5">
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<input class="form-control u-form__input" type="text" required
placeholder="First Name"
aria-label="First Name"
data-msg="Please enter your frist name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<div class="col-sm-6 mb-5">
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<input class="form-control u-form__input" type="text" required
placeholder="Last Name"
aria-label="Last Name"
data-msg="Please enter your last name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<div class="col-sm-6 mb-5">
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<input class="form-control u-form__input" type="email" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<div class="col-sm-6 mb-5">
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<input class="form-control u-form__input" type="text" required
placeholder="Linkedin"
aria-label="Linkedin"
data-msg="Please enter a valid URL address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<div class="col-sm-6 mb-5">
<label class="h6 d-block text-white">Resume/CV</label>
<div class="u-file-attachment-v1 mb-0">
<input id="fileAttachment1" name="file-attachment" type="file" class="u-file-attachment-v1__label">
<label class="u-file-attachment-v1__label" for="fileAttachment1">Attach your file</label>
</div>
</div>
<div class="col-sm-6 mb-5">
<label class="h6 d-block text-white">Cover letter</label>
<div class="u-file-attachment-v1 mb-0">
<input id="fileAttachment2" name="file-attachment" type="file" class="u-file-attachment-v1__label">
<label class="u-file-attachment-v1__label" for="fileAttachment2">Attach your file</label>
</div>
</div>
<div class="col-sm-6 mb-5">
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<textarea class="form-control u-form__input" rows="4" required
placeholder="How'd you hear about Front?"
aria-label="How'd you hear about Front?"
data-msg="Please enter an answer."
data-error-class="u-has-error"
data-success-class="u-has-success"></textarea>
</div>
</div>
</div>
<div class="col-sm-6 align-self-end text-sm-right mb-5">
<button type="submit" class="btn text-primary u-btn-white transition-3d-hover">Submit Application</button>
</div>
</div>
</form>
</div>
</div>
</div>
<figure class="position-absolute-top-0 z-index-2">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920.5 318.5" style="margin-top: -8px; margin-bottom: 0; enable-background:new 0 0 1920.5 318.5;" xml:space="preserve">
<linearGradient id="pricingTopLeftShapeID1" gradientUnits="userSpaceOnUse" x1="319.6719" y1="208.4502" x2="231.1918" y2="-34.6469">
<stop class="u-stop-color-white" stop-opacity="0" offset="2.250243e-07"/>
<stop class="u-stop-color-primary" stop-opacity=".4" offset="1"/>
</linearGradient>
<path fill="url(#pricingTopLeftShapeID1)" d="M0.5,304.1c0,0,225.5-202.6,629.5-201.6L0,56.5L0.5,304.1z"/>
<linearGradient id="pricingTopLeftShapeID2" gradientUnits="userSpaceOnUse" x1="1497.9215" y1="44.6831" x2="1635.3568" y2="422.2836">
<stop class="u-stop-color-white" stop-opacity="0" offset="2.250243e-07"/>
<stop class="u-stop-color-primary" stop-opacity=".4" offset="1"/>
</linearGradient>
<path fill="url(#pricingTopLeftShapeID2)" d="M1144,173.5c0,0,94,48,410,67s366.5,78,366.5,78v-214L1144,173.5z"/>
<path class="u-fill-white" d="M0.5,138c0,0,395-113,984,7s936,21,936,21V0H0.5V138z"/>
</svg>
</figure>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Select #1
HTML:
<div class="row align-items-md-center u-space-2">
<div class="col-lg-4 mb-4 mb-lg-0">
<form class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-search"></span>
</span>
</div>
<input type="search" class="form-control u-form__input" placeholder="Search Jobs" aria-label="Search Front">
</form>
</div>
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<select class="custom-select">
<option selected>All locations</option>
<option value="location1">Chicago, US</option>
<option value="location2">New York, US</option>
<option value="location3">Seattle/Kirkland, US</option>
<option value="location4">Los Angles, US</option>
<option value="location5">Moscow, Russia</option>
<option value="location6">Sydney, Australia</option>
<option value="location7">Birmingham, UK</option>
<option value="location7">Manchester, UK</option>
<option value="location8">Beijing, China</option>
</select>
</div>
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<select class="custom-select">
<option selected>All departments</option>
<option value="department1">Analytics</option>
<option value="department2">Business Strategy</option>
<option value="department3">Data Center & Network</option>
<option value="department4">Developer Relations</option>
<option value="department5">Engineering</option>
<option value="department6">Hardware Engineering</option>
<option value="department7">IT & Data Management</option>
<option value="department8">Legal & Government Relations</option>
<option value="department9">Manufacturing & Supply Chain</option>
<option value="department10">Marketing & Communications</option>
<option value="department11">Network Engineering</option>
<option value="department12">Partnerships</option>
<option value="department13">Web</option>
</select>
</div>
<div class="col-lg-2 text-lg-right">
<a class="u-link-muted" href="#">22 Open Positions</a>
</div>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Cart #1
Items | Quantity | Unit price | |
---|---|---|---|
HoodieSmall |
|
$29 | |
Snapback cap |
|
$9 |
Total: $42.58
Got a discount code? Add it in the next step.
HTML:
<!-- Cart Section -->
<div class="u-bg-light-blue-50">
<div class="container u-space-1">
<!-- Table Content -->
<div class="table-responsive-sm mb-6">
<table class="table table-borderless bg-white mb-0">
<thead>
<tr>
<th>Items</th>
<th>Quantity</th>
<th>Unit price</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- Item Content -->
<tr>
<td>
<div class="media align-items-center">
<div class="d-flex mr-3">
<img class="u-md-avatar rounded" src="../assets/img/64x64/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h2 class="h6 mb-0">Hoodie</h2>
<small class="d-block text-secondary">Small</small>
</div>
</div>
</td>
<td class="align-middle">
<div class="js-quantity input-group u-form u-quantity">
<input class="js-result form-control u-form__input u-quantity__input" type="text" value="1">
<div class="u-quantity__arrows">
<span class="js-plus u-quantity__arrows-inner fa fa-angle-up"></span>
<span class="js-minus u-quantity__arrows-inner fa fa-angle-down"></span>
</div>
</div>
</td>
<td class="align-middle">$29</td>
<td class="align-middle text-center">
<button type="button" class="close float-none">
<span aria-hidden="true">×</span>
</button>
</td>
</tr>
<!-- End Item Content -->
<!-- Item Content -->
<tr>
<td>
<div class="media align-items-center">
<div class="d-flex mr-3">
<img class="u-md-avatar rounded" src="../assets/img/64x64/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h2 class="h6 mb-0">Snapback cap</h2>
</div>
</div>
</td>
<td class="align-middle">
<div class="js-quantity input-group u-form u-quantity">
<input class="js-result form-control u-form__input u-quantity__input" type="text" value="1">
<div class="u-quantity__arrows">
<span class="js-plus u-quantity__arrows-inner fa fa-angle-up"></span>
<span class="js-minus u-quantity__arrows-inner fa fa-angle-down"></span>
</div>
</div>
</td>
<td class="align-middle">$9</td>
<td class="align-middle text-center">
<button type="button" class="close float-none">
<span aria-hidden="true">×</span>
</button>
</td>
</tr>
<!-- End Item Content -->
</tbody>
</table>
</div>
<!-- End Table Content -->
<div class="row justify-content-lg-between">
<!-- Delivery -->
<div class="col-md-6 col-lg-5 mb-7 mb-md-0">
<div class="bg-white rounded p-3">
<div class="custom-control custom-radio d-flex align-items-center small text-muted">
<input type="radio" class="custom-control-input" id="deliveryRadio1" name="deliveryRadio" checked>
<label class="custom-control-label ml-1" for="deliveryRadio1">
<span class="d-block h6 text-dark font-weight-normal mb-1"><strong class="text-dark">$4.58</strong> - Standard delivery</span>
<span class="d-block">Shipment may take 5-6 business days.</span>
</label>
</div>
</div>
<hr class="my-0">
<div class="bg-white rounded p-3">
<div class="custom-control custom-radio d-flex align-items-center small text-muted">
<input type="radio" class="custom-control-input" id="deliveryRadio2" name="deliveryRadio">
<label class="custom-control-label ml-1" for="deliveryRadio2">
<span class="d-block h6 text-dark font-weight-normal mb-1"><strong class="text-dark">$7.99</strong> - Express delivery</span>
<span class="d-block">Shipment may take 2-3 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Delivery -->
<!-- Total -->
<div class="col-md-6 col-lg-5 mt-md-auto">
<div class="media float-md-right">
<div class="d-flex flex-column mr-4">
<h3 class="h5 mb-0">Total: $42.58</h3>
<p class="small mb-0">Got a discount code? Add it in the next step.</p>
</div>
<div class="media-body">
<a class="btn btn-primary u-btn-primary transition-3d-hover" href="checkout.html">Checkout</a>
</div>
</div>
</div>
<!-- End Total -->
</div>
</div>
</div>
<!-- End Cart Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.quantity-counter.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of quantity counter
$.HSCore.components.HSQantityCounter.init('.js-quantity');
});
</script>
Checkout #1
Order summary
1
Hoodie
Small
$29
1
Snapback cap
$9
Subtotal
$38
Shipping
$4.58
Total
$44.58
HTML:
<!-- Checkout Section -->
<div class="container u-space-1">
<div class="row">
<div class="col-lg-4 order-lg-2 mb-9 mb-lg-0">
<!-- Title -->
<div class="mb-4">
<h2 class="h5">Order summary</h2>
</div>
<!-- End Title -->
<!-- Order Summary -->
<div class="shadow-sm rounded p-5">
<!-- Product -->
<div class="media align-items-center mb-5">
<div class="d-flex position-relative mr-3">
<img class="u-md-avatar rounded" src="../assets/img/64x64/img1.jpg" alt="Image Description">
<span class="u-badge u-badge-primary u-badge-pos rounded-circle">1</span>
</div>
<div class="media-body">
<h2 class="h6 mb-0">Hoodie</h2>
<small class="d-block text-secondary">Small</small>
</div>
<div class="media-body text-right">
<span>$29</span>
</div>
</div>
<!-- End Product -->
<!-- Product -->
<div class="media align-items-center">
<div class="d-flex position-relative mr-3">
<img class="u-md-avatar rounded" src="../assets/img/64x64/img2.jpg" alt="Image Description">
<span class="u-badge u-badge-primary u-badge-pos rounded-circle">1</span>
</div>
<div class="media-body">
<h2 class="h6 mb-0">Snapback cap</h2>
</div>
<div class="media-body text-right">
<span>$9</span>
</div>
</div>
<!-- End Product -->
<hr class="my-5">
<!-- Input -->
<form class="js-focus-state input-group u-form">
<input type="search" class="form-control u-form__input" placeholder="Discount" aria-label="Discount">
<div class="input-group-append">
<button type="button" class="btn btn-primary u-btn-primary">Apply</button>
</div>
</form>
<!-- End Input -->
<hr class="my-5">
<!-- Total -->
<div class="media align-items-center">
<div class="d-flex mr-3">
<h3 class="h6 text-secondary">Subtotal</h3>
</div>
<div class="media-body text-right">
<span>$38</span>
</div>
</div>
<div class="media align-items-center">
<div class="d-flex mr-3">
<h3 class="h6 text-secondary">Shipping</h3>
</div>
<div class="media-body text-right">
<span>$4.58</span>
</div>
</div>
<!-- End Total -->
<hr class="my-5">
<!-- Total -->
<div class="media align-items-center">
<div class="d-flex mr-3">
<h3 class="h6 text-secondary">Total</h3>
</div>
<div class="media-body text-right">
<strong>$44.58</strong>
</div>
</div>
<!-- End Total -->
</div>
<!-- End Order Summary -->
</div>
<div class="col-lg-8 order-lg-1">
<form class="js-validate">
<!-- Title -->
<div class="mb-4">
<h2 class="h5">Billing address</h2>
</div>
<!-- End Title -->
<!-- Billing Form -->
<div class="row mb-9">
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
First name
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="Jack"
aria-label="Jack"
data-msg="Please enter your frist name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Last name
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="Wayley"
aria-label="Wayley"
data-msg="Please enter your last name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="w-100"></div>
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Email address
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="email" required
placeholder="jackwayley@gmail.com"
aria-label="jackwayley@gmail.com"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Phone
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text"
placeholder="+1 (062) 109-9222"
aria-label="+1 (062) 109-9222"
data-msg="Please enter your last name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="w-100"></div>
<div class="col-md-8">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Street address
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="470 Lucy Forks"
aria-label="470 Lucy Forks"
data-msg="Please enter a valid address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-4">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Apt, suite, etc.
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text"
placeholder="YC7B 3UT"
aria-label="YC7B 3UT"
data-msg="Please enter a valid address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-12">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
City
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="London"
aria-label="London"
data-msg="Please enter a valid address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="w-100"></div>
<div class="col-md-6">
<!-- Input -->
<div class="mb-6">
<label class="h6 small d-block text-uppercase">
Country
<span class="text-danger">*</span>
</label>
<select class="custom-select">
<option selected>Select country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
<!-- End Input -->
</div>
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Postcode/Zip
<span class="text-danger">*</span>
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="99999"
aria-label="99999"
data-msg="Please enter a postcode or zip code."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
</div>
<!-- End Billing Form -->
<!-- Title -->
<div class="mb-4">
<h2 class="h5">Payment method</h2>
</div>
<!-- End Title -->
<!-- Button Group -->
<div class="btn-group btn-group-toggle mb-6">
<a class="js-animation-link btn btn-sm btn-outline-secondary u-btn-wide--sm active" href="javascript:;"
data-target="#creditCard"
data-link-group="paymentMethods"
data-animation-in="slideInUp">
Credit Card
</a>
<a class="js-animation-link btn btn-sm btn-outline-secondary u-btn-wide--sm" href="javascript:;"
data-target="#payPal"
data-link-group="paymentMethods"
data-animation-in="slideInUp">
PayPal
</a>
</div>
<!-- End Button Group -->
<!-- Credit Card -->
<div id="creditCard" data-target-group="paymentMethods">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Card number
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="**** **** **** ***"
aria-label="**** **** **** ***"
data-msg="Please enter a valid card number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<div class="row">
<div class="col-md-8">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Card holder
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="Jack Wayley"
aria-label="Jack Wayley"
data-msg="Please enter a valid card holder."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-2">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
Expiration
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="MM/YY"
aria-label="MM/YY"
data-msg="Please enter a valid date."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-2">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="h6 small d-block text-uppercase">
CVC
</label>
<div class="js-focus-state input-group u-form">
<input class="form-control u-form__input" type="text" required
placeholder="***"
aria-label="***"
data-msg="Please enter a valid CVC number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
</div>
<!-- Button -->
<div class="d-flex justify-content-between align-items-center">
<a href="#"><span class="fa fa-angle-left mr-2"></span> Return to cart</a>
<button type="submit" class="btn btn-primary u-btn-primary transition-3d-hover">Place order</button>
</div>
<!-- End Button -->
</div>
<!-- End Credit Card -->
<!-- Credit Card -->
<div id="payPal" style="display: none; opacity: 0;" data-target-group="paymentMethods">
<button type="submit" class="btn btn-block btn-warning u-btn-warning transition-3d-hover">
Pay with
<img src="../assets/img/logos/paypal.png" style="width: 70px;" alt="PayPal logo">
</button>
</div>
<!-- End Credit Card -->
</form>
</div>
</div>
</div>
<!-- End Checkout Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<script src="../assets/js/helpers/hs.quantity-counter.js"></script>
<script src="../assets/js/helpers/hs.show-animation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of quantity counter
$.HSCore.components.HSQantityCounter.init('.js-quantity');
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link');
});
</script>