Form - Directory
Component #1
<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
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.
<!-- 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>