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.

Please sign in

Signin to manage your account.

Do not have an account? Signup

OR

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 Space -->
              <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. 2019 Htmlstream.</p>
                </form>
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <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

Get started for free

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 Space -->
              <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. 2019 Htmlstream.</p>
                </form>
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <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. 2019 Htmlstream.</p>
                </form>
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <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

We'll get back to you in 1-2 business days.

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 Space -->
              <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 #2

HTML:

              
                <!-- Contacts Section -->
                <div class="bg-dark">
                  <div class="container space-2 space-3--lg">
                    <!-- Contact Us Form -->
                    <form class="js-validate bg-white rounded w-lg-75 p-5 p-sm-7 mx-lg-auto">
                      <!-- Input Form -->
                      <div class="row mb-5">
                        <div class="col-md-4">
                          <label class="h6 small d-block text-uppercase mb-3 mb-lg-0">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="Your full name"
                                     aria-label="Your full name"
                                     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 -->

                      <!-- Input Form -->
                      <div class="row mb-5">
                        <div class="col-md-4">
                          <label class="h6 small d-block text-uppercase mb-3 mb-lg-0">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="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>
                      </div>
                      <!-- End Input Form -->

                      <!-- Input Form -->
                      <div class="row mb-5">
                        <div class="col-md-4">
                          <label class="h6 small d-block text-uppercase mb-3 mb-lg-0">Phone number:</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="phoneNumber" required
                                     placeholder="Your phone number"
                                     aria-label="Your phone number"
                                     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 -->

                      <!-- Input Form -->
                      <div class="row mb-5">
                        <div class="col-md-4">
                          <label class="h6 small d-block text-uppercase mb-3 mb-lg-0">Message:</label>
                        </div>
                        <div class="col-md-8">
                          <div class="js-form-message">
                            <div class="js-focus-state input-group form">
                              <textarea class="form-control form__input" rows="4" name="message" required
                                        placeholder="Please let us know why you're reaching out and what you may need help with. The more, the better!"
                                        aria-label="Please let us know why you're reaching out and what you may need help with. The more, the better!"
                                        data-msg="Please enter a reason."
                                        data-error-class="u-has-error"
                                        data-success-class="u-has-success"></textarea>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Input Form -->

                      <div class="row">
                        <div class="col-md-8 offset-md-4">
                          <button type="submit" class="btn btn-primary btn-wide">Contact Us</button>
                        </div>
                      </div>
                    </form>
                    <!-- End Contact Us Form -->
                  </div>
                </div>
                <!-- Contacts Section -->
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <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 #3

Contact us

Contact us today to learn more about how AI-powered insights will help your business. We'll get back to you in 1-2 business days.

Image Description

Call us

+1 (062) 109-9222
Image Description

Email us

support@htmlstream.com
Image Description

Address

Studio 76d, Riley Ford
North Michaelchester, CF99 6QQ
England

