Form Layouts - Feedback

Component #1

Full name

Last name

Email

URL (optional)

Resume/CV and Cover Letter

Browse your files Maximum file size is 1MB

In a few words...

<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

Your name

Your email address

Your company name (optional)

Choose your platform (optional)

Web Mobile app Others

Tell us about your budget

Tell us about your project

We'll get back to you in 1-2 business days.

<!-- 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.

Your name

Your email address

Subject

Your phone number

How can we help you?

We'll get back to you in 1-2 business days.

<!-- 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>