Forms: Directory
Component #1
Submit App
Submit your products today and get more exposure.
<!-- Form Card -->
<div class="container content-space-2 content-space-lg-3">
<div class="w-lg-75 mx-lg-auto">
<!-- Heading -->
<div class="text-center mb-7">
<h1 class="card-title">Submit App</h1>
<p class="card-text">Submit your products today and get more exposure.</p>
</div>
<!-- End Heading -->
<!-- Card -->
<div class="card card-bordered shadow-none">
<div class="card-body">
<!-- Form -->
<form>
<!-- Form -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label form-label">Product logo</label>
<div class="col-sm-9">
<!-- Media -->
<div class="d-flex align-items-center">
<!-- Avatar -->
<label class="avatar avatar-xl avatar-circle" for="avatarUploader">
<img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
</label>
<div class="d-grid d-sm-flex gap-2 ms-4">
<div class="btn btn-primary btn-sm form-attachment-btn">Upload Logo
<input type="file" class="js-file-attach form-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/img2.jpg",
"allowTypes": [".png", ".jpeg", ".jpg"]
}'>
</div>
<!-- End Avatar -->
<button type="button" class="js-file-attach-reset-img btn btn-white btn-sm">Delete</button>
</div>
</div>
<!-- End Media -->
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="submitAppProjectName" class="col-sm-3 col-form-label">Project name</label>
<div class="col-sm-9">
<input type="password" class="form-control form-control-lg" id="submitAppProjectName" placeholder="project name" aria-label="project name">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="submitAppWebsite" class="col-sm-3 col-form-label form-label">App website</label>
<div class="col-sm-9">
<input type="password" class="form-control form-control-lg" id="submitAppWebsite" placeholder="https://example.com" aria-label="https://example.com">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label form-label">Preview image</label>
<div class="col-sm-9">
<!-- File Attachment Input -->
<div id="dropzoneUpload" class="js-dropzone dz-dropzone dz-dropzone-card">
<div class="dz-message">
<img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="Image Description">
<span class="d-block">Browse your device and upload images</span>
<span class="d-block text-muted small">Maximum file size is 2MB</span>
</div>
</div>
<!-- End File Attachment Input -->
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-3">
<label for="submitAppCategoryLabel" class="col-sm-3 col-form-label form-label">Category</label>
<div class="col-sm-9">
<!-- Select -->
<select class="form-select form-select-lg" id="submitAppCategoryLabel">
<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 -->
<!-- Form-->
<div class="row mb-3">
<label for="shortDescriptionLabel" class="col-sm-3 col-form-label form-label">Short description</label>
<div class="col-sm-9">
<div class="d-flex justify-content-end">
<span id="maxLengthShortDescriptionCountCharacters" class="form-label-secondary"></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 -->
<!-- Form-->
<div class="row mb-3">
<label class="col-sm-3 col-form-label form-label">Detailed description</label>
<div class="col-sm-9">
<!-- Quill -->
<div class="quill-custom">
<div class="js-quill" style="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-->
<div class="text-center mt-5">
<button type="submit" class="btn btn-primary btn-lg">Submit your project</button>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Form Card -->
<link rel="stylesheet" href="../assets/vendor/quill/dist/quill.snow.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
<script src="../assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>
<script src="../assets/vendor/quill/dist/quill.min.js"></script>
<script src="../assets/vendor/dropzone/dist/min/dropzone.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF FILE ATTACH
// =======================================================
new HSFileAttach('.js-file-attach')
// INITIALIZATION OF COUNT CHARACTERS
// =======================================================
new HSCountCharacters('.js-count-characters')
// INITIALIZATION OF QUILLJS EDITOR
// =======================================================
HSCore.components.HSQuill.init('.js-quill')
// INITIALIZATION OF DROPZONE
// =======================================================
HSCore.components.HSDropzone.init('.js-dropzone')
})()
</script>
Component #2
Real estate listing upload form
Please proofread your submission carefully before submitting.
Submissions which exceed maximum word counts will be edited.
<!-- Form -->
<div class="container content-space-2 content-space-lg-3">
<div class="w-lg-75 mx-lg-auto">
<!-- Heading -->
<div class="text-center mb-2">
<h1 class="h2">Real estate listing upload form</h1>
<p class="mb-0">Please proofread your submission carefully before submitting.</p>
<p>Submissions which exceed maximum word counts will be edited.</p>
</div>
<!-- End Heading -->
<form>
<div class="mb-5">
<h4 class="my-7">Listing agent information</h4>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="listingAgentNameUploadForm">Listing agent name</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-person-fill"></i>
</span>
<input type="text" class="form-control form-control-lg" id="listingAgentNameUploadForm" placeholder="Listing agent name" aria-label="Listing agent name">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="phoneNumberUploadForm">Phone number</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-telephone-inbound-fill"></i>
</span>
<input type="text" class="form-control form-control-lg" id="phoneNumberUploadForm" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="realEstateAgencyUploadForm">Real estate agency</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-briefcase-fill"></i>
</span>
<input type="text" class="form-control form-control-lg" id="realEstateAgencyUploadForm" placeholder="Real estate agency" aria-label="Real estate agency">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="websiteAddressUploadForm">Website address</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-globe2"></i>
</span>
<input type="text" class="form-control form-control-lg" id="websiteAddressUploadForm" placeholder="Website address" aria-label="Website address">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<h4 class="my-7">Type of listing</h4>
<div class="row gx-3">
<div class="col-6 col-md-3 mb-3">
<!-- Radio Check -->
<div class="form-check form-check-card text-center">
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing1">
<label class="form-check-label" for="typeOfListing1">
<img class="w-50 mb-3" src="../assets/svg/illustrations/small-house.svg" alt="SVG">
<span class="d-block">House</span>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
<div class="col-6 col-md-3 mb-3">
<!-- Radio Check -->
<div class="form-check form-check-card text-center">
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing2" checked>
<label class="form-check-label" for="typeOfListing2">
<img class="w-50 mb-3" src="../assets/svg/illustrations/flat-house.svg" alt="SVG">
<span class="d-block">Flat</span>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
<div class="col-6 col-md-3 mb-3">
<!-- Radio Check -->
<div class="form-check form-check-card text-center">
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing3">
<label class="form-check-label" for="typeOfListing3">
<img class="w-50 mb-3" src="../assets/svg/illustrations/multi-family-house.svg" alt="SVG">
<span class="d-block">Multi-family</span>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
<div class="col-6 col-md-3 mb-3">
<!-- Radio Check -->
<div class="form-check form-check-card text-center">
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing4">
<label class="form-check-label" for="typeOfListing4">
<img class="w-50 mb-3" src="../assets/svg/illustrations/farm-land.svg" alt="SVG">
<span class="d-block">Farms/Land</span>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<h4 class="my-7">Listing information</h4>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="currencyUploadForm">Price</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 288 512"><path d="M209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5 6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3 0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5 24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7 21.5-61.6-14.6-124.8-72.5-141.7z"/></svg>
</span>
</span>
<input type="text" class="form-control form-control-lg" id="currencyUploadForm" placeholder="Price" aria-label="Price">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<label class="form-label" for="yearBuiltUploadForm">Year built</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-calendar-week"></i>
</span>
<select id="yearBuiltUploadForm" class="form-select form-select-lg">
<option selected disabled>Select 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 Col -->
</div>
<!-- End Row -->
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="addressUploadForm">Address</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-geo-alt-fill"></i>
</span>
<input type="text" class="form-control form-control-lg" id="addressUploadForm" placeholder="Address" aria-label="Address">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="cityUploadForm">City/Province</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-building"></i>
</span>
<input type="text" class="form-control form-control-lg" id="cityUploadForm" placeholder="City/Province" aria-label="City/Province">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="lotSizeUploadForm">Lot size</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-rulers"></i>
</span>
<input type="text" class="form-control form-control-lg" id="lotSizeUploadForm" placeholder="Lot size" aria-label="Lot size">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="postalCodeUploadForm">Postal code</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-envelope-open-fill"></i>
</span>
<input type="text" class="form-control form-control-lg" id="postalCodeUploadForm" placeholder="Postal code" aria-label="Postal code">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="bedroomUploadForm">Bedroom</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
</span>
</span>
<select id="bedroomUploadForm" class="form-select form-select-lg">
<option selected disabled>Select amount</option>
<option value="bedroom1">1</option>
<option value="bedroom2">2</option>
<option value="bedroom3">3</option>
<option value="bedroom4">4</option>
<option value="bedroom5plus">5+</option>
</select>
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="BathroomUploadForm">Bathroom</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
</span>
</span>
<select id="BathroomUploadForm" class="form-select form-select-lg">
<option selected disabled>Select amount</option>
<option value="bathroom1">1</option>
<option value="bathroom2">2</option>
<option value="bathroom3">3</option>
<option value="bathroom4">4</option>
<option value="bathroom5plus">5+</option>
</select>
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-4">
<label class="form-label">Listing description</label>
<!-- Quill -->
<div class="quill-custom">
<div class="js-quill" style="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 Form -->
<h4 class="my-7">Estimated running costs</h4>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="mortgageUploadForm">Mortgage</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 576 512"><path d="M271.06,144.3l54.27,14.3a8.59,8.59,0,0,1,6.63,8.1c0,4.6-4.09,8.4-9.12,8.4h-35.6a30,30,0,0,1-11.19-2.2c-5.24-2.2-11.28-1.7-15.3,2l-19,17.5a11.68,11.68,0,0,0-2.25,2.66,11.42,11.42,0,0,0,3.88,15.74,83.77,83.77,0,0,0,34.51,11.5V240c0,8.8,7.83,16,17.37,16h17.37c9.55,0,17.38-7.2,17.38-16V222.4c32.93-3.6,57.84-31,53.5-63-3.15-23-22.46-41.3-46.56-47.7L282.68,97.4a8.59,8.59,0,0,1-6.63-8.1c0-4.6,4.09-8.4,9.12-8.4h35.6A30,30,0,0,1,332,83.1c5.23,2.2,11.28,1.7,15.3-2l19-17.5A11.31,11.31,0,0,0,368.47,61a11.43,11.43,0,0,0-3.84-15.78,83.82,83.82,0,0,0-34.52-11.5V16c0-8.8-7.82-16-17.37-16H295.37C285.82,0,278,7.2,278,16V33.6c-32.89,3.6-57.85,31-53.51,63C227.63,119.6,247,137.9,271.06,144.3ZM565.27,328.1c-11.8-10.7-30.2-10-42.6,0L430.27,402a63.64,63.64,0,0,1-40,14H272a16,16,0,0,1,0-32h78.29c15.9,0,30.71-10.9,33.25-26.6a31.2,31.2,0,0,0,.46-5.46A32,32,0,0,0,352,320H192a117.66,117.66,0,0,0-74.1,26.29L71.4,384H16A16,16,0,0,0,0,400v96a16,16,0,0,0,16,16H372.77a64,64,0,0,0,40-14L564,377a32,32,0,0,0,1.28-48.9Z"/></svg>
</span>
</span>
<input type="text" class="form-control form-control-lg" id="mortgageUploadForm" placeholder="Mortgage" aria-label="Mortgage">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="energyUploadForm">Energy</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 384 512"><path d="M192 0C79.7 101.3 0 220.9 0 300.5 0 425 79 512 192 512s192-87 192-211.5c0-79.9-80.2-199.6-192-300.5zm0 448c-56.5 0-96-39-96-94.8 0-13.5 4.6-61.5 96-161.2 91.4 99.7 96 147.7 96 161.2 0 55.8-39.5 94.8-96 94.8z"/></svg>
</span>
</span>
<input type="text" class="form-control form-control-lg" id="energyUploadForm" placeholder="Energy" aria-label="Energy">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="waterUploadForm">Water</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
<i class="bi-droplet-half"></i>
</span>
</span>
<input type="text" class="form-control form-control-lg" id="waterUploadForm" placeholder="Mortgage" aria-label="Mortgage">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="homeInsuranceUploadForm">Home insurance</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-shield-shaded"></i>
</span>
<input type="text" class="form-control form-control-lg" id="homeInsuranceUploadForm" placeholder="Home insurance" aria-label="Home insurance">
</div>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<h4 class="my-7">Upload images</h4>
<div class="row">
<div class="col-lg-6 mb-3">
<label class="form-label">Property media</label>
<!-- File Attachment Input -->
<div id="imageDropzone" class="js-dropzone dz-dropzone dz-dropzone-card">
<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>
<span class="d-block text-muted small">Maximum file size is 2MB</span>
</div>
</div>
<!-- End File Attachment Input -->
</div>
<div class="col-lg-6 mb-3">
<label class="form-label">Floorplan</label>
<!-- File Attachment Input -->
<div id="floorplanDropzone" class="js-dropzone dz-dropzone dz-dropzone-card">
<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>
<span class="d-block text-muted small">Maximum file size is 1MB</span>
</div>
</div>
<!-- End File Attachment Input -->
</div>
</div>
</div>
<!-- End Row -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
</div>
</div>
<!-- End Form -->
<link rel="stylesheet" href="../assets/vendor/quill/dist/quill.snow.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
<script src="../assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>
<script src="../assets/vendor/quill/dist/quill.min.js"></script>
<script src="../assets/vendor/dropzone/dist/min/dropzone.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF FILE ATTACH
// =======================================================
new HSFileAttach('.js-file-attach')
// INITIALIZATION OF COUNT CHARACTERS
// =======================================================
new HSCountCharacters('.js-count-characters')
// INITIALIZATION OF QUILLJS EDITOR
// =======================================================
HSCore.components.HSQuill.init('.js-quill')
// INITIALIZATION OF DROPZONE
// =======================================================
HSCore.components.HSDropzone.init('.js-dropzone')
})()
</script>
Component #3
Billing address
<!-- Content -->
<div class="container content-space-1 content-space-lg-2">
<h4 class="mb-3">Billing address</h4>
<!-- Form -->
<form class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-sm-6">
<label for="firstNameShopCheckout" class="form-label">First name</label>
<input type="text" class="form-control form-control-lg" id="firstNameShopCheckout" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<!-- End Col -->
<div class="col-sm-6">
<label for="lastNameShopCheckout" class="form-label">Last name</label>
<input type="text" class="form-control form-control-lg" id="lastNameShopCheckout" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
<!-- End Col -->
<div class="col-12">
<label for="emailShopCheckout" class="form-label">Email</label>
<input type="email" class="form-control form-control-lg" id="emailShopCheckout" placeholder="you@example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<!-- End Col -->
<div class="col-12">
<label for="addressShopCheckout" class="form-label">Address</label>
<input type="text" class="form-control form-control-lg" id="addressShopCheckout" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<!-- End Col -->
<div class="col-12">
<label for="address2ShopCheckout" class="form-label">Address 2 <span class="form-label-secondary">(Optional)</span></label>
<input type="text" class="form-control form-control-lg" id="address2ShopCheckout" placeholder="Apartment or suite">
</div>
<!-- End Col -->
<div class="col-md-5">
<label for="countryShopCheckout" class="form-label">Country</label>
<!-- Select -->
<select class="form-select" id="countryShopCheckout" required>
<option value="">Choose...</option>
<option value="">Select country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<!-- End Select -->
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<!-- End Col -->
<div class="col-md-4">
<label for="stateShopCheckout" class="form-label">State</label>
<!-- Select -->
<select class="form-select" id="stateShopCheckout" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<!-- End Select -->
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<!-- End Col -->
<div class="col-md-3">
<label for="zipShopCheckout" class="form-label">Zip</label>
<input type="text" class="form-control form-control-lg" id="zipShopCheckout" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
<!-- End Col -->
</div>
<hr class="my-4">
<div class="d-grid gap-2">
<!-- Check -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="sameAddressShopCheckout">
<label class="form-check-label" for="sameAddressShopCheckout">Shipping address is the same as my billing address</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="saveInfoShopCheckout">
<label class="form-check-label" for="saveInfoShopCheckout">Save this information for next time</label>
</div>
<!-- End Check -->
</div>
<hr class="my-4">
<h4 class="mb-3">Payment</h4>
<div class="my-3">
<!-- Check -->
<div class="form-check">
<input id="creditShopCheckout" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="creditShopCheckout">Credit card</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check">
<input id="debitShopCheckout" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debitShopCheckout">Debit card</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check">
<input id="paypalShopCheckout" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypalShopCheckout">PayPal</label>
</div>
<!-- End Check -->
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="ccNameShopCheckout" class="form-label">Name on card</label>
<input type="text" class="form-control form-control-lg" id="ccNameShopCheckout" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<!-- End Col -->
<div class="col-md-6">
<label for="ccNumberShopCheckout" class="form-label">Credit card number</label>
<input type="text" class="form-control form-control-lg" id="ccNumberShopCheckout" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
<!-- End Col -->
<div class="col-md-3">
<label for="ccExpirationShopCheckout" class="form-label">Expiration</label>
<input type="text" class="form-control form-control-lg" id="ccExpirationShopCheckout" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<!-- End Col -->
<div class="col-md-3">
<label for="ccCvvShopCheckout" class="form-label">CVV</label>
<input type="text" class="form-control form-control-lg" id="ccCvvShopCheckout" placeholder="" required>
<div class="invalid-feedback">
Security code required
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<hr class="my-4">
<div class="row align-items-center">
<div class="col-sm-6 order-sm-1 mb-3 mb-sm-0">
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Place order</button>
</div>
</div>
<!-- End Col -->
<div class="col-sm text-center text-sm-start">
<a class="link" href="../demo-shop/cart.html">
<i class="bi-chevron-left small ms-1"></i> Return to cart
</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</form>
<!-- End Form -->
</div>
<!-- End Content -->