HTML:

              
                <!-- Contacts Section -->
                <div class="container">
                  <div class="row no-gutters border shadow rounded">
                    <div class="col-lg-5 bg-primary rounded">
                      <div class="p-5 p-md-9">
                        <!-- Title -->
                        <div class="mb-5">
                          <h2 class="text-white">Contact us</h2>
                          <p class="text-light">Contact us today to learn more about how AI-powered insights will help your business. We'll get back to you in 1-2 business days.</p>
                        </div>
                        <!-- End Title -->

                        <!-- Coins Name -->
                        <div class="media mb-5">
                          <img class="max-width-6 mr-3" src="../assets/svg/components/contacts-white-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h4 class="text-white-50 font-size-14 mb-0">Call us</h4>
                            <span class="d-block text-white font-size-14">+1 (062) 109-9222</span>
                          </div>
                        </div>
                        <!-- End Coins Name -->

                        <!-- Coins Name -->
                        <div class="media mb-5">
                          <img class="max-width-6 mr-3" src="../assets/svg/components/email-white-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h4 class="text-white-50 font-size-14 mb-0">Email us</h4>
                            <span class="d-block text-white font-size-14">support@htmlstream.com</span>
                          </div>
                        </div>
                        <!-- End Coins Name -->

                        <!-- Coins Name -->
                        <div class="media">
                          <img class="max-width-6 mr-3" src="../assets/svg/components/location-white-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h4 class="text-white-50 font-size-14 mb-0">Address</h4>
                            <span class="d-block text-white font-size-14">Studio 76d, Riley Ford<br>North Michaelchester, CF99 6QQ<br>England</span>
                          </div>
                        </div>
                        <!-- End Coins Name -->
                      </div>
                    </div>

                    <div class="col-lg-7 bg-gray-100 rounded">
                      <!-- Contacts Form -->
                      <form class="js-validate p-5 p-md-9">
                        <!-- Input -->
                        <div class="js-form-message mb-2">
                          <div class="js-focus-state input-group form form--no-brd">
                            <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>
                        <!-- End Input -->

                        <!-- Input -->
                        <div class="js-form-message mb-2">
                          <div class="js-focus-state input-group form form--no-brd">
                            <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>
                        <!-- End Input -->

                        <!-- Input -->
                        <div class="js-form-message mb-2">
                          <div class="js-focus-state input-group form form--no-brd">
                            <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>
                        <!-- End Input -->

                        <!-- Input -->
                        <div class="js-form-message mb-2">
                          <div class="js-focus-state input-group form form--no-brd">
                            <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>
                        <!-- End Input -->

                        <!-- Input -->
                        <div class="js-form-message mb-6">
                          <div class="js-focus-state input-group form form--no-brd">
                            <textarea class="form-control form__input" rows="3" name="text" required
                                      placeholder="Your message"
                                      aria-label="Your message"
                                      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="d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary btn-wide">Submit</button>
                        </div>
                      </form>
                      <!-- End Contacts Form -->
                    </div>
                  </div>
                </div>
                <!-- End Contacts Section -->
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <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

Hire us

Got a project for us?

We help brands and platforms turn big ideas into beautiful digital products and experiences.








We'll get back to you in 1-2 business days.

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 Space -->
              <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 Space -->
              <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
Image Description

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 Space -->
              <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>
            
          

Pricing #1

HTML:

              
                <div class="row justify-content-lg-center">
                  <div class="col-lg-6 order-lg-2 mb-7 mb-lg-0">
                    <!-- Card Pricing -->
                    <a class="card gradient-half-purple-v1 text-white border-0 p-5 mb-3" href="#">
                      <div class="row">
                        <div class="col-sm-4 col-md-3 col-lg-4 mb-3">
                          <span class="d-block">
                            <span class="h1 mb-0">$9.</span>
                            <span>99</span>
                          </span>
                          <small class="d-block">per person</small>
                        </div>

                        <div class="col-sm-8 col-md-9 col-lg-8 pl-sm-0">
                          <h3 class="h5 font-weight-medium">Basic pass</h3>
                          <address class="font-size-14 mb-0">
                            Sophiebury
                            <br>
                            47 Holmes Green, Sophiebury, WP9M 3ZZ
                            <br>
                            Manchester, United Kingdom
                          </address>
                        </div>
                      </div>
                    </a>
                    <!-- End Card Pricing -->

                    <!-- Card Pricing -->
                    <a class="card text-dark p-5" href="#">
                      <div class="row">
                        <div class="col-sm-4 col-md-3 col-lg-4 mb-3">
                          <span class="d-block text-primary">
                            <span class="h1 mb-0">$19.</span>
                            <span>99</span>
                          </span>
                          <small class="d-block">per person</small>
                        </div>

                        <div class="col-sm-8 col-md-9 col-lg-8 pl-sm-0">
                          <h3 class="h5 font-weight-medium">Full pass</h3>
                          <address class="text-secondary font-size-14 mb-0">
                            Sophiebury
                            <br>
                            47 Holmes Green, Sophiebury, WP9M 3ZZ
                            <br>
                            Manchester, United Kingdom
                          </address>
                        </div>
                      </div>
                    </a>
                    <!-- End Card Pricing -->
                  </div>

                  <div class="col-lg-4 order-lg-1">
                    <form class="js-validate">
                      <!-- Input Form -->
                      <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="text" class="form-control form__input" name="fullName" required
                                 placeholder="Full name"
                                 aria-label="Full name"
                                 data-msg="Please enter your full name."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                      <!-- End Input Form -->

                      <!-- Input Form -->
                      <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-envelope form__text-inner"></span>
                            </span>
                          </div>
                          <input type="email" class="form-control form__input" name="email" required
                                 placeholder="Email address"
                                 aria-label="Email address"
                                 data-msg="Please enter a valid email address."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                      <!-- End Input Form -->

                      <!-- Input Form -->
                      <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-phone form__text-inner"></span>
                            </span>
                          </div>
                          <input type="text" class="form-control form__input" name="phone" required
                                 placeholder="Phone number"
                                 aria-label="Phone number"
                                 data-msg="Please enter a valid phone number."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                      <!-- End Input Form -->

                      <!-- Select Form -->
                      <div class="js-focus-state input-group form mb-6">
                        <div class="input-group-prepend form__prepend">
                          <span class="input-group-text form__text">
                            <span class="fa fa-box-open form__text-inner"></span>
                          </span>
                        </div>
                        <select class="custom-select">
                          <option selected>Your plan</option>
                          <option value="basiPass">Basic pass</option>
                          <option value="fullPass">Full pass</option>
                        </select>
                      </div>
                      <!-- End Select Form -->

                      <button type="submit" class="btn btn-block btn-primary">Register Now</button>
                    </form>
                  </div>
                </div>
              
            

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

              <!-- JS Space -->
              <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>
            
          

