Translate: Language selection view

Language selection view

by Eugene Trounev

HTML

<link rel="stylesheet" href="https://appcdn2.docsie.io/js/onboarding/current/css/main.css">
<div class="container">
  <div class="my-5 mb-4 text-left">
    <h2>
      Translate {book title}
    </h2>
  </div>
  <div class="row">
    <div class="col">
      <form>
        <div class="form-group mb-3">
          <label for="transFrom">Translate from:</label>
          <select class="custom-select" id="transFrom" name="transFrom" required>
            <option value="">Select...</option>
            <option value="en">English</option>
            <option value="fr">French</option>
            <option>...</option>
          </select>
					<div class="invalid-feedback">
						Please select a source language
					</div>
        </div>
        <div class="form-group mb-3">
          <label for="transTo">Translate into:</label>
          <select class="custom-select is-invalid" id="transTo" name="transTo" required>
            <option value="">Select...</option>
            <option value="en">English</option>
            <option value="fr">French</option>
            <option>...</option>
          </select>
					<div class="invalid-feedback">
						Please select a language to translate into
					</div>
        </div>
        <div class="form-group my-4">
          <div class="form-element custom-switch">
            <input type="checkbox" class="form-element-input" id="includeProofreading" name="includeProofreading" checked>
            <label class="form-element-label" for="includeProofreading">Include proofreading</label>
          </div>
        </div>
        <hr class="mb-4">
        <div class="mb-4 text-center">
          <button class="btn btn-primary" type="submit">Check estimate</button>
          <button class="btn btn-link" type="clear">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>