Form - Directory

Component #1

Listing agent information
Type of listing
Listing information
Estimated running costs
Upload images
SVG Browse your device and upload images Maximum file size is 2MB
SVG Upload floorplan Maximum file size is 1MB
                    
                      <form class="js-validate">
                        <!-- Listing Agent Information -->
                        <div class="mb-5">
                          <h5 class="divider mb-5">Listing agent information</h5>

                          <div class="row">
                            <div class="col-md-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingAgentAgentName" class="input-label">Listing agent name</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingAgentAgentNameLabel">
                                      <i class="fas fa-user"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="agentName" id="listingAgentAgentName" placeholder="Listing agent name" aria-label="Listing agent name" aria-describedby="listingAgentAgentNameLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-md-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingAgentPhoneNumber" class="input-label">Phone number</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingAgentPhoneNumberLabel">
                                      <i class="fas fa-phone"></i>
                                    </span>
                                  </div>
                                  <input type="tel" class="form-control" name="phoneNumber" id="listingAgentPhoneNumber" placeholder="Phone number" aria-label="Phone number" aria-describedby="listingAgentPhoneNumberLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>
                          </div>

                          <div class="row">
                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingAgentRealEstateAgency" class="input-label">Real estate agency</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingAgentRealEstateAgencyLabel">
                                      <i class="fas fa-briefcase"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="RealEstateAgency" id="listingAgentRealEstateAgency" placeholder="Real estate agency" aria-label="Real estate agency" aria-describedby="listingAgentRealEstateAgencyLabel">
                                </div>
                              </div>
                            </div>
                            <!-- End Input -->

                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingAgentWebsiteAddress" class="input-label">Website address</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingAgentWebsiteAddressLabel">
                                      <i class="fas fa-globe"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="websiteAddress" id="listingAgentWebsiteAddress" placeholder="Website address" aria-label="Website address" aria-describedby="listingAgentWebsiteAddressLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>
                          </div>
                        </div>
                        <!-- End Listing Agent Information -->

                        <!-- Type of Listing -->
                        <div class="mb-10">
                          <h5 class="divider mb-5">Type of listing</h5>

                          <!-- Radio Checkbox Group -->
                          <div class="row mx-n2">
                            <div class="col-6 col-md-3 px-2 mb-3 mb-md-0">
                              <div class="custom-control custom-radio custom-control-inline checkbox-outline checkbox-icon text-center w-100 h-100">
                                <input type="radio" id="typeOfListingRadio1" name="typeOfListingRadio1" class="custom-control-input checkbox-outline-input checkbox-icon-input">
                                <label class="checkbox-outline-label checkbox-icon-label w-100 rounded py-3 px-1 mb-0" for="typeOfListingRadio1">
                                  <img class="img-fluid w-50 mb-3" src="../assets/svg/illustrations/small-house.svg" alt="SVG">
                                  <span class="d-block">House</span>
                                </label>
                              </div>
                            </div>
                            <div class="col-6 col-md-3 px-2 mb-3 mb-md-0">
                              <div class="custom-control custom-radio custom-control-inline checkbox-outline checkbox-icon text-center w-100 h-100">
                                <input type="radio" id="typeOfListingRadio2" name="typeOfListingRadio1" class="custom-control-input checkbox-outline-input checkbox-icon-input" checked>
                                <label class="checkbox-outline-label checkbox-icon-label w-100 rounded py-3 px-1 mb-0" for="typeOfListingRadio2">
                                  <img class="img-fluid w-50 mb-3" src="../assets/svg/illustrations/flat-house.svg" alt="SVG">
                                  <span class="d-block">Flat</span>
                                </label>
                              </div>
                            </div>
                            <div class="col-6 col-md-3 px-2">
                              <div class="custom-control custom-radio custom-control-inline checkbox-outline checkbox-icon text-center w-100 h-100">
                                <input type="radio" id="typeOfListingRadio3" name="typeOfListingRadio1" class="custom-control-input checkbox-outline-input checkbox-icon-input">
                                <label class="checkbox-outline-label checkbox-icon-label w-100 rounded py-3 px-1 mb-0" for="typeOfListingRadio3">
                                  <img class="img-fluid w-50 mb-3" src="../assets/svg/illustrations/multi-family-house.svg" alt="SVG">
                                  <span class="d-block">Multi-family</span>
                                </label>
                              </div>
                            </div>
                            <div class="col-6 col-md-3 px-2">
                              <div class="custom-control custom-radio custom-control-inline checkbox-outline checkbox-icon text-center w-100 h-100">
                                <input type="radio" id="typeOfListingRadio4" name="typeOfListingRadio1" class="custom-control-input checkbox-outline-input checkbox-icon-input">
                                <label class="checkbox-outline-label checkbox-icon-label w-100 rounded py-3 px-1 mb-0" for="typeOfListingRadio4">
                                  <img class="w-50 mb-3" src="../assets/svg/illustrations/farm-land.svg" alt="SVG">
                                  <span class="d-block">Farms/land</span>
                                </label>
                              </div>
                            </div>
                          </div>
                          <!-- End Radio Checkbox Group -->
                        </div>
                        <!-- End Type of Listing -->

                        <!-- Listing Information -->
                        <div class="mb-5">
                          <h5 class="divider mb-5">Listing information</h5>

                          <!-- Input -->
                          <div class="form-group mb-5">
                            <label for="listingPrice" class="input-label">Price</label>
                            <div class="input-group input-group-merge">
                              <div class="input-group-prepend">
                                <span class="input-group-text" id="listingPriceLabel">
                                  <i class="fas fa-dollar-sign"></i>
                                </span>
                              </div>
                              <input type="text" class="form-control" name="price" id="listingPrice" placeholder="Price" aria-label="Price" aria-describedby="listingPriceLabel">
                            </div>
                          </div>
                          <!-- End Input -->

                          <div class="row">
                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingAddress" class="input-label">Address</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingAddressLabel">
                                      <i class="fas fa-map-marker-alt"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="address" id="listingAddress" placeholder="Address" aria-label="Address" aria-describedby="listingAddressLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingCityProvince" class="input-label">City, Province</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingCityProvinceLabel">
                                      <i class="fas fa-city"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="cityProvince" id="listingCityProvince" placeholder="City, Province" aria-label="City, Province" aria-describedby="listingCityProvinceLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>
                          </div>

                          <div class="row">
                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingLotSize" class="input-label">Lot size</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingLotSizeLabel">
                                      <i class="fas fa-ruler-combined"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="lotSize" id="listingLotSize" placeholder="Lot size" aria-label="Lot size" aria-describedby="listingLotSizeLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingPostalCode" class="input-label">Postal code</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingPostalCodeLabel">
                                      <i class="fas fa-envelope-open"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="PostalCode" id="listingPostalCode" placeholder="Postal code" aria-label="Postal code" aria-describedby="listingPostalCodeLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>
                          </div>

                          <div class="row">
                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingBedroom" class="input-label">Bedroom</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingBedroomLabel">
                                      <i class="fas fa-bed"></i>
                                    </span>
                                  </div>
                                  <select class="custom-select" id="listingBedroom" aria-describedby="listingBedroomLabel">
                                    <option selected>Choose amount</option>
                                    <option value="parkingSpacesSelect1">1</option>
                                    <option value="parkingSpacesSelect2">2</option>
                                    <option value="parkingSpacesSelect3">3</option>
                                    <option value="parkingSpacesSelect4">4</option>
                                    <option value="parkingSpacesSelect5plus">5+</option>
                                  </select>
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingBathrooms" class="input-label">Bathrooms</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingBathroomsLabel">
                                      <i class="fas fa-bath"></i>
                                    </span>
                                  </div>
                                  <select class="custom-select" id="listingBathrooms" aria-describedby="listingBathroomsLabel">
                                    <option selected>Choose amount</option>
                                    <option value="bathroomsSelect1">1</option>
                                    <option value="bathroomsSelect2">2</option>
                                    <option value="bathroomsSelect3">3</option>
                                    <option value="bathroomsSelect4">4</option>
                                    <option value="bathroomsSelect5plus">5+</option>
                                  </select>
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>
                          </div>

                          <div class="row">
                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingKitchen" class="input-label">Kitchen</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingKitchenLabel">
                                      <i class="fas fa-utensils"></i>
                                    </span>
                                  </div>
                                  <select class="custom-select" id="listingKitchen" aria-describedby="listingKitchenLabel">
                                    <option selected>Choose amount</option>
                                    <option value="kitchenSelect1">1</option>
                                    <option value="kitchenSelect2">2</option>
                                    <option value="kitchenSelect3">3</option>
                                    <option value="kitchenSelect4">4</option>
                                    <option value="kitchenSelect5plus">5+</option>
                                  </select>
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="listingYearBuilt" class="input-label">Year built</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="listingYearBuiltLabel">
                                      <i class="fas fa-calendar"></i>
                                    </span>
                                  </div>
                                  <select class="custom-select" id="listingYearBuilt" aria-describedby="listingYearBuiltLabel">
                                    <option selected>Choose year</option>
                                    <option value="yearBuiltSelectOlder">Older</option>
                                    <option value="yearBuiltSelect1985">1985</option>
                                    <option value="yearBuiltSelect1986">1986</option>
                                    <option value="yearBuiltSelect1987">1987</option>
                                    <option value="yearBuiltSelect1988">1988</option>
                                    <option value="yearBuiltSelect1989">1989</option>
                                    <option value="yearBuiltSelect1990">1990</option>
                                    <option value="yearBuiltSelect1991">1991</option>
                                    <option value="yearBuiltSelect1992">1992</option>
                                    <option value="yearBuiltSelect1993">1993</option>
                                    <option value="yearBuiltSelect1994">1994</option>
                                    <option value="yearBuiltSelect1995">1995</option>
                                    <option value="yearBuiltSelect1996">1996</option>
                                    <option value="yearBuiltSelect1997">1997</option>
                                    <option value="yearBuiltSelect1998">1998</option>
                                    <option value="yearBuiltSelect1999">1999</option>
                                    <option value="yearBuiltSelect2000">2000</option>
                                    <option value="yearBuiltSelect2001">2001</option>
                                    <option value="yearBuiltSelect2002">2002</option>
                                    <option value="yearBuiltSelect2003">2003</option>
                                    <option value="yearBuiltSelect2004">2004</option>
                                    <option value="yearBuiltSelect2005">2005</option>
                                    <option value="yearBuiltSelect2006">2006</option>
                                    <option value="yearBuiltSelect2007">2007</option>
                                    <option value="yearBuiltSelect2008">2008</option>
                                    <option value="yearBuiltSelect2009">2009</option>
                                    <option value="yearBuiltSelect2010">2010</option>
                                    <option value="yearBuiltSelect2011">2011</option>
                                    <option value="yearBuiltSelect2012">2012</option>
                                    <option value="yearBuiltSelect2013">2013</option>
                                    <option value="yearBuiltSelect2014">2014</option>
                                    <option value="yearBuiltSelect2015">2015</option>
                                    <option value="yearBuiltSelect2016">2016</option>
                                    <option value="yearBuiltSelect2017">2017</option>
                                  </select>
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>
                          </div>

                          <label class="input-label">Listing description</label>

                          <!-- Quill -->
                          <div class="quill-custom form-group">
                            <div class="js-quill" style="min-height: 15rem;"
                                 data-hs-quill-options='{
                                 "placeholder": "Type your message...",
                                  "modules": {
                                    "toolbar": [
                                      ["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
                                    ]
                                  }
                                 }'>
                            </div>
                          </div>
                          <!-- End Quill -->
                        </div>
                        <!-- End Listing Information -->

                        <!-- Utilities -->
                        <div class="mb-5">
                          <h5 class="divider mb-5">Estimated running costs</h5>

                          <div class="row">
                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="utilitiesMortgage" class="input-label">Mortgage</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="utilitiesMortgageLabel">
                                      <i class="fas fa-hand-holding-usd"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="mortgage" id="utilitiesMortgage" placeholder="Mortgage" aria-label="Mortgage" aria-describedby="utilitiesMortgageLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="utilitiesEnergy" class="input-label">Energy</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="utilitiesEnergyLabel">
                                      <i class="fas fa-burn"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="energy" id="utilitiesEnergy" placeholder="Energy" aria-label="Energy" aria-describedby="utilitiesEnergyLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>
                          </div>

                          <div class="row">
                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="utilitiesWater" class="input-label">Water</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="utilitiesWaterLabel">
                                      <i class="fas fa-tint"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="water" id="utilitiesWater" placeholder="Water" aria-label="Water" aria-describedby="utilitiesWaterLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-lg-6 mb-3">
                              <!-- Input -->
                              <div class="form-group">
                                <label for="utilitiesHomeInsurance" class="input-label">Home insurance</label>
                                <div class="input-group input-group-merge">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="utilitiesHomeInsuranceLabel">
                                      <i class="fas fa-shield-alt"></i>
                                    </span>
                                  </div>
                                  <input type="text" class="form-control" name="HomeInsurance" id="utilitiesHomeInsurance" placeholder="Home insurance" aria-label="Home insurance" aria-describedby="utilitiesHomeInsuranceLabel">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>
                          </div>
                        </div>
                        <!-- End Utilities -->

                        <!-- Upload Images -->
                        <div class="mb-5">
                          <h5 class="divider mb-5">Upload images</h5>

                          <div class="row">
                            <div class="col-lg-6 mb-3">
                              <label class="input-label">Property media</label>

                              <!-- File Attachment Input -->
                              <div id="imaegDropzone" class="js-dropzone dz-dropzone dz-dropzone-boxed">
                                <div class="dz-message">
                                  <img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="SVG">
                                  <span class="d-block">Browse your device and upload images</span>
                                  <small class="d-block text-muted">Maximum file size is 2MB</small>
                                </div>
                              </div>
                              <!-- End File Attachment Input -->
                            </div>

                            <div class="col-lg-6 mb-3">
                              <label class="input-label">Floorplan</label>

                              <!-- File Attachment Input -->
                              <div id="floorplanDropzone" class="js-dropzone dz-dropzone dz-dropzone-boxed">
                                <div class="dz-message">
                                  <img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="SVG">
                                  <span class="d-block">Upload floorplan</span>
                                  <small class="d-block text-muted">Maximum file size is 1MB</small>
                                </div>
                              </div>
                              <!-- End File Attachment Input -->
                            </div>
                          </div>
                        </div>
                        <!-- End Upload Images -->

                        <button type="submit" class="btn btn-primary btn-block transition-3d-hover">Submit</button>
                      </form>
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.validation.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FORM VALIDATION
                          // =======================================================
                          $('.js-validate').each(function () {
                            var validation = $.HSCore.components.HSValidation.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #2

Payment calculator

£37,469 monthly. In association with:
£
£
%
  • Principal and Interest
    £35,943 /mo
  • Property Taxes
    £1,526 /mo
  • Yearly Condo Fees
    n/a

* These results are not provided by Front House and are only indicative based on a repayment mortgage product. Repayments will be subject to the product provided and your circumstances.

                    
                      <!-- Card -->
                      <div class="card card-bordered">
                        <div class="card-body">
                          <h4 class="mb-4">Payment calculator</h4>

                          <div class="mb-4">
                            <span class="h4">£37,469</span>
                            <span class="h6">monthly.</span>
                            <span class="ml-3">In association with:</span>
                          </div>

                          <!-- Stats -->
                          <div class="row mb-2 mb-lg-0">
                            <div class="col-lg-7 mb-2 mb-lg-0">
                              <!-- Calculator Form -->
                              <form class="row">
                                <div class="col-md-6 mb-4">
                                  <!-- Input -->
                                  <label class="input-label">Price of property</label>

                                  <div class="input-group input-group-merge">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">£</span>
                                    </div>
                                    <input class="form-control" type="text" value="£8,999,000" disabled>
                                  </div>
                                  <!-- End Input -->
                                </div>

                                <div class="col-md-6 mb-4">
                                  <!-- Input -->
                                  <label class="input-label">Deposit</label>

                                  <div class="input-group input-group-merge">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">£</span>
                                    </div>
                                    <input class="form-control" type="text" value="1,799,800">
                                  </div>
                                  <!-- End Input -->
                                </div>

                                <div class="w-100"></div>

                                <div class="col-md-6 mb-4">
                                  <!-- Input -->
                                  <label class="input-label">Interest rate</label>

                                  <div class="input-group input-group-merge">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">%</span>
                                    </div>
                                    <input class="form-control" type="text" value="3.5">
                                  </div>
                                  <!-- End Input -->
                                </div>

                                <div class="col-md-6 mb-4">
                                  <!-- Input -->
                                  <label class="input-label">Amortization</label>

                                  <select class="custom-select">
                                    <option value="amortization1">30 years</option>
                                    <option selected>25 years</option>
                                    <option value="amortization2">20 years</option>
                                    <option value="amortization3">15 years</option>
                                    <option value="amortization4">10 years</option>
                                  </select>
                                  <!-- End Input -->
                                </div>
                              </form>
                              <!-- End Calculator Form -->
                            </div>

                            <div class="col-lg-5">
                              <!-- Progress -->
                              <div class="progress mb-3" style="height: .5rem;">
                                <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-info" role="progressbar" style="width: 10%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                              <!-- End Progress -->

                              <!-- Fact List -->
                              <ul class="list-unstyled list-sm-article font-size-1 mb-0">
                                <li class="d-flex align-items-center">
                                  <i class="far fa-circle text-primary mr-2"></i>
                                  <span class="text-dark font-weight-bold">Principal and Interest</span>
                                  <div class="ml-auto">
                                    <span>£35,943 /mo</span>
                                  </div>
                                </li>

                                <li class="d-flex align-items-center">
                                  <i class="far fa-circle text-success mr-2"></i>
                                  <span class="text-dark font-weight-bold">Property Taxes</span>
                                  <div class="ml-auto">
                                    <span>£1,526 /mo</span>
                                  </div>
                                </li>

                                <li class="d-flex align-items-center">
                                  <i class="far fa-circle text-info mr-2"></i>
                                  <span class="text-dark font-weight-bold">Yearly Condo Fees</span>
                                  <div class="ml-auto">
                                    <span>n/a</span>
                                  </div>
                                </li>
                              </ul>
                              <!-- End Fact List -->
                            </div>
                          </div>
                          <!-- End Stats -->

                          <p class="small">* These results are not provided by Front House and are only indicative based on a repayment mortgage product. Repayments will be subject to the product provided and your circumstances.</p>
                        </div>
                      </div>
                      <!-- End Card -->
                    
                  

Component #3

Upload Logo
SVG Browse your device and upload images Maximum file size is 2MB
                    
                      <!-- Card -->
                      <div class="card card-bordered shadow-none">
                        <div class="card-body">
                          <!-- Form Group -->
                          <div class="row form-group">
                            <label class="col-sm-3 col-form-label input-label">Product logo</label>

                            <div class="col-sm-9">
                              <div class="d-flex align-items-center">
                                <!-- Avatar -->
                                <label class="avatar avatar-xl avatar-circle mr-4" for="avatarUploader">
                                  <img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img38.jpg" alt="Image Description">
                                </label>
                                <div class="btn btn-sm btn-primary file-attachment-btn">Upload Logo
                                  <input type="file" class="js-file-attach file-attachment-btn-label" id="avatarUploader"
                                         data-hs-file-attach-options='{
                                            "textTarget": "#avatarImg",
                                            "mode": "image",
                                            "targetAttr": "src",
                                            "resetTarget": ".js-file-attach-reset-img",
                                            "resetImg": "../assets/img/160x160/img38.jpg",
                                            "allowTypes": [".png", ".jpeg", ".jpg"]
                                         }'>
                                </div>
                                <!-- End Avatar -->

                                <button type="button" class="js-file-attach-reset-img btn btn-sm btn-white ml-2">Delete</button>
                              </div>
                            </div>
                          </div>
                          <!-- End Form Group -->

                          <!-- Form Group -->
                          <div class="row form-group">
                            <label for="projectNameLabel" class="col-sm-3 col-form-label input-label">Project name</label>

                            <div class="col-sm-9">
                              <input type="text" class="form-control" id="projectNameLabel" placeholder="Front app">
                            </div>
                          </div>
                          <!-- End Form Group -->

                          <!-- Form Group -->
                          <div class="row form-group">
                            <label for="appWebsiteLabel" class="col-sm-3 col-form-label input-label">App website</label>

                            <div class="col-sm-9">
                              <input type="text" class="form-control" id="appWebsiteLabel" placeholder="https://frontapp.com">
                            </div>
                          </div>
                          <!-- End Form Group -->

                          <!-- Form Group -->
                          <div class="row form-group">
                            <label class="col-sm-3 col-form-label input-label">Preview image</label>

                            <div class="col-sm-9">
                              <!-- File Attachment Input -->
                              <div id="dropzoneUpload" class="js-dropzone dz-dropzone dz-dropzone-boxed">
                                <div class="dz-message">
                                  <img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="SVG">
                                  <span class="d-block">Browse your device and upload images</span>
                                  <small class="d-block text-muted">Maximum file size is 2MB</small>
                                </div>
                              </div>
                              <!-- End File Attachment Input -->
                            </div>
                          </div>
                          <!-- End Form Group -->

                          <!-- Form Group -->
                          <div class="row form-group">
                            <label for="categoryLabel" class="col-sm-3 col-form-label input-label">Category</label>

                            <div class="col-sm-9">
                              <!-- Select -->
                              <select class="js-custom-select" id="categoryLabel" multiple
                                    data-hs-select2-options='{
                                      "minimumResultsForSearch": "Infinity",
                                      "singleMultiple": true,
                                      "placeholder": "Select one of our categories that best fit your product."
                                    }'>
                                <option label="empty"></option>
                                <option value="Ecommerce">Ecommerce</option>
                                <option value="Finance">Finance</option>
                                <option value="Marketplace">Marketplace</option>
                                <option value="Social">Social</option>
                                <option value="Others">Others</option>
                              </select>
                              <!-- End Select -->
                            </div>
                          </div>
                          <!-- End Form Group -->

                          <!-- Form Group -->
                          <div class="row form-group">
                            <label for="shortDescriptionLabel" class="col-sm-3 col-form-label input-label mt-4">Short description</label>

                            <div class="col-sm-9">
                              <div class="d-flex justify-content-end">
                                <span id="maxLengthShortDescriptionCountCharacters" class="text-muted"></span>
                              </div>

                              <textarea class="js-count-characters form-control" id="shortDescriptionLabel" placeholder="This is to provide an idea of what does your product do. A good short summary will entice users to click and visit your page." maxlength="70"
                                        data-hs-count-characters-options='{
                                          "output": "#maxLengthShortDescriptionCountCharacters"
                                        }'></textarea>
                            </div>
                          </div>
                          <!-- End Form Group -->

                          <!-- Form Group -->
                          <div class="row form-group">
                            <label class="col-sm-3 col-form-label input-label">Detail description</label>

                            <div class="col-sm-9">
                              <!-- Quill -->
                              <div class="quill-custom">
                                <div class="js-quill" style="min-height: 15rem;"
                                     data-hs-quill-options='{
                                     "placeholder": "A detailed summary will better explain your products to the audiences. Our users will see this in your dedicated product page.",
                                      "modules": {
                                        "toolbar": [
                                          ["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
                                        ]
                                      }
                                     }'>
                                </div>
                              </div>
                              <!-- End Quill -->
                            </div>
                          </div>
                          <!-- End Form Group -->
                        </div>
                      </div>
                      <!-- End Card -->

                      <div class="text-center mt-5">
                        <button type="button" class="btn btn-primary px-lg-5">Submit Your Project</button>
                      </div>
                    
                  
                    
                      <!-- CSS Implementing Plugins -->
                      <link rel="stylesheet" href="./node_modules/select2/dist/css/select2.min.css">
                      <link rel="stylesheet" href="./node_modules/quill/dist/quill.snow.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
                      <script src="./node_modules/select2/dist/js/select2.full.min.js"></script>
                      <script src="./assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>
                      <script src="./node_modules/dropzone/dist/min/dropzone.min.js"></script>
                      <script src="./node_modules/quill/dist/quill.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.select2.js"></script>
                      <script src="./assets/js/hs.dropzone.js"></script>
                      <script src="./assets/js/hs.quill.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FILE ATTACH
                          // =======================================================
                          $('.js-file-attach').each(function () {
                            var customFile = new HSFileAttach($(this)).init();
                          });


                          // INITIALIZATION OF SELECT2
                          // =======================================================
                          $('.js-custom-select').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });


                          // INITIALIZATION OF COUNT CHARACTERS
                          // =======================================================
                          $('.js-count-characters').each(function () {
                            new HSCountCharacters($(this)).init()
                          });


                          // INITIALIZATION OF DROPZONE FILE ATTACH MODULE
                          // =======================================================
                          $('.js-dropzone').each(function () {
                            var dropzone = $.HSCore.components.HSDropzone.init('#' + $(this).attr('id'));
                          });


                          // INITIALIZATION OF QUILLJS EDITOR
                          // =======================================================
                          $('.js-quill').each(function () {
                            $.HSCore.components.HSQuill.init(this);
                          });


                          // INITIALIZATION OF GO TO
                          // =======================================================
                          $('.js-go-to').each(function () {
                            var goTo = new HSGoTo($(this)).init();
                          });
                        });
                      </script>
                    
                  