Booking #1

HTML:

              
                <form class="bg-white rounded shadow-sm p-5" action="#">
                  <div class="row">
                    <div class="col-md-6 col-lg-3">
                      <div class="form-group mb-3">
                        <label class="text-uppercase font-weight-medium">Check-in</label>
                        <div id="datepickerWrapperFrom" class="u-datepicker input-group">
                          <div class="input-group-prepend">
                            <div id="calendarFromLabel" class="input-group-text">
                              <i class="svg-icon svg-icon-xs text-muted">
                                <svg viewBox="0 0 24 24" width="24" height="24" class="stroke-gray-200" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                              </i>
                            </div>
                          </div>

                          <input class="js-range-datepicker form-control bg-white text-muted" type="text" placeholder="mm/dd/yyyy" aria-label="From" aria-describedby="calendarFromLabel"
                                 data-rp-wrapper="#datepickerWrapperFrom"
                                 data-rp-date-format="D, M d">
                        </div>
                      </div>
                    </div>

                    <div class="col-md-6 col-lg-3">
                      <div class="form-group mb-3">
                        <label class="text-uppercase font-weight-medium">Check-out</label>
                        <div id="datepickerWrapperTo" class="u-datepicker input-group">
                          <div class="input-group-prepend">
                            <div id="calendarFromLabel" class="input-group-text">
                              <i class="svg-icon svg-icon-xs text-muted">
                                <svg viewBox="0 0 24 24" width="24" height="24" class="stroke-gray-200" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                              </i>
                            </div>
                          </div>

                          <input class="js-range-datepicker form-control bg-white text-muted" type="text" placeholder="mm/dd/yyyy" aria-label="To" aria-describedby="calendarToLabel"
                                 data-rp-wrapper="#datepickerWrapperTo"
                                 data-rp-date-format="D, M d">
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="row align-items-end">
                        <div class="col-9">
                          <div class="form-group mb-3">
                            <label class="text-uppercase font-weight-medium">Guests</label>
                            <div class="dropdown">
                              <div class="u-guests input-group position-relative" data-toggle="dropdown" aria-expanded="false">
                                <div class="input-group-prepend z-index-2">
                                  <div class="input-group-text">
                                    <i class="svg-icon svg-icon-2xs text-muted">
                                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18">
                                        <path d="M14.286,18H1.715A1.7,1.7,0,0,1,0,16.313V14.85a4.768,4.768,0,0,1,4.8-4.725h.6a6.307,6.307,0,0,0,5.207,0h.6A4.769,4.769,0,0,1,16,14.85v1.462A1.7,1.7,0,0,1,14.286,18ZM8,9A4.541,4.541,0,0,1,3.429,4.5a4.572,4.572,0,0,1,9.142,0A4.541,4.541,0,0,1,8,9Z" fill="#000000" />
                                      </svg>
                                    </i>
                                  </div>
                                </div>

                                <input class="js-string-unifier u-guests__input form-control bg-white text-muted" type="text" value="1 Guest" readonly
                                       data-su-options='{
                                         "data": [
                                           {
                                             "title": "Guest",
                                             "titleMultiplier": "s",
                                             "target": ["#adultsQty", "#childrenQty"]
                                           },
                                           {
                                             "title": "Infant",
                                             "titleMultiplier": "s",
                                             "target": ["#infantsQty"]
                                           }
                                         ]
                                       }'>

                                <svg class="u-guests__input-i" xmlns="http://www.w3.org/2000/svg" width="11.964" height="6.974" viewBox="0 0 11.964 6.974">
                                  <g data-name="chevron down" transform="translate(-0.018 -0.013)">
                                    <path d="M5.517,6.789.193,1.675a.614.614,0,0,1,0-.893l.621-.6a.677.677,0,0,1,.929,0l4.24,4.053L10.222.184a.677.677,0,0,1,.929,0l.621.6a.614.614,0,0,1,0,.893L6.447,6.789A.677.677,0,0,1,5.517,6.789Z" transform="translate(0.018 0.013)" />
                                  </g>
                                </svg>
                              </div>

                              <div class="dropdown-menu dropdown-menu-right font-size-base u-guests-options p-4 shadow">
                                <div class="d-flex justify-content-between mb-3">
                                  <div class="u-guests-options__label font-weight-medium">
                                    Adults
                                    <em class="small u-guests-options__label-info">Above 12</em>
                                  </div>

                                  <div class="js-quantity u-guests-options__data d-flex align-items-center"
                                       data-min-val="1">
                                    <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                                      <i class="svg-icon svg-icon-xs text-primary">
                                        <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                          </g>
                                        </svg>
                                      </i>
                                    </span>

                                    <span id="adultsQty" class="js-result u-guests-options__value">1</span>

                                    <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                                      <i class="svg-icon svg-icon-xs text-primary">
                                        <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                          </g>
                                        </svg>
                                      </i>
                                    </span>
                                  </div>
                                </div>

                                <div class="d-flex justify-content-between mb-3">
                                  <div class="u-guests-options__label font-weight-medium">
                                    Children
                                    <em class="small u-guests-options__label-info">Ages 2–12</em>
                                  </div>

                                  <div class="js-quantity u-guests-options__data d-flex align-items-center">
                                    <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                                      <i class="svg-icon svg-icon-xs text-primary">
                                        <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                          </g>
                                        </svg>
                                      </i>
                                    </span>

                                    <span id="childrenQty" class="js-result u-guests-options__value">0</span>

                                    <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                                      <i class="svg-icon svg-icon-xs text-primary">
                                        <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                          </g>
                                        </svg>
                                      </i>
                                    </span>
                                  </div>
                                </div>

                                <div class="d-flex justify-content-between mb-3">
                                  <div class="u-guests-options__label font-weight-medium">
                                    Infants
                                    <em class="small u-guests-options__label-info">Under 2</em>
                                  </div>

                                  <div class="js-quantity u-guests-options__data d-flex align-items-center">
                                    <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                                      <i class="svg-icon svg-icon-xs text-primary">
                                        <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                          </g>
                                        </svg>
                                      </i>
                                    </span>

                                    <span id="infantsQty" class="js-result u-guests-options__value">0</span>

                                    <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                                      <i class="svg-icon svg-icon-xs text-primary">
                                        <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                          </g>
                                        </svg>
                                      </i>
                                    </span>
                                  </div>
                                </div>

                                <div class="text-right">
                                  <a class="u-guests-options__apply" href="javascript:;">Apply</a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="col-3 pl-0 pl-sm-3">
                          <button type="submit" class="btn btn-primary d-block w-100 mb-3 px-2 px-sm-3">
                            <i class="svg-icon svg-icon-2xs text-white">
                              <svg xmlns="http://www.w3.org/2000/svg" width="17.998" height="17.967" viewBox="0 0 17.998 17.967">
                                <g transform="translate(0 0)">
                                  <path  d="M16.161,17.967a.839.839,0,0,1-.6-.248l-3.506-3.5a.838.838,0,0,1-.246-.6v-.572a7.3,7.3,0,1,1,1.265-1.264h.573a.842.842,0,0,1,.6.246l3.506,3.5a.848.848,0,0,1,0,1.193l-1,.993A.83.83,0,0,1,16.161,17.967ZM7.312,2.807a4.491,4.491,0,1,0,4.5,4.491A4.5,4.5,0,0,0,7.312,2.807Z" fill="#000000"/>
                                </g>
                              </svg>
                            </i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              
            

CSS library:

            
              <link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css">
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/components/hs.range-datepicker.js"></script>
              <script src="../assets/js/helpers/hs.set-guest-count.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of setGuestCount
                  $.HSCore.helpers.HSsetGuestCount.init();

                  // initialization of range datepicker
                  $.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
                });
              </script>