Form Layouts - Feedback
Component #1
<div class="container space-2">
<!-- Apply Form -->
<form class="js-validate">
<div class="row">
<div class="col-md-6 mb-3 mb-md-5">
<!-- Input -->
<div class="js-form-message">
<label class="input-label" for="fullNameLabel">Full name</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.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-3 mb-md-5">
<!-- Input -->
<div class="js-form-message">
<label class="input-label" for="lastNameLabel">Last name</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.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-3 mb-md-5">
<!-- Input -->
<div class="js-form-message">
<label class="input-label" for="emailAddressLabel">Email</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.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-md-6 mb-3 mb-md-5">
<!-- Input -->
<div class="js-form-message">
<label class="input-label" for="urlLabel">URL <span class="text-muted font-weight-normal ml-1">(optional)</span></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>
<div class="mb-3 mb-md-5">
<!-- Input -->
<label class="input-label">Resume/CV and Cover Letter</label>
<div id="resumeAttach" class="js-dropzone dz-dropzone dz-dropzone-boxed">
<div class="dz-message p-2">
<span class="d-block mb-1">Browse your files</span>
<small class="d-block text-muted">Maximum file size is 1MB</small>
</div>
</div>
<!-- End Input -->
</div>
<div class="mb-3 mb-md-5">
<!-- Input -->
<div class="js-form-message">
<label class="input-label">In a few words...</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."></textarea>
</div>
</div>
<!-- End Input -->
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary transition-3d-hover">Submit Application</button>
</div>
</form>
<!-- End Apply Form -->
</div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$('.js-validate').each(function () {
var validation = $.HSCore.components.HSValidation.init($(this));
});
});
</script>
Component #2
<!-- Hire Us Form Section -->
<div class="container space-2">
<form class="js-validate row justify-content-lg-center">
<div class="col-lg-8">
<!-- Input -->
<div class="js-form-message mb-4 mb-md-6">
<label class="input-label">Your name</label>
<input type="text" class="form-control" name="firstName" placeholder="Jeff Fisher" aria-label="Jeff Fisher" required data-msg="Please enter your frist name.">
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-4 mb-md-6">
<label class="input-label">Your email address</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.">
</div>
<!-- End Input -->
<!-- Input -->
<div class="mb-4 mb-md-6">
<label class="input-label">Your company name <span class="text-muted font-weight-normal ml-1">(optional)</span></label>
<input type="text" class="form-control" placeholder="JackWayley Inc." aria-label="JackWayley Inc.">
</div>
<!-- End Input -->
<!-- Platform -->
<div class="mb-4 mb-md-6">
<label class="input-label">Choose your platform <span class="text-muted font-weight-normal ml-1">(optional)</span></label>
<!-- Button Group -->
<div class="btn-group btn-group-toggle btn-group-segment d-flex" data-toggle="buttons">
<label class="btn flex-fill active">
<input type="checkbox" name="options" id="option1"> Web
</label>
<label class="btn flex-fill">
<input type="checkbox" name="options" id="option2"> Mobile app
</label>
<label class="btn flex-fill">
<input type="checkbox" name="options" id="option3"> Others
</label>
</div>
<!-- End Button Group -->
</div>
<!-- End Platform -->
<!-- Budget Custom Select -->
<div class="js-form-message mb-4 mb-md-6">
<label class="input-label">Tell us about your budget</label>
<select class="form-control custom-select" required data-msg="Please select your budget.">
<option value="" 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>
<!-- End Budget Custom Select -->
<!-- Input -->
<div class="js-form-message mb-4 mb-md-6">
<label class="input-label">Tell us about your project</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."></textarea>
</div>
<!-- End Input -->
<div class="text-center">
<div class="mb-2">
<button type="submit" class="btn btn-primary">Let's Start Working Together</button>
</div>
<p class="small">We'll get back to you in 1-2 business days.</p>
</div>
</div>
</form>
</div>
<!-- End Hire Us Form Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$('.js-validate').each(function () {
var validation = $.HSCore.components.HSValidation.init($(this));
});
});
</script>
Component #3
Tell us about yourself
Whether you have questions or you would just like to say hello, contact us.
<!-- Contact Form Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Tell us about yourself</h2>
<p>Whether you have questions or you would just like to say hello, contact us.</p>
</div>
<!-- End Title -->
<div class="w-lg-80 mx-auto">
<!-- Contacts Form -->
<form class="js-validate">
<div class="row">
<!-- Input -->
<div class="col-sm-6 mb-4">
<div class="js-form-message">
<label class="input-label">Your name</label>
<input type="text" class="form-control" name="name" placeholder="Jeff Fisher" aria-label="Jeff Fisher" required
data-msg="Please enter your name.">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-4">
<div class="js-form-message">
<label class="input-label">Your email address</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.">
</div>
</div>
<!-- End Input -->
<div class="w-100"></div>
<!-- Input -->
<div class="col-sm-6 mb-4">
<div class="js-form-message">
<label class="input-label">Subject</label>
<input type="text" class="form-control" name="subject" placeholder="Web design" aria-label="Web design" required
data-msg="Please enter a subject.">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="col-sm-6 mb-4">
<div class="js-form-message">
<label class="input-label">Your phone number</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.">
</div>
</div>
<!-- End Input -->
</div>
<!-- Input -->
<div class="js-form-message mb-6">
<label class="input-label">How can we help you?</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."></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 -->
</div>
</div>
<!-- End Contact Form Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$('.js-validate').each(function () {
var validation = $.HSCore.components.HSValidation.init($(this));
});
});
</script>
Component #4
<div class="container">
<!-- Form -->
<form class="js-validate">
<div class="form-row">
<div class="col-sm-6 mb-sm-3">
<div class="js-form-message form-group">
<label class="input-label">Name</label>
<input type="text" class="form-control" name="name" id="inputName" placeholder="Name" aria-label="Name" required
data-msg="Please enter your name.">
</div>
</div>
<div class="col-sm-6 mb-sm-3">
<div class="js-form-message form-group">
<label class="input-label">Email</label>
<input type="email" class="form-control" name="emailAddress" id="emailAddress" placeholder="Email address" aria-label="Email address" required
data-msg="Please enter a valid email address.">
</div>
</div>
<div class="col-12 mb-sm-3">
<div class="js-form-message form-group">
<label class="input-label">Comment</label>
<textarea class="form-control" rows="7" id="descriptionTextarea" placeholder="Comment" required
data-msg="Please enter your message."></textarea>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="submit" class="btn btn-primary btn-wide transition-3d-hover">Submit</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$('.js-validate').each(function () {
var validation = $.HSCore.components.HSValidation.init($(this));
});
});
</script>