FORM HTML CODE NOT WORKING PROPERLY ON MY WEBSITE

  • Profile Image
    expat1uk
    Asked 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

     

     

  • Profile Image
    jefreylandicho
    Answered 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.