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

    FORM HTML CODE NOT WORKING PROPERLY ON MY WEBSITE

    Asked by expat1uk on June 14, 2013 at 12:48 PM

    Ref:  http://www.theangelchanneler.com/ReadingPromotions.html

    The form I have displayed on my website does not show the total amount paid.  I have tried iFrame and various other methods and this is the only form that displays the entire form (the others show half of it!).

     

    I used the following html code for this page: 

    <script src="http://cdn.jotfor.ms/static/jotform.js?3.1.770" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          $('input_8').hint('ex: myname@example.com');
          productID = {"0":"input_17_1002","1":"input_17_1007","2":"input_17_1003"};
          JotForm.totalCounter({"input_17_1002":{"price":"55.00"},"input_17_1007":{"price":"75.00"},"input_17_1003":{"price":"95.00"}});
       });
    </script>
    <link target="_blank" href="http://cdn.jotfor.ms/static/formCss.css?3.1.770" rel="stylesheet" type="text/css" />
    <link type="text/css" media="print" rel="stylesheet" target="_blank" href="http://cdn.jotfor.ms/css/printForm.css?3.1.770" />
    <style type="text/css">
        .form-label{
            width:124px !important;
        }
        .form-label-left{
            width:124px !important;
        }
        .form-line{
            padding-top:12px;
            padding-bottom:12px;
        }
        .form-label-right{
            width:124px !important;
        }
        .form-all{
            width:596px;
            background:#FFFFFF;
            color:#000000 !important;
            font-family:'Verdana';
            font-size:10px;
        }
    </style>

    <form class="jotform-form" action="http://submit.jotformpro.com/submit/31644463187963/" method="post" name="form_31644463187963" id="31644463187963" accept-charset="utf-8">
      <input type="hidden" name="formID" value="31644463187963" />
      <div class="form-all">
        <ul class="form-section">
          <li id="cid_26" class="form-input-wide">
            <div class="form-header-group">
              <h3 id="header_26" class="form-header">
                READING PROMOTION APPOINTMENT REQUEST & PAYMENT FORM
              </h3>
            </div>
          </li>
          <li class="form-line" id="id_7">
            <label class="form-label-left" id="label_7" for="input_7">
              FULL NAME<span class="form-required">*</span>
            </label>
            <div id="cid_7" class="form-input"><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="10" name="q7_fullName7[first]" id="first_7" />
                <label class="form-sub-label" for="first_7" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="15" name="q7_fullName7[last]" id="last_7" />
                <label class="form-sub-label" for="last_7" id="sublabel_last"> Last Name </label></span>
            </div>
          </li>
          <li class="form-line" id="id_9">
            <label class="form-label-left" id="label_9" for="input_9">
              TELEPHONE<span class="form-required">*</span>
            </label>
            <div id="cid_9" class="form-input"><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="tel" name="q9_telephone[area]" id="input_9_area" size="3">
                -
                <label class="form-sub-label" for="input_9_area" id="sublabel_area"> Area Code </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="tel" name="q9_telephone[phone]" id="input_9_phone" size="8">
                <label class="form-sub-label" for="input_9_phone" id="sublabel_phone"> Phone Number </label></span>
            </div>
          </li>
          <li class="form-line" id="id_8">
            <label class="form-label-left" id="label_8" for="input_8">
              E-MAIL<span class="form-required">*</span>
            </label>
            <div id="cid_8" class="form-input">
              <input type="email" class=" form-textbox validate[required, Email]" id="input_8" name="q8_email" size="20" />
            </div>
          </li>
          <li class="form-line" id="id_22">
            <label class="form-label-left" id="label_22" for="input_22">
              CITY AND STATE<span class="form-required">*</span>
            </label>
            <div id="cid_22" class="form-input">
              <input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_22" name="q22_cityAnd" size="20" />
            </div>
          </li>
          <li class="form-line" id="id_23">
            <label class="form-label-left" id="label_23" for="input_23">
              COUNTRY<span class="form-required">*</span>
            </label>
            <div id="cid_23" class="form-input">
              <input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_23" name="q23_country" size="20" />
            </div>
          </li>
          <li class="form-line" id="id_17">
            <label class="form-label-left" id="label_17" for="input_17">
              READING<span class="form-required">*</span>
            </label>
            <div id="cid_17" class="form-input">
              <input type="hidden" name="simple_fpc" value="17" /><span class="form-product-item"><input class="form-checkbox validate[required]" type="checkbox" id="input_17_1002" name="q17_reading17[][id]" value="1002" />
                <label for="input_17_1002">
                  General Reading (30 minutes) Promotion Code STAR ANGELS:<span class="form-product-details"><b>
                      $<span id="input_17_1002_price">55.00</span>
                      USD
                    </b></span>
                </label></span>
              <br /><span class="form-product-item"><input class="form-checkbox validate[required]" type="checkbox" id="input_17_1007" name="q17_reading17[][id]" value="1007" />
                <label for="input_17_1007">
                  General Reading (45 minutes) Promotion Code STAR ANGELS:<span class="form-product-details"><b>
                      $<span id="input_17_1007_price">75.00</span>
                      USD
                    </b></span>
                </label></span>
              <br /><span class="form-product-item"><input class="form-checkbox validate[required]" type="checkbox" id="input_17_1003" name="q17_reading17[][id]" value="1003" />
                <label for="input_17_1003">
                  General Reading (60 minutes) Promotion Code STAR ANGELS<span class="form-product-details"><b>
                      $<span id="input_17_1003_price">95.00</span>
                      USD
                    </b></span>
                </label></span>
              <br />
              <br /><span class="form-payment-total"><b>
                  Total:&nbsp;<span>$<span id="payment_total">0.00</span>
                    USD</span></span>
              </b>
            </div>
          </li>
          <li class="form-line" id="id_25">
            <label class="form-label-left" id="label_25" for="input_25">
              READING SOURCE<span class="form-required">*</span>
            </label>
            <div id="cid_25" class="form-input">
              <select class="form-dropdown validate[required]" style="width:150px" id="input_25" name="q25_readingSource">
                <option value="">  </option>
                <option value="Referral"> Referral </option>
                <option value="Repeat Client"> Repeat Client </option>
                <option value="Best American Psychics"> Best American Psychics </option>
                <option value="Best Psychic Directory"> Best Psychic Directory </option>
                <option value="Body Mind Spirit Online Directory"> Body Mind Spirit Online Directory </option>
                <option value="Body Mind & Soul (Houston)"> Body Mind & Soul (Houston) </option>
                <option value="Facebook"> Facebook </option>
                <option value="Facebook Ad"> Facebook Ad </option>
                <option value="Google Search"> Google Search </option>
                <option value="Google Ad"> Google Ad </option>
                <option value="LinkedIn"> LinkedIn </option>
                <option value="OM Times"> OM Times </option>
                <option value="The Divine Matrix"> The Divine Matrix </option>
                <option value="Twitter"> Twitter </option>
                <option value="Yahoo Search"> Yahoo Search </option>
                <option value="Yellow Pages"> Yellow Pages </option>
                <option value="Your Cup of Tea"> Your Cup of Tea </option>
              </select>
            </div>
          </li>
          <li class="form-line" id="id_19">
            <label class="form-label-left" id="label_19" for="input_19">
              PREFERENCE<span class="form-required">*</span>
            </label>
            <div id="cid_19" class="form-input">
              <div class="form-single-column"><span class="form-radio-item" style="clear:left;"><input type="radio" class="form-radio validate[required]" id="input_19_0" name="q19_preference" value="Telephone" />
                  <label for="input_19_0"> Telephone </label></span><span class="clearfix"></span><span class="form-radio-item" style="clear:left;"><input type="radio" class="form-radio validate[required]" id="input_19_1" name="q19_preference" value="Skype (Instant Messenger)" />
                  <label for="input_19_1"> Skype (Instant Messenger) </label></span><span class="clearfix"></span>
              </div>
            </div>
          </li>
          <li class="form-line" id="id_21">
            <label class="form-label-left" id="label_21" for="input_21"> MESSAGE (optional) </label>
            <div id="cid_21" class="form-input">
              <textarea id="input_21" class="form-textarea" name="q21_messageoptional" cols="40" rows="5"></textarea>
            </div>
          </li>
          <li class="form-line" id="id_6">
            <div id="cid_6" class="form-input-wide">
              <div style="text-align:center" class="form-buttons-wrapper">
                <button id="input_6" type="submit" class="form-submit-button">
                  Submit
                </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="31644463187963" />
      <script type="text/javascript">
      document.getElementById("si" + "mple" + "_spc").value = "31644463187963-31644463187963";
      </script>
    </form>

     

    I look forward to hearing from you.

     

    Thanks,

    Cynthia

     

     

    Page URL:
    http://www.theangelchanneler.com/ReadingPromotions.html

    Screenshot
    form html payment form form class JotForm textarea checkbox
  • Profile Image

    Answered by jefreylandicho on June 14, 2013 at 01:11 PM

    The other script on your website might be causing a script conflict with the current embed form making the total amount not to work. Can you please try using IFRAME embed tag again then once you have embedded the form using IFRAME, please let us know so we can inject a Custom CSS that will show all the form or put the Embed form in a div e.g.

    <div id="myjotform">

    IFRAME EMBED CODE

    </div>

    then add this code in your CSS file

    #myjotform {

    z-index:999;

    }

    We are looking forward hearing your respons.