Component #4

Autofill application
Save time by importing your resume.

Personal information

Add phone

Profile

Browse your files or drag' n' drop here

Details

Browse your files or drag' n' drop here
                    
                      <!-- Description Section -->
                      <div class="container space-2">
                        <div class="w-lg-75 mx-lg-auto">
                          <!-- Card -->
                          <div class="card card-bordered mb-10">
                            <div class="card-body">
                              <div class="row">
                                <div class="col-sm mb-2 mb-sm-0">
                                  <h5 class="text-cap mb-1">
                                    <i class="fas fa-bolt mr-1"></i> Autofill application
                                  </h5>
                                  <small>Save time by importing your resume.</small>
                                </div>

                                <div class="col-sm-auto">
                                  <!-- Unfold -->
                                  <div class="hs-unfold">
                                    <a class="js-hs-unfold-invoker btn btn-sm btn-primary" href="javascript:;"
                                       data-hs-unfold-options='{
                                         "target": "#importResumeFromDropdown",
                                         "type": "css-animation"
                                       }'>
                                      Import resume from <i class="fas fa-angle-down ml-1"></i>
                                    </a>

                                    <div id="importResumeFromDropdown" class="hs-unfold-content dropdown-unfold dropdown-menu mt-1">
                                      <a class="dropdown-item" href="#">
                                        <i class="fas fa-laptop dropdown-item-icon"></i> My Computer
                                      </a>
                                      <a class="dropdown-item" href="#">
                                        <i class="fab fa-dropbox dropdown-item-icon"></i> Dropbox
                                      </a>
                                      <a class="dropdown-item" href="#">
                                        <i class="fab fa-google-drive dropdown-item-icon"></i> Google Drive
                                      </a>
                                    </div>
                                  </div>
                                  <!-- End Unfold -->
                                </div>
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                          <!-- End Card -->

                          <form class="js-validate">
                            <div class="border-bottom mb-4">
                              <h3>Personal information</h3>
                            </div>

                            <div class="row">
                              <div class="col-sm-6">
                                <!-- Form Group -->
                                <div class="form-group">
                                  <label for="firstName" class="input-label">First name</label>
                                  <input type="text" class="form-control" name="firstName" id="firstName" placeholder="Nataly" aria-label="Nataly">
                                </div>
                                <!-- End Form Group -->
                              </div>

                              <div class="col-sm-6">
                                <!-- Form Group -->
                                <div class="form-group">
                                  <label for="lastName" class="input-label">Last name</label>
                                  <input type="text" class="form-control" name="lastName" id="lastName" placeholder="Gaga" aria-label="Gaga">
                                </div>
                                <!-- End Form Group -->
                              </div>
                            </div>
                            <!-- End Row -->

                            <!-- Form Group -->
                            <div class="form-group">
                              <label for="email" class="input-label">Email</label>
                              <input type="email" class="form-control" name="email" id="email" placeholder="nayagaga@pixeel.com" aria-label="alex@pixeel.com">
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div class="js-add-field form-group"
                                 data-hs-add-field-options='{
                                    "template": "#addPhoneFieldTemplate",
                                    "container": "#addPhoneFieldContainer",
                                    "defaultCreated": 0
                                  }'>
                              <label for="phoneLabel" class="input-label">Phone <span class="input-label-secondary">(Optional)</span></label>

                              <div class="input-group align-items-center">
                                <input type="text" class="js-masked-input form-control" name="phone" id="phoneLabel" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
                                       data-hs-mask-options='{
                                         "template": "+0(000)000-00-00"
                                       }'>

                                <div class="input-group-append">
                                  <!-- Select -->
                                  <select class="js-custom-select custom-select dropdown-toggle" name="phoneSelect"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select",
                                          "dropdownAutoWidth": true,
                                          "width": true
                                        }'>
                                    <option value="Mobile" selected>Mobile</option>
                                    <option value="Home">Home</option>
                                    <option value="Work">Work</option>
                                    <option value="Fax">Fax</option>
                                    <option value="Direct">Direct</option>
                                  </select>
                                  <!-- End Select -->
                                </div>
                              </div>

                              <!-- Container For Input Field -->
                              <div id="addPhoneFieldContainer"></div>

                              <a href="javascript:;" class="js-create-field form-link btn btn-xs btn-no-focus btn-ghost-primary">
                                <i class="fas fa-plus mr-1"></i>
                                Add phone
                              </a>
                            </div>
                            <!-- End Form Group -->

                            <!-- Add Phone Input Field -->
                            <div id="addPhoneFieldTemplate" style="display: none;">
                              <div class="input-group input-group-add-field">
                                <input type="text" class="js-masked-input form-control" data-name="additionlPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
                                       data-hs-mask-options='{
                                         "template": "+0(000)000-00-00"
                                       }'>

                                <div class="input-group-append">
                                  <!-- Select -->
                                  <select class="js-custom-select-dynamic btn btn-white dropdown-toggle"
                                        data-name="additionlPhoneSelect"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select",
                                          "dropdownAutoWidth": true,
                                          "width": true
                                        }'>
                                    <option value="Mobile" selected>Mobile</option>
                                    <option value="Home">Home</option>
                                    <option value="Work">Work</option>
                                    <option value="Fax">Fax</option>
                                    <option value="Direct">Direct</option>
                                  </select>
                                  <!-- End Select -->
                                </div>

                                <a class="js-delete-field input-group-add-field-delete" href="javascript:;">
                                  <i class="fas fa-times"></i>
                                </a>
                              </div>
                            </div>
                            <!-- End Add Phone Input Field -->

                            <div class="border-bottom mt-10 mb-4">
                              <h3>Profile</h3>
                            </div>

                            <!-- Form Group -->
                            <div class="form-group">
                              <label for="summary" class="input-label">Summary</label>

                              <textarea class="form-control" rows="6" name="summary" id="summary" placeholder="In a few words, tell us about yourself..." aria-label="In a few words, tell us about yourself..." required></textarea>
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div class="form-group">
                              <label class="input-label">Resume/CV and Cover Letter <i class="far fa-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="Maximum file size 10 MB."></i></label>

                              <div id="resumeAttach" class="js-dropzone dz-dropzone dz-dropzone-boxed">
                                <div class="dz-message p-2">
                                  <span class="d-block mb-1">Browse your files</span>
                                  <small class="d-block text-muted">or drag' n' drop here</small>
                                </div>
                              </div>
                            </div>
                            <!-- End Form Group -->

                            <div class="border-bottom mt-10 mb-4">
                              <h3>Details</h3>
                            </div>

                            <!-- Form Group -->
                            <div class="form-group">
                              <label class="input-label">Do you have the right to work in the UK?</label>

                              <!-- Button Group -->
                              <div class="btn-group btn-group-toggle btn-group-segment" data-toggle="buttons">
                                <label class="btn">
                                  <input type="radio" name="rightToWorkInUkLabelOptions" id="rightToWorkInUkLabelOption1"> <i class="fas fa-check mr-1"></i> Yes
                                </label>
                                <label class="btn">
                                  <input type="radio" name="rightToWorkInUkLabelOptions" id="rightToWorkInUkLabelOption2"> <i class="fas fa-times mr-1"></i> No
                                </label>
                              </div>
                              <!-- End Button Group -->
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div class="form-group">
                              <label for="noticePeriod" class="input-label">Notice Period</label>
                              <input type="text" class="form-control" name="noticePeriod" id="noticePeriod" placeholder="2 months" aria-label="2 months">
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div class="form-group">
                              <label class="input-label">Upload your portfolio <i class="far fa-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="Maximum file size 10 MB."></i></label>

                              <div id="portfolioAttach" class="js-dropzone dz-dropzone dz-dropzone-boxed">
                                <div class="dz-message p-2">
                                  <span class="d-block mb-1">Browse your files</span>
                                  <small class="d-block text-muted">or drag' n' drop here</small>
                                </div>
                              </div>
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div class="form-group">
                              <label for="expectedSalary" class="input-label">Expected salary</label>
                              <input type="text" class="form-control" name="expectedSalary" id="expectedSalary" placeholder="2 months" aria-label="2 months">
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div class="form-group">
                              <label class="input-label">Do you have experience designing for mobile?</label>

                              <!-- Button Group -->
                              <div class="btn-group btn-group-toggle btn-group-segment" data-toggle="buttons">
                                <label class="btn">
                                  <input type="radio" name="experienceInSimilaryAreaOptions" id="experienceInSimilaryAreaOption1"> <i class="fas fa-check mr-1"></i> Yes
                                </label>
                                <label class="btn">
                                  <input type="radio" name="experienceInSimilaryAreaOptions" id="experienceInSimilaryAreaOption2"> <i class="fas fa-times mr-1"></i> No
                                </label>
                              </div>
                              <!-- End Button Group -->
                            </div>
                            <!-- End Form Group -->

                            <div class="mt-7">
                              <button type="submit" class="btn btn-block btn-primary">Submit application</button>
                            </div>
                          </form>
                        </div>
                      </div>
                      <!-- Description Section -->
                    
                  
                    
                      <!-- CSS Implementing Plugins -->
                      <link rel="stylesheet" href="./node_modules/select2/dist/css/select2.min.css">
                      <link rel="stylesheet" href="./node_modules/quill/dist/quill.snow.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
                      <script src="./assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
                      <script src="./node_modules/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
                      <script src="./node_modules/select2/dist/js/select2.full.min.js"></script>
                      <script src="./node_modules/quill/dist/quill.min.js"></script>
                      <script src="./node_modules/dropzone/dist/min/dropzone.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.mask.js"></script>
                      <script src="./assets/js/hs.select2.js"></script>
                      <script src="./assets/js/hs.quill.js"></script>
                      <script src="./assets/js/hs.dropzone.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF UNFOLD
                          // =======================================================
                          var unfold = new HSUnfold('.js-hs-unfold-invoker').init();


                          // INITIALIZATION OF MASKED INPUT
                          // =======================================================
                          $('.js-masked-input').each(function () {
                            var mask = $.HSCore.components.HSMask.init($(this));
                          });


                          // INITIALIZATION OF ADD INPUT FILED
                          // =======================================================
                          $('.js-add-field').each(function () {
                            new HSAddField($(this), {
                              addedField: () => {
                                $('.js-add-field .js-custom-select-dynamic').each(function () {
                                  var select2dynamic = $.HSCore.components.HSSelect2.init($(this));
                                });
                              }
                            }).init();
                          });


                          // INITIALIZATION OF SELECT2
                          // =======================================================
                          $('.js-custom-select').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });


                          // INITIALIZATION OF QUILLJS EDITOR
                          // =======================================================
                          var quill = $.HSCore.components.HSQuill.init('.js-quill');


                          // INITIALIZATION OF DROPZONE FILE ATTACH MODULE
                          // =======================================================
                          $('.js-dropzone').each(function () {
                            var dropzone = $.HSCore.components.HSDropzone.init('#' + $(this).attr('id'));
                          });
                        });
                      </script>