Bootstrap Form HTML Builder

Create a form and export bootstrap HTML and Javascript!

Drag and configure your form fields, hide and show fields based on the values of other ones. Change the Department and see it in action.

Post the data back to FormKeep to get spam protection, notifications and file upload support!

You can change the fields that you need and then export the HTML for use on your site directly. Or select one of our other templates to get started!

Create a Free Account Additional Form Templates

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
  integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <section class="container col-xs-12 col-sm-8 col-sm-offset-2 col-xl-6 col-xl-offset-3 my-4">
      <div class="container" style="width:100%">
        <form class="" target="_self" enctype="multipart/form-data" action="https://formkeep.com/f/exampletoken"
          accept-charset="UTF-8" method="post">
          <fieldset>
            <center>
              <h2>How can we help?</h2>
            </center>
            <br>
            <div class="row">
              <div class="form-group col-xs-12" id="Name__div">
                <label title="required" for="Name">Name *</label>
                <input type="text" name="Name" id="Name" required="required" autofocus="autofocus"
                  class="form-control" />
              </div>
            </div>
            <div class="row">
              <div class="form-group col-xs-12" id="Email__div">
                <label title="required" for="Email">Email *</label>
                <input type="email" name="Email" id="Email" required="required" class="form-control" />
              </div>
            </div>
            <div class="row">
              <div class="form-group col-xs-12" id="Message__div">
                <label title="required" for="Message">Message *</label>
                <textarea name="Message" id="Message" required="required" class="form-control"></textarea>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-xs-12" id="Department__div">
                <label for="Department">Department *</label>
                <select name="Department" id="Department" required="required" class="form-control">
                  <option value="">Choose</option>
                  <option value="Sales">Sales</option>
                  <option value="Support">Support</option>
                  <option value="Billing">Billing</option>
                </select>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-xs-12" id="Account_Number__div">
                <label title="required" for="Account_Number">Account Number *</label>
                <input type="text" name="Account Number" id="Account_Number" required="required" class="form-control" />
              </div>
            </div>
            <div class="row">
              <div class="form-group col-xs-12" id="Billing_Help__div">
                <h3>Billing Help</h3>
                <p>
                <ul>
                  <li><a href="https://example.com">Change your Credit Card</a></li>
                  <li><a href="https://example.com">Change Account Email</a></li>
                  <li><a href="https://example.com">Request Receipt</a></li>
                </ul>
                </p>
              </div>
            </div>
            <br>
            <div class="row">
              <div class="col-xs-12">
                <input type="submit" value="Submit" class="btn btn-block btn-primary" data-disable-with="Submit" />
              </div>
            </div>
          </fieldset>
        </form>
        <div style='text-align: center; padding-top: 6rem; padding-bottom: 3rem'>
        </div>
      </div>
    </section>
  </div>
</div>
<script>
  $(function (_event) {
    $("#Department").on("change", function () {
      test_value = this.value
      if (test_value == 'Sales') {
        $('#Account_Number__div').show(0)
        $('#Account_Number').prop('required', true)
      } else {
        $('#Account_Number').prop('required', false)
        $('#Account_Number__div').hide(0)
      }
    }).change()
    $("#Department").on("change", function () {
      test_value = this.value
      if (test_value == 'Billing') {
        $('#Billing_Help__div').show(0)
      } else {
        $('#Billing_Help__div').hide(0)
      }
    }).change()
  });
</script>