Form Layouts
Space's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.
Overview
Some Space 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:
<form class="js-validate">
<!-- Signin -->
<div id="signin" data-target-group="idForm">
<!-- Title -->
<header class="text-center mb-5">
<h2 class="h4 mb-0">Please sign in</h2>
<p>Signin to manage your account.</p>
</header>
<!-- End Title -->
<!-- Input -->
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-user form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control 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-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-lock form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control 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="row mb-3">
<div class="col-6">
<!-- Checkbox -->
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input type="checkbox" class="custom-control-input" id="rememberMeCheckboxExample1">
<label class="custom-control-label" for="rememberMeCheckboxExample1">
Remember Me
</label>
</div>
<!-- End Checkbox -->
</div>
<div class="col-6 text-right">
<a class="js-animation-link float-right" href="javascript:;"
data-target="#forgotPassword"
data-link-group="idForm"
data-animation-in="fadeIn">Forgot Password?</a>
</div>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-block btn-primary">Signin</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">
Do not have an account?
<a class="js-animation-link" href="javascript:;"
data-target="#signup"
data-link-group="idForm"
data-animation-in="fadeIn">Signup
</a>
</p>
</div>
<!-- Divider -->
<div class="text-center u-divider-wrapper my-3">
<span class="u-divider u-divider--xs u-divider--text">OR</span>
</div>
<!-- End Divider -->
<!-- Signin Social Buttons -->
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-facebook">
<span class="fab fa-facebook-f mr-2"></span>
Signin with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-twitter">
<span class="fab fa-twitter mr-2"></span>
Signin with Twitter
</button>
</div>
</div>
<!-- End Signin Social Buttons -->
</div>
<!-- End Signin -->
<!-- Signup -->
<div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
<!-- Title -->
<header class="text-center mb-5">
<h2 class="h4 mb-0">Please sign up</h2>
<p>Fill out the form to get started.</p>
</header>
<!-- End Title -->
<!-- Input -->
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-user form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control 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-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-lock form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control 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-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-key form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control 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-3">
<button type="submit" class="btn btn-block btn-primary">Signup</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">
Have an account?
<a class="js-animation-link" href="javascript:;"
data-target="#signin"
data-link-group="idForm"
data-animation-in="fadeIn">Signin
</a>
</p>
</div>
<!-- Divider -->
<div class="text-center u-divider-wrapper my-3">
<span class="u-divider u-divider--xs u-divider--text">OR</span>
</div>
<!-- End Divider -->
<!-- Signup Social Buttons -->
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-facebook">
<span class="fab fa-facebook-f mr-2"></span>
Signup with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-twitter">
<span class="fab fa-twitter mr-2"></span>
Signup with Twitter
</button>
</div>
</div>
<!-- End Signup Social Buttons -->
</div>
<!-- End Signup -->
<!-- Forgot Password -->
<div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
<!-- Title -->
<header class="text-center mb-5">
<h2 class="h4 mb-0">Recover account</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-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-user form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control 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 -->
<div class="mb-3">
<button type="submit" class="btn btn-block btn-primary">Recover Account</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">
Have an account?
<a class="js-animation-link" href="javascript:;"
data-target="#signin"
data-link-group="idForm"
data-animation-in="fadeIn">Signin
</a>
</p>
</div>
</div>
<!-- End Forgot Password -->
</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>
<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
assets/css/signin.css needs to be loaded to center align on any device.
HTML:
<form class="js-validate form-signin p-5">
<!-- Logo -->
<div class="text-center">
<a href="../home/index.html" aria-label="Space">
<img class="mb-3" src="../assets/svg/logos/logo-short.svg" alt="Logo" width="60" height="60">
</a>
</div>
<!-- End Logo -->
<!-- Title -->
<div class="text-center mb-4">
<h1 class="h3 mb-0">Please sign up</h1>
<p>Fill out the form to get started.</p>
</div>
<!-- End Title -->
<!-- Input -->
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-user form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control 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-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-lock form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control 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-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-key form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control 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-3">
<button type="submit" class="btn btn-block btn-primary">Signup</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Have an account? <a href="../html/pages/signin-simple.html">Signin</a></p>
</div>
<!-- Divider -->
<div class="text-center u-divider-wrapper my-3">
<span class="u-divider u-divider--xs u-divider--text">OR</span>
</div>
<!-- End Divider -->
<!-- Signup Social Buttons -->
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<span class="fab fa-facebook-f mr-2"></span>
Signup with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<span class="fab fa-twitter mr-2"></span>
Signup with Twitter
</button>
</div>
</div>
<!-- End Signup Social Buttons -->
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2018 Htmlstream.</p>
</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>
Signup #3
HTML:
<!-- Signup Form -->
<div class="bg-white shadow-sm rounded p-6">
<form class="js-validate js-form-message">
<div class="mb-4">
<h2 class="h4">Get started for free</h2>
</div>
<!-- Input -->
<div class="js-focus-state input-group input-group form mb-3">
<input type="text" class="form-control form__input" name="username" required
placeholder="Enter your username"
aria-label="Enter your username">
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-focus-state input-group input-group form mb-3">
<input type="email" class="form-control form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-focus-state input-group input-group form mb-3">
<input type="password" class="form-control form__input" name="password" required
placeholder="Enter your password"
aria-label="Enter your password">
</div>
<!-- End Input -->
<button type="submit" class="btn btn-block btn-primary">Get Started</button>
</form>
</div>
<!-- End Signup 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>
Signin #1
HTML:
<form class="js-validate form-signin p-5">
<!-- Logo -->
<div class="text-center">
<a href="../home/index.html" aria-label="Space">
<img class="mb-3" src="../assets/svg/logos/logo-short.svg" alt="Logo" width="60" height="60">
</a>
</div>
<!-- End Logo -->
<!-- Title -->
<div class="text-center mb-4">
<h1 class="h3 mb-0">Please sign in</h1>
<p>Signin to manage your account.</p>
</div>
<!-- End Title -->
<!-- Input -->
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-user form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control 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-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-lock form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control 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="row mb-3">
<div class="col-6">
<!-- Checkbox -->
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input type="checkbox" class="custom-control-input" id="rememberMeCheckboxExample2">
<label class="custom-control-label" for="rememberMeCheckboxExample2">
Remember Me
</label>
</div>
<!-- End Checkbox -->
</div>
<div class="col-6 text-right">
<a class="float-right" href="../html/pages/recover-account.html">Forgot Password?</a>
</div>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-block btn-primary">Signin</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Do not have an account? <a href="../html/pages/signup-simple.html">Signup</a></p>
</div>
<!-- Divider -->
<div class="text-center u-divider-wrapper my-3">
<span class="u-divider u-divider--xs u-divider--text">OR</span>
</div>
<!-- End Divider -->
<!-- Signin Social Buttons -->
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<span class="fab fa-facebook-f mr-2"></span>
Signin with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<span class="fab fa-twitter mr-2"></span>
Signin with Twitter
</button>
</div>
</div>
<!-- End Signin Social Buttons -->
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2018 Htmlstream.</p>
</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', {
rules: {
confirmPassword: {
equalTo: '#password'
}
}
});
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Recover account #1
HTML:
<form class="js-validate form-signin p-5">
<!-- Logo -->
<div class="text-center">
<a href="../home/index.html" aria-label="Space">
<img class="mb-3" src="../assets/svg/logos/logo-short.svg" alt="Logo" width="60" height="60">
</a>
</div>
<!-- End Logo -->
<!-- Title -->
<div class="text-center mb-4">
<h1 class="h3 mb-0">Recover account</h1>
<p>Enter your email address and an email with instructions will be sent to you.</p>
</div>
<!-- End Title -->
<!-- Input -->
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<span class="fa fa-user form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control 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 -->
<div class="mb-3">
<button type="submit" class="btn btn-block btn-primary">Recover Account</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Have an account? <a href="../html/pages/signin-simple.html">Signin</a></p>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2018 Htmlstream.</p>
</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:
<form class="js-validate">
<div class="row">
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<div class="js-focus-state input-group form">
<input class="form-control form__input" type="text" name="name" required
placeholder="Your name"
aria-label="Your name"
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">
<div class="js-focus-state input-group form">
<input class="form-control form__input" type="email" name="email" required
placeholder="Your email address"
aria-label="Your email address"
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">
<div class="js-focus-state input-group form">
<input class="form-control form__input" type="text" name="subject" required
placeholder="Subject"
aria-label="Subject"
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">
<div class="js-focus-state input-group form">
<input class="form-control form__input" type="number" name="phone" required
placeholder="Your phone number"
aria-label="Your phone number"
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">
<div class="js-focus-state input-group form">
<textarea class="form-control form__input" rows="6" name="text" required
placeholder="How can we help you?"
aria-label="How can we help you?"
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 btn-wide mb-4">Submit</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 #1
HTML:
<!-- Hire Us Form -->
<div class="container space-2 space-3--lg">
<form class="js-validate w-lg-75 px-3 px-sm-9 mx-lg-auto">
<!-- Title -->
<div class="w-md-80 w-lg-60 text-center mx-md-auto mb-9">
<span class="u-label u-label--sm u-label--purple mb-3">Hire us</span>
<h1 class="h3">Got a project for us?</h1>
<p>We help brands and platforms turn big ideas into beautiful digital products and experiences.</p>
</div>
<!-- End Title -->
<!-- Input Form -->
<div class="row align-items-center">
<div class="col-md-4">
<label class="h6 small d-block text-uppercase mb-3 mb-lg-0">Your name:</label>
</div>
<div class="col-md-8">
<div class="js-form-message">
<div class="js-focus-state input-group form">
<input class="form-control form__input" type="text" name="fullName" 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>
</div>
<!-- End Input Form -->
<hr class="my-5">
<!-- Input Form -->
<div class="row align-items-center">
<div class="col-md-4">
<label class="h6 small d-block text-uppercase mb-3 mb-lg-0">Your email address:</label>
</div>
<div class="col-md-8">
<div class="js-form-message">
<div class="js-focus-state input-group form">
<input class="form-control 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>
</div>
<!-- End Input Form -->
<hr class="my-5">
<!-- Input Form -->
<div class="row align-items-center">
<div class="col-md-4">
<label class="h6 small d-block text-uppercase mb-3 mb-lg-0">What is your deadline?</label>
</div>
<div class="col-md-8">
<div class="js-form-message">
<div class="js-focus-state input-group form">
<input class="form-control form__input" type="text" name="deadline" 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>
</div>
<!-- End Input Form -->
<hr class="my-5">
<!-- Input Form -->
<div class="row align-items-center">
<div class="col-md-4">
<label class="h6 small d-block text-uppercase mb-3 mb-lg-0">Your website URL:</label>
</div>
<div class="col-md-8">
<div class="js-form-message">
<div class="js-focus-state input-group form">
<input class="form-control form__input" type="text"
placeholder="https://www.jackwayley.com"
aria-label="https://www.jackwayley.com">
</div>
</div>
</div>
</div>
<!-- End Input Form -->
<hr class="my-5">
<!-- Input Form -->
<div class="row align-items-center">
<div class="col-md-4">
<label class="h6 small d-block text-uppercase mb-3 mb-lg-0">Your company name:</label>
</div>
<div class="col-md-8">
<div class="js-form-message">
<div class="js-focus-state input-group form">
<input class="form-control form__input" type="text"
placeholder="JackWayley Inc."
aria-label="JackWayley Inc.">
</div>
</div>
</div>
</div>
<!-- End Input Form -->
<hr class="my-5">
<!-- Input Form -->
<div class="row align-items-center">
<div class="col-md-4">
<label class="h6 small d-block text-uppercase mb-3 mb-lg-0">Choose your platform:</label>
</div>
<div class="col-md-8">
<select class="custom-select">
<option selected>Website</option>
<option value="budget1">Online E-commerce</option>
<option value="budget2">Blog</option>
<option value="budget3">Other</option>
</select>
</div>
</div>
<!-- End Input Form -->
<hr class="my-5">
<!-- Input Form -->
<div class="row align-items-center">
<div class="col-md-4">
<label class="h6 small d-block text-uppercase mb-3 mb-lg-0">Tell us about your budget:</label>
</div>
<div class="col-md-8">
<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>
<!-- End Input Form -->
<hr class="my-5">
<!-- Input Form -->
<div class="mb-5">
<label class="h6 small d-block text-uppercase mb-3">Tell us about your project:</label>
<div class="js-focus-state input-group form">
<textarea class="form-control form__input" rows="4" name="aboutYourProject" 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 Form -->
<div class="text-center">
<button type="submit" class="btn btn-primary 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>
</div>
<!-- End Hire Us 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>
Select #1
HTML:
<!-- Job Positions - Filter -->
<form class="row align-items-md-center">
<div class="col-lg-4 mb-4 mb-lg-0">
<!-- Department Search Field -->
<div class="js-focus-state input-group form">
<input type="search" class="form-control form__input" placeholder="Search for jobs by keyword" aria-label="Search for jobs by keyword">
</div>
<!-- End Department Search Field -->
</div>
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<!-- Locations -->
<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>
<!-- End Locations -->
</div>
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<!-- Departments List -->
<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>
<!-- End Departments List -->
</div>
<div class="col-lg-2 text-lg-right">
<a class="btn btn-block btn-primary" href="#">Search</a>
</div>
</form>
<!-- End Job Positions - Filter -->
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>
Gift card #1
Gift card
$50 - $500
Amount
Quantity
HTML:
<!-- Gift Card Section -->
<div class="container space-2 space-3--lg">
<!-- Title -->
<div class="w-md-80 w-lg-60 text-center mx-md-auto mb-9">
<h1>Gift card</h1>
<span class="d-block h4 text-primary">$50 - $500</span>
</div>
<!-- End Title -->
<div class="row justify-content-lg-center">
<div class="col-md-6 col-lg-4 mb-9 mb-md-0">
<img class="w-100" src="../assets/svg/components/gift-card-icon.svg" alt="Image Description">
</div>
<div class="col-md-5 col-lg-4 offset-md-1 mt-md-auto">
<!-- Amount Select -->
<div class="mb-4">
<h2 class="h6">Amount</h2>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="giftCardSelector50" name="giftCardSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="giftCardSelector50">$50</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="giftCardSelector100" name="giftCardSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="giftCardSelector100">$100</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="giftCardSelector150" name="giftCardSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="giftCardSelector150">$150</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="giftCardSelector200" name="giftCardSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="giftCardSelector200">$200</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="giftCardSelector250" name="giftCardSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="giftCardSelector250">$250</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="giftCardSelector500" name="giftCardSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="giftCardSelector500">$500</label>
</div>
</div>
<!-- End Amount Select -->
<!-- Quantity Select -->
<div class="row">
<div class="col-6 col-xl-5">
<h3 class="h6">Quantity</h3>
<div class="js-quantity input-group form u-quantity">
<input class="js-result form-control 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>
</div>
<div class="col-6 align-self-end">
<button type="button" class="btn btn-sm btn-primary">Add to Bag</button>
</div>
</div>
<!-- End Quantity Select -->
</div>
</div>
</div>
<!-- End Gift Card 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>