Form Layouts - Contact Forms
Front's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.
Contacts #1
<!-- Contacts Form -->
<form class="js-validate">
<div class="row">
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label class="form-label">
Your name
<span class="text-danger">*</span>
</label>
<input type="text" class="form-control" name="name" placeholder="Jack Wayley" aria-label="Jack Wayley" required
data-msg="Please enter your name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label class="form-label">
Your email address
<span class="text-danger">*</span>
</label>
<input type="email" class="form-control" name="email" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<div class="w-100"></div>
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label class="form-label">
Subject
<span class="text-danger">*</span>
</label>
<input type="text" class="form-control" name="subject" placeholder="Web design" aria-label="Web design" required
data-msg="Please enter a subject."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label class="form-label">
Your Phone Number
<span class="text-danger">*</span>
</label>
<input type="number" class="form-control" name="phone" placeholder="1-800-643-4500" aria-label="1-800-643-4500" required
data-msg="Please enter a valid phone number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
How can we help you?
<span class="text-danger">*</span>
</label>
<div class="input-group">
<textarea class="form-control" rows="4" name="text" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
data-msg="Please enter a reason."
data-error-class="u-has-error"
data-success-class="u-has-success"></textarea>
</div>
</div>
<!-- End Input -->
<div class="text-center">
<button type="submit" class="btn btn-primary btn-wide transition-3d-hover mb-4">Submit</button>
<p class="small">We'll get back to you in 1-2 business days.</p>
</div>
</form>
<!-- End Contacts Form -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
});
</script>
Contacts #2
Ask me for more information
<!-- Contact Form -->
<div class="card shadow-sm p-4">
<!-- Header -->
<div class="media align-items-center mb-4">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Ask me for more information</h4>
</div>
</div>
<!-- End Header -->
<!-- Form -->
<form>
<select class="custom-select custom-select-sm mb-2">
<option selected>Tell me more about this property</option>
<option value="aboutProperty1">Request a showing</option>
<option value="aboutProperty2">Request neighborhood information</option>
<option value="aboutProperty3">Request recent area sales</option>
</select>
<div class="mb-2">
<label class="sr-only" for="firstNameSr">First Name</label>
<input type="text" class="form-control form-control-sm" name="text" id="firstNameSr" placeholder="First Name" aria-label="First Name">
</div>
<div class="mb-2">
<label class="sr-only" for="lastNameSr">Last Name</label>
<input type="text" class="form-control form-control-sm" name="text" id="lastNameSr" placeholder="Last Name" aria-label="Last Name">
</div>
<div class="mb-2">
<label class="sr-only" for="emailSr">Email</label>
<input type="email" class="form-control form-control-sm" name="text" id="emailSr" placeholder="Email" aria-label="Email">
</div>
<div class="mb-2">
<label class="sr-only" for="phoneNumberSr">Phone number</label>
<input type="tel" class="form-control form-control-sm" name="tel" id="phoneNumberSr" placeholder="Phone number" aria-label="Phone number">
</div>
<div class="mb-2">
<label class="sr-only" for="propertyQuestionSr">Property question</label>
<textarea class="form-control form-control-sm" rows="4" name="answer" id="propertyQuestionSr" placeholder="I would like more information about ..." aria-label="I would like more information about ..."></textarea>
</div>
<button type="button" class="btn btn-block btn-sm btn-primary btn-wide transition-3d-hover">Submit</button>
</form>
<!-- End Form -->
</div>
<!-- End Contact Form -->
Contacts #3
You'll hear from us within 1-2 business days.
<!-- SVG Top Shape -->
<figure>
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="64px"
viewBox="0 0 1921 273" style="margin-bottom: -8px; enable-background:new 0 0 1921 273;" xml:space="preserve">
<polygon class="fill-gray-100" points="0,273 1921,273 1921,0 "/>
</svg>
</figure>
<!-- End SVG Top Shape -->
<!-- Contacts Section -->
<div class="bg-light position-relative">
<div class="container space-bottom-2">
<div class="row justify-content-center mb-5">
<div class="col-md-1 d-none d-md-inline-block">
<!-- Illustration -->
<figure id="contactSVGillustration1" class="svg-preloader position-absolute bottom-0 left-0 w-100">
<img class="js-svg-injector" src="../../assets/svg/illustrations/flowers.svg" alt="Image Description"
data-parent="#contactSVGillustration1">
</figure>
<!-- End Illustration -->
</div>
<div class="col-md-10 col-lg-7 mt-n11">
<!-- Contact Form -->
<form class="js-validate card shadow-sm p-5">
<div class="text-center mb-4">
<h3 class="h4">Drop us a message</h3>
<p>Find the right solution.</p>
</div>
<div class="row mx-gutters-2">
<div class="col-md-6 mb-3">
<!-- Input -->
<label class="sr-only">First name</label>
<div class="js-form-message">
<div class="input-group">
<input type="text" class="form-control" name="firstName" placeholder="First name" aria-label="First name" required
data-msg="Please enter your first name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-3">
<!-- Input -->
<label class="sr-only">Last name</label>
<div class="js-form-message">
<div class="input-group">
<input type="text" class="form-control" name="lasstName" placeholder="Last name" aria-label="Last name" required
data-msg="Please enter your last name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="w-100"></div>
<div class="col-md-6 mb-3">
<!-- Input -->
<label class="sr-only">Country</label>
<div class="js-form-message">
<div class="input-group">
<select class="form-control custom-select text-muted" required
data-msg="Please select country."
data-error-class="u-has-error"
data-success-class="u-has-success">
<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>
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-3">
<!-- Input -->
<label class="sr-only">Email address</label>
<div class="js-form-message">
<div class="input-group">
<input type="text" class="form-control" name="email" placeholder="Email address" aria-label="Email address" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="w-100"></div>
<div class="col-md-6 mb-3">
<!-- Input -->
<label class="sr-only">Company</label>
<div class="js-form-message">
<div class="input-group">
<input type="text" class="form-control" name="company" placeholder="Company" aria-label="Company" required
data-msg="Please enter company name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-3">
<!-- Input -->
<label class="sr-only">Job title</label>
<div class="js-form-message">
<div class="input-group">
<input type="text" class="form-control" name="jobTitle" placeholder="Job title" aria-label="Job title" required
data-msg="Please enter a job title."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
</div>
<!-- Input -->
<div class="mb-5">
<label class="sr-only">How can we help you?</label>
<div class="js-form-message input-group">
<textarea class="form-control" rows="4" name="description" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
data-msg="Please enter a reason."
data-error-class="u-has-error"
data-success-class="u-has-success"></textarea>
</div>
</div>
<!-- End Input -->
<!-- Checkbox -->
<div class="js-form-message mb-3">
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input type="checkbox" class="custom-control-input" id="termsCheckbox" name="termsCheckbox" required
data-msg="Please accept our Terms and Conditions."
data-error-class="u-has-error"
data-success-class="u-has-success">
<label class="custom-control-label" for="termsCheckbox">
<small>
I agree to the
<a class="link-muted" href="../pages/terms.html">Terms and Conditions</a>
</small>
</label>
</div>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="js-form-message mb-5">
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input type="checkbox" class="custom-control-input" id="newsletterCheckbox" name="newsletterCheckbox" required
data-msg="Please accept our Terms and Conditions."
data-error-class="u-has-error"
data-success-class="u-has-success">
<label class="custom-control-label" for="newsletterCheckbox">
<small>I want to receive Front's Newsletters</small>
</label>
</div>
</div>
<!-- End Checkbox -->
<button type="submit" class="btn btn-primary transition-3d-hover">Submit</button>
</form>
<!-- End Contact Form -->
</div>
<div class="col-md-1 d-none d-md-inline-block">
<!-- Illustration -->
<figure id="contactSVGillustration2" class="svg-preloader ie-chatting-man position-absolute bottom-0 left-0 w-100">
<img class="js-svg-injector" src="../../assets/svg/illustrations/chatting-man.svg" alt="Image Description"
data-parent="#contactSVGillustration2">
</figure>
<!-- End Illustration -->
</div>
</div>
<div class="text-center">
<p class="small">You'll hear from us within 1-2 business days.</p>
</div>
</div>
</div>
<!-- End Contacts Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.components.HSFocusState.init();
});
</script>
<!-- JS Plugins Init. -->
<script>
$(document).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Contacts #4
Contact us
We collaborate with ambitious brands and people. Let's chat.
<!-- Contacts Section -->
<div class="bg-primary bg-img-hero" style="background-image: url(../../assets/svg/components/abstract-shapes-15.svg);">
<div class="container space-top-2 space-top-lg-3 space-bottom-1">
<!-- Title -->
<div class="w-lg-50 text-center text-white mx-lg-auto mb-7">
<span class="d-block text-white font-size-1 font-weight-semi-bold text-uppercase mb-3">Contact us</span>
<h2 class="h4 font-weight-normal text-lh-md">We collaborate with ambitious brands and people. <strong class="text-warning">Let's chat.</strong></h2>
</div>
<!-- End Title -->
<div class="position-relative w-lg-50 z-index-2 mx-lg-auto">
<!-- Form -->
<form class="js-validate card shadow p-5 p-lg-7">
<div class="js-form-message form-group mb-4">
<label for="inputName" class="form-label">Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" name="name" id="inputName" placeholder="Alex Hecker" aria-label="Alex Hecker" required
data-msg="Please enter your name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<div class="form-group mb-4">
<label for="inputCompanyName" class="form-label">Company name</label>
<input type="text" class="form-control" name="companyName" id="inputCompanyName" placeholder="Pixeel Ltd." aria-label="Pixeel Ltd.">
</div>
<div class="js-form-message form-group mb-4">
<label for="emailAddress" class="form-label">Email address <span class="text-danger">*</span></label>
<input type="email" class="form-control" name="emailAddress" id="emailAddress" placeholder="alexhecker@pixeel.com" aria-label="alexhecker@pixeel.com" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<div class="js-form-message form-group mb-4">
<label for="descriptionTextarea" class="form-label">Tell us more <span class="text-danger">*</span></label>
<textarea class="form-control" rows="3" id="descriptionTextarea" placeholder="Hi there, I would like to ..." required
data-msg="Please enter your message."
data-error-class="u-has-error"
data-success-class="u-has-success"></textarea>
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary btn-wide transition-3d-hover">Submit</button>
</div>
</form>
<!-- End Form -->
</div>
</div>
</div>
<!-- End Contacts Section -->
<!-- SVG Shape -->
<figure class="w-100 position-absolute right-0 bottom-0 left-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 323" enable-background="new 0 0 1920 323" xml:space="preserve" style="margin-bottom: -8px;">
<polygon class="fill-white" points="0,323 1920,323 1920,0 "/>
</svg>
</figure>
<!-- End SVG Shape -->
Hire us #1
<!-- Hire Us Form -->
<form class="js-validate w-lg-50 mx-auto">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Your name
<span class="text-danger">*</span>
</label>
<input type="text" class="form-control" name="firstName" placeholder="Jack Wayley" aria-label="Jack Wayley" required
data-msg="Please enter your frist name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Your email address
<span class="text-danger">*</span>
</label>
<input type="email" class="form-control" name="emailAddress" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
What is your timeline for this project?
<span class="text-danger">*</span>
</label>
<input type="text" class="form-control" name="timeline" placeholder="1 month" aria-label="1 month" required
data-msg="Please enter a valid date."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-focus-state mb-6">
<label class="form-label">Your website URL</label>
<input type="text" class="form-control" placeholder="https://www.jackwayley.com" aria-label="https://www.jackwayley.com">
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-focus-state mb-6">
<label class="form-label">Your company name</label>
<input type="text" class="form-control" placeholder="JackWayley Inc." aria-label="JackWayley Inc.">
</div>
<!-- End Input -->
<!-- Platform -->
<div class="mb-6">
<label class="form-label">
Choose your platform
<span class="text-danger">*</span>
</label>
<!-- Button Group -->
<div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-outline-secondary btn-custom-toggle-primary flex-fill">
<input type="checkbox" name="options" id="option1">
Shopify
</label>
<label class="btn btn-outline-secondary btn-custom-toggle-primary flex-fill">
<input type="checkbox" name="options" id="option2">
Web
</label>
<label class="btn btn-outline-secondary btn-custom-toggle-primary flex-fill">
<input type="checkbox" name="options" id="option3">
Other
</label>
</div>
<!-- End Button Group -->
</div>
<!-- End Platform -->
<!-- Budget Custom Select -->
<div class="mb-6">
<label class="form-label">
Tell us about your budget
<span class="text-danger">*</span>
</label>
<div class="js-focus-state">
<select class="form-control custom-select" required
data-msg="Please select your budget."
data-error-class="u-has-error"
data-success-class="u-has-success">
<option selected>$20,000 to $50,000</option>
<option value="budget1">$20,000 to $50,000</option>
<option value="budget2">$100,000 to $200,000</option>
<option value="budget3">$200,000+</option>
</select>
</div>
</div>
<!-- End Budget Custom Select -->
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Tell us about your project
<span class="text-danger">*</span>
</label>
<textarea class="form-control" rows="4" name="answer" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
data-msg="Please enter a reason."
data-error-class="u-has-error"
data-success-class="u-has-success"></textarea>
</div>
<!-- End Input -->
<div class="text-center">
<div class="mb-2">
<button type="submit" class="btn btn-primary transition-3d-hover">Let's Start Working Together</button>
</div>
<p class="small">We'll get back to you in 1-2 business days.</p>
</div>
</form>
<!-- End Hire Us Form -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
});
</script>
Apply form #1
Join Front
Apply for this Job
<!-- Apply For Job Section -->
<div id="applyForJob" class="container space-2">
<div class="card shadow-sm py-10 px-7">
<!-- Title -->
<div class="text-center mb-7">
<span class="btn btn-xs btn-soft-success btn-pill mb-2">Join Front</span>
<h2 class="h3 font-weight-normal">Apply for this Job</h2>
</div>
<!-- End Title -->
<!-- Apply Form -->
<form class="js-validate">
<div class="row">
<div class="col-md-6 mb-5">
<!-- Input -->
<div class="js-form-message">
<label class="form-label" for="fullNameLabel">Full name <span class="text-danger">*</span></label>
<div class="input-group">
<input type="text" class="form-control" name="firstName" id="fullNameLabel" placeholder="First Name" aria-label="First Name" required
data-msg="Please enter your frist name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-5">
<!-- Input -->
<div class="js-form-message">
<label class="form-label" for="lastNameLabel">Last name <span class="text-danger">*</span></label>
<div class="input-group">
<input type="text" class="form-control" name="lastName" id="lastNameLabel" placeholder="Last Name" aria-label="Last Name" required
data-msg="Please enter your last name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-5">
<!-- Input -->
<div class="js-form-message">
<label class="form-label" for="emailAddressLabel">Email <span class="text-danger">*</span></label>
<div class="input-group">
<input type="email" class="form-control" name="emailAddress" id="emailAddressLabel" placeholder="Email" aria-label="Email" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-5">
<!-- Input -->
<div class="js-form-message">
<label class="form-label" for="urlLabel">URL</label>
<div class="input-group">
<input type="text" class="form-control" name="URL" id="urlLabel" placeholder="Linkedin" aria-label="Linkedin">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-5">
<!-- Input -->
<div class="js-form-message">
<label class="form-label">Resume/CV</label>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="resumeLabel">
<label class="custom-file-label" data-browse="Browse" for="resumeLabel">Choose file</label>
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-5">
<!-- Input -->
<div class="js-form-message">
<label class="form-label">Cover letter</label>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="coverLetterLabel">
<label class="custom-file-label" data-browse="Browse" for="coverLetterLabel">Choose file</label>
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-12 mb-5">
<!-- Input -->
<div class="js-form-message">
<label class="form-label">In a few words... <span class="text-danger">*</span></label>
<div class="input-group">
<textarea class="form-control" rows="6" name="answer" placeholder="How'd you hear about Front?" aria-label="How'd you hear about Front?" required
data-msg="Please enter an answer."
data-error-class="u-has-error"
data-success-class="u-has-success"></textarea>
</div>
</div>
<!-- End Input -->
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary transition-3d-hover">Submit Application</button>
</div>
</form>
<!-- End Apply Form -->
</div>
</div>
<!-- End Apply For Job Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
});
</script>
Checkout form #1
<form class="js-validate">
<div class="border-bottom pb-7 mb-7">
<!-- Title -->
<div class="mb-4">
<h2 class="h4">Billing address</h2>
</div>
<!-- End Title -->
<!-- Billing Form -->
<div class="row">
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
First name
<span class="text-danger">*</span>
</label>
<input type="text" class="form-control" name="firstName" placeholder="Jack" aria-label="Jack" required
data-msg="Please enter your frist name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Last name
<span class="text-danger">*</span>
</label>
<input type="text" class="form-control" name="lastName" placeholder="Wayley" aria-label="Wayley" required
data-msg="Please enter your last name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="w-100"></div>
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Email address
<span class="text-danger">*</span>
</label>
<input type="email" class="form-control" name="emailAddress" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Phone
</label>
<input type="text" class="form-control" placeholder="+1 (062) 109-9222" aria-label="+1 (062) 109-9222"
data-msg="Please enter your last name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="w-100"></div>
<div class="col-md-8">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Street address
<span class="text-danger">*</span>
</label>
<input type="text" class="form-control" name="streetAddress" placeholder="470 Lucy Forks" aria-label="470 Lucy Forks" required
data-msg="Please enter a valid address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="col-md-4">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Apt, suite, etc.
</label>
<input type="text" class="form-control" placeholder="YC7B 3UT" aria-label="YC7B 3UT"
data-msg="Please enter a valid address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="col-md-12">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
City
<span class="text-danger">*</span>
</label>
<input type="text" class="form-control" name="cityAddress" placeholder="London" aria-label="London" required
data-msg="Please enter a valid address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="w-100"></div>
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Country
<span class="text-danger">*</span>
</label>
<select class="form-control custom-select" required
data-msg="Please select country."
data-error-class="u-has-error"
data-success-class="u-has-success">
<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>
</div>
<!-- End Input -->
</div>
<div class="col-md-6">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Postcode/Zip
<span class="text-danger">*</span>
</label>
<input type="text" class="form-control" name="postcode" placeholder="99999" aria-label="99999" required
data-msg="Please enter a postcode or zip code."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="w-100"></div>
<div class="col-12">
<!-- Checkbox -->
<div class="js-form-message">
<div class="custom-control custom-checkbox d-flex align-items-center text-muted mb-2">
<input type="checkbox" class="custom-control-input" id="termsCheckboxExample3" name="termsCheckboxExample3" required checked
data-msg="Please accept our Terms and Conditions.">
<label class="custom-control-label" for="termsCheckboxExample3">
<small>My billing and delivery information are the same.</small>
</label>
</div>
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input type="checkbox" class="custom-control-input" id="subscribeCheckbox" name="subscribeCheckbox" required checked
data-msg="Please accept our Terms and Conditions.">
<label class="custom-control-label" for="subscribeCheckbox">
<small>Please send me emails with exclusive gear offers, athlete info and expeditions updates from Front</small>
</label>
</div>
</div>
<!-- End Checkbox -->
</div>
</div>
<!-- End Billing Form -->
</div>
<!-- Payment -->
<div class="mb-7">
<!-- Title -->
<div class="mb-4">
<h2 class="h4">Payment method</h2>
</div>
<!-- End Title -->
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Card number
</label>
<input type="text" class="form-control" name="cardNumber" placeholder="**** **** **** ***" aria-label="**** **** **** ***" required
data-msg="Please enter a valid card number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
<div class="row">
<div class="col-md-8">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Card holder
</label>
<input type="text" class="form-control" name="cardHolder" placeholder="Jack Wayley" aria-label="Jack Wayley" required
data-msg="Please enter a valid card holder."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="col-md-2">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
Expiration
</label>
<input type="text" class="form-control" name="cardExpirationDate" placeholder="MM/YY" aria-label="MM/YY" required
data-msg="Please enter a valid date."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
<div class="col-md-2">
<!-- Input -->
<div class="js-form-message mb-6">
<label class="form-label">
CVC
</label>
<input type="text" class="form-control" name="cardCVC" placeholder="***" aria-label="***" required
data-msg="Please enter a valid CVC number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<!-- End Input -->
</div>
</div>
<!-- Button -->
<div class="d-flex justify-content-between align-items-center">
<a href="#"><small class="fas fa-arrow-left mr-2"></small> Return to cart</a>
<button type="submit" class="btn btn-primary btn-sm-wide btn-pill transition-3d-hover">Place order</button>
</div>
<!-- End Button -->
</div>
<!-- End Payment -->
</form>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
});
</script>
User info #1
<!-- Personal Info Form -->
<form class="js-validate">
<div class="row">
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label id="nameLabel" class="form-label">
Name
<span class="text-danger">*</span>
</label>
<div class="js-focus-state form-group">
<input type="text" class="form-control" name="name" value="Natalie Curtis" placeholder="Enter your name" aria-label="Enter your name" required aria-describedby="nameLabel"
data-msg="Please enter your name."
data-error-class="u-has-error"
data-success-class="u-has-success">
<small class="form-text text-muted">Displayed on your public profile, notifications and other places.</small>
</div>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label id="usernameLabel" class="form-label">
Username
<span class="text-danger">*</span>
</label>
<div class="js-focus-state form-group">
<input type="text" class="form-control" name="username" value="natalie" placeholder="Enter your username" aria-label="Enter your username" required aria-describedby="usernameLabel"
data-msg="Please enter your username."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
</div>
<label class="form-label">
Birth date
<span class="text-danger">*</span>
</label>
<div class="row">
<!-- Input -->
<div class="col-md-6 mb-3 mb-sm-6">
<div class="js-form-message">
<div class="js-focus-state form-group">
<select class="form-control custom-select" required
data-msg="Please select month."
data-error-class="u-has-error"
data-success-class="u-has-success">
<option value="">Select month</option>
<option value="birthMonthSelect1">January</option>
<option value="birthMonthSelect2">February</option>
<option value="birthMonthSelect3">March</option>
<option value="birthMonthSelect4" selected="selected">April</option>
<option value="birthMonthSelect5">May</option>
<option value="birthMonthSelect6">June</option>
<option value="birthMonthSelect7">July</option>
<option value="birthMonthSelect8">August</option>
<option value="birthMonthSelect9">September</option>
<option value="birthMonthSelect10">October</option>
<option value="birthMonthSelect11">November</option>
<option value="birthMonthSelect12">December</option>
</select>
</div>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-4 col-md-2 mb-3 mb-sm-6">
<div class="js-form-message">
<div class="js-focus-state form-group">
<select class="form-control custom-select" required
data-msg="Please select date."
data-error-class="u-has-error"
data-success-class="u-has-success">
<option value="">Select date</option>
<option value="birthDateSelect1">1</option>
<option value="birthDateSelect2">2</option>
<option value="birthDateSelect3">3</option>
<option value="birthDateSelect4">4</option>
<option value="birthDateSelect5">5</option>
<option value="birthDateSelect6">6</option>
<option value="birthDateSelect7">7</option>
<option value="birthDateSelect8">8</option>
<option value="birthDateSelect9">9</option>
<option value="birthDateSelect10">10</option>
<option value="birthDateSelect11">11</option>
<option value="birthDateSelect12" selected="selected">12</option>
<option value="birthDateSelect13">13</option>
<option value="birthDateSelect14">14</option>
<option value="birthDateSelect15">15</option>
<option value="birthDateSelect16">16</option>
<option value="birthDateSelect17">17</option>
<option value="birthDateSelect18">18</option>
<option value="birthDateSelect19">19</option>
<option value="birthDateSelect20">20</option>
<option value="birthDateSelect21">21</option>
<option value="birthDateSelect22">22</option>
<option value="birthDateSelect23">23</option>
<option value="birthDateSelect24">24</option>
<option value="birthDateSelect25">25</option>
<option value="birthDateSelect26">26</option>
<option value="birthDateSelect27">27</option>
<option value="birthDateSelect28">28</option>
<option value="birthDateSelect29">29</option>
<option value="birthDateSelect30">30</option>
<option value="birthDateSelect31">31</option>
</select>
</div>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-4 col-md-2 mb-3 mb-sm-6">
<div class="js-form-message">
<div class="js-focus-state form-group">
<select class="form-control custom-select" required
data-msg="Please select year."
data-error-class="u-has-error"
data-success-class="u-has-success">
<option value="">Select year</option>
<option value="birthYearSelect1900">1900</option>
<option value="birthYearSelect1901">1901</option>
<option value="birthYearSelect1902">1902</option>
<option value="birthYearSelect1903">1903</option>
<option value="birthYearSelect1904">1904</option>
<option value="birthYearSelect1905">1905</option>
<option value="birthYearSelect1906">1906</option>
<option value="birthYearSelect1907">1907</option>
<option value="birthYearSelect1908">1908</option>
<option value="birthYearSelect1909">1909</option>
<option value="birthYearSelect1910">1910</option>
<option value="birthYearSelect1911">1911</option>
<option value="birthYearSelect1912">1912</option>
<option value="birthYearSelect1913">1913</option>
<option value="birthYearSelect1914">1914</option>
<option value="birthYearSelect1915">1915</option>
<option value="birthYearSelect1916">1916</option>
<option value="birthYearSelect1917">1917</option>
<option value="birthYearSelect1918">1918</option>
<option value="birthYearSelect1919">1919</option>
<option value="birthYearSelect1920">1920</option>
<option value="birthYearSelect1921">1921</option>
<option value="birthYearSelect1922">1922</option>
<option value="birthYearSelect1923">1923</option>
<option value="birthYearSelect1924">1924</option>
<option value="birthYearSelect1925">1925</option>
<option value="birthYearSelect1926">1926</option>
<option value="birthYearSelect1927">1927</option>
<option value="birthYearSelect1928">1928</option>
<option value="birthYearSelect1929">1929</option>
<option value="birthYearSelect1930">1930</option>
<option value="birthYearSelect1931">1931</option>
<option value="birthYearSelect1932">1932</option>
<option value="birthYearSelect1933">1933</option>
<option value="birthYearSelect1934">1934</option>
<option value="birthYearSelect1935">1935</option>
<option value="birthYearSelect1936">1936</option>
<option value="birthYearSelect1937">1937</option>
<option value="birthYearSelect1938">1938</option>
<option value="birthYearSelect1939">1939</option>
<option value="birthYearSelect1940">1940</option>
<option value="birthYearSelect1941">1941</option>
<option value="birthYearSelect1942">1942</option>
<option value="birthYearSelect1943">1943</option>
<option value="birthYearSelect1944">1944</option>
<option value="birthYearSelect1945">1945</option>
<option value="birthYearSelect1946">1946</option>
<option value="birthYearSelect1947">1947</option>
<option value="birthYearSelect1948">1948</option>
<option value="birthYearSelect1949">1949</option>
<option value="birthYearSelect1950">1950</option>
<option value="birthYearSelect1951">1951</option>
<option value="birthYearSelect1952">1952</option>
<option value="birthYearSelect1953">1953</option>
<option value="birthYearSelect1954">1954</option>
<option value="birthYearSelect1955">1955</option>
<option value="birthYearSelect1956">1956</option>
<option value="birthYearSelect1957">1957</option>
<option value="birthYearSelect1958">1958</option>
<option value="birthYearSelect1959">1959</option>
<option value="birthYearSelect1960">1960</option>
<option value="birthYearSelect1961">1961</option>
<option value="birthYearSelect1962">1962</option>
<option value="birthYearSelect1963">1963</option>
<option value="birthYearSelect1964">1964</option>
<option value="birthYearSelect1965">1965</option>
<option value="birthYearSelect1966">1966</option>
<option value="birthYearSelect1967">1967</option>
<option value="birthYearSelect1968">1968</option>
<option value="birthYearSelect1969">1969</option>
<option value="birthYearSelect1970">1970</option>
<option value="birthYearSelect1971">1971</option>
<option value="birthYearSelect1972">1972</option>
<option value="birthYearSelect1973">1973</option>
<option value="birthYearSelect1974">1974</option>
<option value="birthYearSelect1975">1975</option>
<option value="birthYearSelect1976">1976</option>
<option value="birthYearSelect1977">1977</option>
<option value="birthYearSelect1978">1978</option>
<option value="birthYearSelect1979">1979</option>
<option value="birthYearSelect1980">1980</option>
<option value="birthYearSelect1981">1981</option>
<option value="birthYearSelect1982">1982</option>
<option value="birthYearSelect1983">1983</option>
<option value="birthYearSelect1984">1984</option>
<option value="birthYearSelect1985">1985</option>
<option value="birthYearSelect1986" selected="selected">1986</option>
<option value="birthYearSelect1987">1987</option>
<option value="birthYearSelect1988">1988</option>
<option value="birthYearSelect1989">1989</option>
<option value="birthYearSelect1990">1990</option>
<option value="birthYearSelect1991">1991</option>
<option value="birthYearSelect1992">1992</option>
<option value="birthYearSelect1993">1993</option>
<option value="birthYearSelect1994">1994</option>
<option value="birthYearSelect1995">1995</option>
<option value="birthYearSelect1996">1996</option>
<option value="birthYearSelect1997">1997</option>
<option value="birthYearSelect1998">1998</option>
<option value="birthYearSelect1999">1999</option>
<option value="birthYearSelect2000">2000</option>
<option value="birthYearSelect2001">2001</option>
<option value="birthYearSelect2002">2002</option>
<option value="birthYearSelect2003">2003</option>
<option value="birthYearSelect2004">2004</option>
<option value="birthYearSelect2005">2005</option>
<option value="birthYearSelect2006">2006</option>
<option value="birthYearSelect2007">2007</option>
<option value="birthYearSelect2008">2008</option>
<option value="birthYearSelect2009">2009</option>
<option value="birthYearSelect2010">2010</option>
<option value="birthYearSelect2011">2011</option>
<option value="birthYearSelect2012">2012</option>
<option value="birthYearSelect2013">2013</option>
<option value="birthYearSelect2014">2014</option>
<option value="birthYearSelect2015">2015</option>
<option value="birthYearSelect2016">2016</option>
<option value="birthYearSelect2017">2017</option>
</select>
</div>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-4 col-md-2 mb-6">
<div class="js-form-message">
<div class="js-focus-state form-group">
<select class="form-control custom-select" required
data-msg="Please select your gender."
data-error-class="u-has-error"
data-success-class="u-has-success">
<option value="">Select gender</option>
<option value="genderSelect1" selected>Male</option>
<option value="genderSelect2">Female</option>
<option value="genderSelect3">Other</option>
</select>
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="row">
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label id="emailLabel" class="form-label">
Email address
<span class="text-danger">*</span>
</label>
<div class="form-group">
<div class="js-focus-state">
<input type="email" class="form-control" name="email" value="natalie.curtis@gmail.com" placeholder="Enter your email address" aria-label="Enter your email address" required aria-describedby="emailLabel"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label id="locationLabel" class="form-label">
Location
<span class="text-danger">*</span>
</label>
<div class="js-focus-state form-group">
<input type="text" class="form-control" name="location" value="London, England" placeholder="Enter your location" aria-label="Enter your location" required aria-describedby="locationLabel"
data-msg="Please enter your location."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="row">
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label id="organizationLabel" class="form-label">
Organization
<span class="text-danger">*</span>
</label>
<div class="js-focus-state form-group">
<input type="text" class="form-control" name="organization" value="Pixeel Ltd." placeholder="Enter your organization name" aria-label="Enter your organization name" required aria-describedby="organizationLabel"
data-msg="Please enter your organization name"
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label id="websiteLabel" class="form-label">
Website
<span class="text-danger">*</span>
</label>
<div class="js-focus-state form-group">
<input class="form-control" type="url" name="website" value="https://www.htmlstream.com/natalie" placeholder="Enter your website" aria-label="Enter your website" required aria-describedby="websiteLabel"
data-msg="Password enter a valid website"
data-error-class="u-has-error"
data-success-class="u-has-success">
<small class="form-text text-muted">Your home page, blog or company site, e.g. http://example.com</small>
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="row">
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label id="phoneNumberLabel" class="form-label">
Phone number
<span class="text-danger">*</span>
</label>
<div class="js-focus-state form-group">
<input class="form-control" type="tel" name="phoneNumber" value="+44 (0161) 347 8854" placeholder="Enter your phone number" aria-label="Enter your phone number" required aria-describedby="phoneNumberLabel"
data-msg="Please enter a valid phone number"
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<a class="d-inline-block u-text-muted" href="#">
<span class="mr-1">+</span>
Add phone number
</a>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-6">
<div class="js-form-message">
<label class="form-label">
Preferred language
<span class="text-danger">*</span>
</label>
<div class="js-focus-state form-group">
<select class="form-control custom-select" required
data-msg="Please select language."
data-error-class="u-has-error"
data-success-class="u-has-success">
<option value="">Select language</option>
<option value="languageSelect1" selected>English</option>
<option value="languageSelect2">Français</option>
<option value="languageSelect3">Deutsch</option>
<option value="languageSelect4">Português</option>
</select>
</div>
</div>
</div>
<!-- End Input -->
</div>
</form>
<!-- End Personal Info Form -->
About form #1
<!-- Personal Info Form -->
<form class="js-validate">
<!-- Title -->
<div class="mb-3">
<h2 class="h5 mb-0">About</h2>
<p>Tell about yourself in two sentences.</p>
</div>
<!-- End Title -->
<div class="mb-6">
<label class="form-label">
Bio
</label>
<!-- Text Editor Input -->
<div class="u-summernote-editor">
<div class="js-summernote-editor" data-height="160"></div>
</div>
<!-- End Text Editor Input -->
</div>
<div class="mb-6">
<label class="form-label">
Skills
</label>
<!-- Tags Input -->
<div class="u-tagsinput">
<input type="text" value="HTML5, CSS3, JavaScript, jQuery" data-role="tagsinput">
</div>
<!-- End Tags Input -->
</div>
<!-- Buttons -->
<button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Changes</button>
<button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button>
<!-- End Buttons -->
</form>
<!-- End Personal Info Form -->
<link rel="stylesheet" href="../../assets/vendor/summernote/dist/summernote-lite.css">
<link rel="stylesheet" href="../../assets/vendor/bootstrap-tagsinput/css/bootstrap-tagsinput.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/summernote/dist/summernote-lite.js"></script>
<script src="../../assets/vendor/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.summernote-editor.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of text editors
$.HSCore.components.HSSummernoteEditor.init('.js-summernote-editor');
});
</script>
Experience form #1
<!-- Personal Info Form -->
<form class="js-validate">
<!-- Title -->
<div class="mb-3">
<h2 class="h5 mb-0">Experience</h2>
<p>Tell about your work, job, and other experiences.</p>
</div>
<!-- End Title -->
<div class="row">
<div class="col-sm-6 mb-6">
<!-- Datepicker -->
<label class="form-label">From</label>
<div id="datepickerWrapperFrom" class="js-focus-state u-datepicker input-group">
<div class="input-group-prepend">
<span id="calendarFromLabel" class="input-group-text">
<span class="fas fa-calendar"></span>
</span>
</div>
<input class="js-range-datepicker form-control bg-white rounded-right" type="text" placeholder="From" aria-label="From" aria-describedby="calendarFromLabel"
data-rp-wrapper="#datepickerWrapperFrom"
data-rp-date-format="d/m/Y">
</div>
<!-- End Datepicker -->
</div>
<div class="col-sm-6 mb-6">
<!-- Datepicker -->
<label class="form-label">To</label>
<div id="datepickerWrapperTo" class="js-focus-state u-datepicker input-group">
<div class="input-group-prepend">
<span id="calendarToLabel" class="input-group-text">
<span class="fas fa-calendar"></span>
</span>
</div>
<input class="js-range-datepicker form-control bg-white rounded-right" type="text" placeholder="To" aria-label="To" aria-describedby="calendarToLabel"
data-rp-wrapper="#datepickerWrapperTo"
data-rp-date-format="d/m/Y">
</div>
<!-- End Datepicker -->
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-6">
<label id="companyLabel" class="form-label">Company</label>
<!-- Input -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your company title" aria-label="Enter your company title" aria-describedby="companyLabel">
</div>
<!-- End Input -->
</div>
<div class="col-sm-6 mb-6">
<label id="positionLabel" class="form-label">Position</label>
<!-- Input -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
</div>
<!-- End Input -->
</div>
</div>
<!-- Buttons -->
<button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Changes</button>
<button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button>
<!-- End Buttons -->
</form>
<!-- End Personal Info Form -->
<link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.range-datepicker.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of range datepicker
$.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
// initialization of forms
$.HSCore.components.HSFocusState.init();
});
</script>
<!-- JS Front -->
Copy-to-clipboard #1
<!-- Clipboard Input -->
<form>
<div class="js-focus-state mb-2">
<div class="input-group">
<input id="referralLink" type="text" class="form-control" value="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">
<div class="input-group-append">
<a class="js-clipboard input-group-text" href="javascript:;"
data-content-target="#referralLink"
data-class-change-target="#linkIcon"
data-default-class="fas fa-clone"
data-success-class="fas fa-check">
<span id="linkIcon" class="fas fa-clone"></span>
</a>
</div>
</div>
</div>
<small class="form-text text-muted">Copy or share your referral link with friends</small>
</form>
<!-- End Clipboard Input -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/clipboard/dist/clipboard.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.clipboard.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of clipboard
$.HSCore.components.HSClipboard.init('.js-clipboard');
});
</script>
Payment calculator #1
$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.
<div class="card bg-light p-5">
<!-- Total Price -->
<div class="mb-4">
<span class="h4 font-weight-medium">$37,469</span>
<span class="h6 font-weight-medium">monthly.</span>
<span class="h6 text-secondary font-weight-normal ml-3">In association with:</span>
</div>
<!-- End Total Price -->
<!-- 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="form-label">Price of property</label>
<div class="js-focus-state input-group">
<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="form-label">Deposit</label>
<div class="js-focus-state input-group">
<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="form-label">Interest rate</label>
<div class="js-focus-state input-group">
<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="form-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 font-size-1 mb-0">
<li class="d-flex align-items-center py-1">
<small class="far fa-circle text-primary mr-2"></small>
<span class="font-weight-medium">Principal and Interest</span>
<div class="ml-auto">
<span class="text-secondary">$35,943 /mo</span>
</div>
</li>
<li class="d-flex align-items-center py-1">
<small class="far fa-circle text-success mr-2"></small>
<span class="font-weight-medium">Property Taxes</span>
<div class="ml-auto">
<span class="text-secondary">$1,526 /mo</span>
</div>
</li>
<li class="d-flex align-items-center py-1">
<small class="far fa-circle text-info mr-2"></small>
<span class="font-weight-medium">Yearly Condo Fees</span>
<div class="ml-auto">
<span class="text-secondary">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>
Social profiles form #1
Social profiles
Add elsewhere links to your profile.
<!-- Title --> <div class="mb-5"> <h3 class="h5 mb-1">Social profiles</h3> <p>Add elsewhere links to your profile.</p> </div> <!-- End Title --> <!-- Social Profiles Form --> <form class="js-validate"> <!-- Input Group --> <div class="mb-6"> <div class="js-focus-state form-group"> <div class="input-group"> <div id="dribbleProfileLabel" class="input-group-prepend"> <span class="input-group-text">https://dribbble.com/</span> </div> <input type="text" class="form-control" placeholder="Dribbble link" aria-label="Dribbble link" required aria-describedby="dribbleProfileLabel" data-msg="Please enter a valid URL address." data-error-class="u-has-error" data-success-class="u-has-success"> </div> <small class="form-text text-muted">Add your Dribbble profile name (e.g. AlexBrown)</small> </div> </div> <!-- End Input Group --> <!-- Input Group --> <div class="mb-6"> <div class="js-focus-state form-group"> <div class="input-group"> <div id="twitterProfileLabel" class="input-group-prepend"> <span class="input-group-text">http://twitter.com/</span> </div> <input type="text" class="form-control" placeholder="Twitter profile" aria-label="Twitter profile" required aria-describedby="twitterProfileLabel" data-msg="Please enter a valid URL address." data-error-class="u-has-error" data-success-class="u-has-success"> </div> <small class="form-text text-muted">Add your Twitter username (e.g. alexbrown)</small> </div> </div> <!-- End Input Group --> <!-- Input Group --> <div class="mb-6"> <div class="js-focus-state form-group"> <div class="input-group"> <div id="facebookProfileLabel" class="input-group-prepend"> <span class="input-group-text">http://www.facebook.com/</span> </div> <input type="text" class="form-control" placeholder="Facebook profile" aria-label="Facebook profile" required aria-describedby="facebookProfileLabel" data-msg="Please enter a valid URL address." data-error-class="u-has-error" data-success-class="u-has-success"> </div> <small class="form-text text-muted">Input your Facebook username (e.g. alexbrown)</small> </div> </div> <!-- End Input Group --> <!-- Input Group --> <div class="mb-6"> <div class="js-focus-state form-group"> <div class="input-group"> <div id="behanceProfileLabel" class="input-group-prepend"> <span class="input-group-text">http://www.behance.net/</span> </div> <input type="text" class="form-control" placeholder="Behance profile" aria-label="Behance profile" required aria-describedby="behanceProfileLabel" data-msg="Please enter a valid URL address." data-error-class="u-has-error" data-success-class="u-has-success"> </div> <small class="form-text text-muted">Input your Behance username (e.g. alexbrown)</small> </div> </div> <!-- End Input Group --> <button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Update Social Profiles</button> <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button> </form> <!-- End Social Profiles Form --><link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css"><!-- JS Implementing Plugins --> <script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script> <!-- JS Front --> <script src="../../assets/js/components/hs.range-datepicker.js"></script> <!-- JS Plugins Init. --> <script> $(document).on('ready', function () { // initialization of range datepicker $.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker'); }); </script>