HTML:
<!-- Hero Section -->
<div class="u-bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img8.jpg);">
<div class="container u-space-3">
<div class="row justify-content-end">
<div class="col-sm-10 col-md-8 col-lg-6 col-xl-5">
<!-- Content -->
<div class="bg-white shadow-sm rounded p-7">
<div class="mb-4">
<h2 class="font-weight-normal mb-0">Hire Us</h2>
</div>
<form class="js-validate">
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form u-form--modern">
<input type="text" class="form-control u-form__input" name="fullname" required
placeholder="Full name"
aria-label="Full name"
data-msg="Please enter a valid full name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-7">
<div class="js-focus-state input-group u-form u-form--modern">
<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 -->
<div class="d-flex align-items-center">
<div class="mr-3">
<button type="submit" class="btn btn-primary u-btn-primary u-btn-wide transition-3d-hover">Send</button>
</div>
<div>
<small class="d-block text-muted">or call us</small>
<strong class="d-block text-primary">+1 (062) 109-9222</strong>
</div>
</div>
</form>
</div>
<!-- End Content -->
</div>
</div>
</div>
</div>
<!-- End Hero 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/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate', {
rules: {
confirmPassword: {
equalTo: '#password'
}
}
});
});
</script>
