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

    I create a form, save, preview & select the html source code. Added source code into Shopify web page loses its format and adds bullets

    Asked by smguttman on July 02, 2015 at 01:09 PM

    <script src="//d2g9qbzl5h49rh.cloudfront.net/file-uploader/fileuploader.js?v=3.3.7708"></script>

    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/prototype.forms.js" type="text/javascript"></script>

    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/jotform.forms.js?3.3.7708" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init(function(){

          setTimeout(function() {

              $('input_5').hint('ex: myname@example.com');

           }, 20);

          JotForm.clearFieldOnHide="disable";

          setTimeout(function() {

              JotForm.initMultipleUploads();

          }, 2);

          JotForm.onSubmissionError="jumpToSubmit";

       });

    </script>

    <link target="_blank" href="//d2g9qbzl5h49rh.cloudfront.net/static/formCss.css?3.3.7708" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" target="_blank" href="//d2g9qbzl5h49rh.cloudfront.net/css/styles/nova.css?3.3.7708" />

    <link type="text/css" media="print" rel="stylesheet" target="_blank" href="//d2g9qbzl5h49rh.cloudfront.net/css/printForm.css?3.3.7708" />

    <style type="text/css">

        .form-label-left{

            width:150px !important;

        }

        .form-line{

            padding-top:12px;

            padding-bottom:12px;

        }

        .form-label-right{

            width:150px !important;

        }

        .form-all{

            width:690px;

            color:#555 !important;

            font-family:'Lucida Grande',' Lucida Sans Unicode',' Lucida Sans',' Verdana',' Tahoma',' sans-serif';

            font-size:14px;

        }

    </style>

     

    <form class="jotform-form" action="//submit.jotform.us/submit/51819334406152/" method="post" enctype="multipart/form-data" name="form_51819334406152" id="51819334406152" accept-charset="utf-8">

      <input type="hidden" name="formID" value="51819334406152" />

      <div class="form-all">

        <ul class="form-section page-section">

          <li id="cid_1" class="form-input-wide" data-type="control_head">

            <div class="form-header-group">

              <div class="header-text httal htvam">

                <h2 id="header_1" class="form-header">

                  Upload your Files!

                </h2>

              </div>

            </div>

          </li>

          <li class="form-line" data-type="control_fullname" id="id_4">

            <label class="form-label form-label-top form-label-auto" id="label_4" for="input_4"> Full Name </label>

            <div id="cid_4" class="form-input-wide jf-required">

              <span class="form-sub-label-container" style="vertical-align: top">

                <input class="form-textbox" type="text" size="10" name="q4_fullName4[first]" id="first_4" />

                <label class="form-sub-label" for="first_4" id="sublabel_first" style="min-height: 13px;"> First Name </label>

              </span>

              <span class="form-sub-label-container" style="vertical-align: top">

                <input class="form-textbox" type="text" size="15" name="q4_fullName4[last]" id="last_4" />

                <label class="form-sub-label" for="last_4" id="sublabel_last" style="min-height: 13px;"> Last Name </label>

              </span>

            </div>

          </li>

          <li class="form-line" data-type="control_email" id="id_5">

            <label class="form-label form-label-top form-label-auto" id="label_5" for="input_5"> E-mail </label>

            <div id="cid_5" class="form-input-wide jf-required">

              <input type="email" class=" form-textbox validate[Email]" id="input_5" name="q5_email5" size="33" value="" />

            </div>

          </li>

          <li class="form-line" data-type="control_dropdown" id="id_7">

            <label class="form-label form-label-top form-label-auto" id="label_7" for="input_7"> Select your file types </label>

            <div id="cid_7" class="form-input-wide jf-required">

              <select class="form-dropdown" style="width:150px" id="input_7" name="q7_selectYour">

                <option value="">  </option>

                <option value="Photograph"> Photograph </option>

                <option value="Sign Graphic"> Sign Graphic </option>

                <option value="Apparel Image"> Apparel Image </option>

                <option value="Vinyl Skin"> Vinyl Skin </option>

              </select>

            </div>

          </li>

          <li class="form-line" data-type="control_fileupload" id="id_6">

            <label class="form-label form-label-top form-label-auto" id="label_6" for="input_6"> Upload your files here </label>

            <div id="cid_6" class="form-input-wide jf-required">

              <div class="qq-uploader-buttonText-value">

                Click to upload

              </div>

              <input class="form-upload-multiple" type="file" id="input_6" name="q6_uploadYour[]" multiple="multiple" file-accept="pdf, doc, docx, xls, csv, txt, rtf, html, zip, mp3, wma, mpg, flv, avi, jpg, jpeg, png, gif" file-maxsize="10240" file-minsize="0" file-limit="0" />

            </div>

          </li>

          <li class="form-line" data-type="control_textarea" id="id_8">

            <label class="form-label form-label-top form-label-auto" id="label_8" for="input_8"> Any message? </label>

            <div id="cid_8" class="form-input-wide jf-required">

              <textarea id="input_8" class="form-textarea" name="q8_anyMessage" cols="40" rows="6"></textarea>

            </div>

          </li>

          <li class="form-line" data-type="control_button" id="id_2">

            <div id="cid_2" class="form-input-wide">

              <div style="text-align:left" class="form-buttons-wrapper">

                <button id="input_2" type="submit" class="form-submit-button">

                  Send Now!

                </button>

              </div>

            </div>

          </li>

          <li style="display:none">

            Should be Empty:

            <input type="text" name="website" value="" />

          </li>

        </ul>

      </div>

      <input type="hidden" id="simple_spc" name="simple_spc" value="51819334406152" />

      <script type="text/javascript">

      document.getElementById("si" + "mple" + "_spc").value = "51819334406152-51819334406152";

      </script>

    </form>

    Page URL:
    http://www.fotomounting.com/pages/upload-files-photos-signs-designs-et<br/>c

    create a form source bullets preview
  • Profile Image
    JotForm Support

    Answered by david on July 02, 2015 at 02:07 PM

    Hi,

    I checked your page and I do not see the bullet points you are referring to:

    The page looked the same in both Chrome and FireFox.

    When I tested your embed code in my test page, again, there were no bullet points:

    When using the source code of your form, the form will inherit any CSS and scripts running in your page.  Your form will likely look different than the original when embedded using this method.  Especially if you are using a website builder that adds large amounts of CSS.

    If you would like to insulate your form from the rest of the page and have it look and function as it does in non-embedded version, try embedding your form using the iFrame method instead:

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    If this still does not allow for your form to show without the bullet points, let us know and we will be happy to have another look.

  • Profile Image

    Answered by smguttman on July 02, 2015 at 04:28 PM
    Thanks for the response. I finally figured out that rather than source code I needed to use iFrame, then it came out just right. Hope you have an incredible day!
    Sent from Steve's iPhone
    ...
  • Profile Image
    JotForm Support

    Answered by david on July 02, 2015 at 04:31 PM

    Glad to hear it!  If there is anything else we can assist you with just let us know and we will be happy to help.

  • Profile Image

    Answered by smguttman on July 02, 2015 at 06:48 PM
    Thank you so much!
    Sent from Steve's iPhone
    ...