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

<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.onSubmissionDISABLEDerror="jumpToSubmit";

   });

</script>

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

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

<link type="text/css" media="print" rel="stylesheet" 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>

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.

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

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.

Thank you so much!
Sent from Steve's iPhone
...