What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I use Bootstrap Framework class styles in JotForm

    Asked by artisanwebanddesign on November 19, 2014 at 05:42 PM

    I created a simple contact form, and I'd like to bring it into my website that uses Bootstrap as a front-end framework. I have full access to adding HTML/JS code, and I'd like to style my form using row/column control instead of lists. For example:

    Use this:

    <div class="row">
         <div class="col-xs-6">
              <label for="firstname">First Name*</label><br>
              <input type="text" id="firstname" name="firstname" required>
         </div>
         <div class="col-xs-6">
              <label for="lastname">Last Name*</label><br>
              <input type="text" id="lastname" name="lastname" required>
         </div>
    </div>

    ... instead of using this:

    <ul class="form-section">
         <li class="form-line" data-type="control_textbox" id="id_1">
              <label class="form-label form-label-left form-label-auto" id="label_1" for="input_1">First Name<span class="form-required">*</span></label>
              <div id="cid_1" class="form-input">
                    <input type="text" class=" form-textbox validate[required, Alphabetic]" data-type="input-textbox" id="input_1" name="q1_firstName" size="20" value="" />
              </div>
         </li>
         <li class="form-line" data-type="control_textbox" id="id_2">
              <label class="form-label form-label-left form-label-auto" id="label_2" for="input_2">Last Name<span class="form-required">*</span></label>
              <div id="cid_2" class="form-input">
                   <input type="text" class=" form-textbox validate[required, Alphabetic]" data-type="input-textbox" id="input_2" name="q2_lastName" size="20" value="" />
              </div>
         </li>
    </ul>

     

    I see various attributes like: "data-type" and "[required, Alphabetic]". I'm curious what all is required for everything to work properly? What is the best route to accomplish what I'd like to do?

    Thanks in advance!

    source bootstrap framework bootstrap
  • Profile Image
    JotForm Support

    Answered by jonathan on November 19, 2014 at 06:59 PM

    Hi,

    Thank you for contacting us.

    Unfortunately, I think what you wanted to achieve is not yet possible on the form because the classes define in our form are not similar to the classes of Bootstrap.

    I will submit a feature request ticket to our higher team support so that they can evaluate the feature to have Bootstrap framework classes supported on the form.

    We cannot provide any ETA or time frame when this can be applied, but we will notify you here for any update/news on the status.

    Thanks.