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 could I create a custom calculator in my form?

    Asked by justsymphony on June 18, 2013 at 11:46 AM

    Hi there to jotform's admins,

     

    I have a form which uses the payment tool for credit card payment, but i would like too another payment to be calculated up in total in which will be done through bank transfer as my customers might not have credit card for payment so they have to do it locally with ATM machine to transfer the amount to my bank.

     

    I have set the order product with conditions so customers could choose to purchase 1 , 2 or even 3 different products at max. I have attached a image of it to show you guys. But is there anyway to allow you guys to try out my form so you guys could understand what i wanted? What i want is to be able to calculate the total of 1 product, 2 products or even 3 products selected with shipping method pricing as stated in the image.

    Great day to write this to you guys as i have seen that you guys are so efficient in helping people out with their problems.

     

    Thank you

    Javier

    Screenshot
    create JotForm purchase payment tool product
  • Profile Image

    Answered by sidharth_kch on June 18, 2013 at 12:07 PM

    @justsymphony

    Understood your requirement.

    It's not possible to do the calculation within the jotform editor. If you are okay to use your form's source code we can provide workaround with custom JS code.

    Please keep in mind that once you embed your form using source code embed method, any changes made to your form in JotForm editor will not be reflected in embedded form.

     

    So, please complete your form and then let us know. We will provide you the custom code.

    Thanks,

    Sidharth

  • Profile Image

    Answered by justsymphony on June 18, 2013 at 01:05 PM

    Hi Sidharth,

     

    Before i complete my form as i may have to make changes in between time for the form so i will ask this two questions.

    1. Is it possible to revert back the form to do changes within jotform editor and after that i re-embed the form to use the custom code that you guys with the newly updated changes in the form?

    2. Assuming it is not possible to revert back. So if i have to add new products including the product's category into my product drop down box, is it possible to do so for the payment tool product form as well as my own product drop down box by editing the source code itself? Because mainly i do not have much knowledge about coding and i do not wish to bother you guys all the time whenever i have to  add new products and seek source code again from you guys. 

    Thank you

    Javier

  • Profile Image

    Answered by sidharth_kch on June 18, 2013 at 01:58 PM

    @justsymphony

    Well yes if you need to add more products, you can do that only on JotForm editor and then we will have to merge the changes in the source code.

    Hope that clarifies your question.

    Thanks,

    Sidharth

  • Profile Image

    Answered by justsymphony on June 19, 2013 at 10:19 AM

    @Sidharth

     

    Thank you so much for your clarification and i will definately look forward to you guys helping me out with the source code. 

    When i have completed my form i will get back to you right over here. 

    Thumbs up to JotForm's supports.

    Thank you,

    Javier

  • Profile Image

    Answered by sidharth_kch on June 19, 2013 at 12:14 PM

    Hi Javier,

    Sure. Let us know whenever you are ready with your form and we will be happy to help you.

    Thanks,

    Sidharth

  • Profile Image

    Answered by justsymphony on June 26, 2013 at 04:54 AM

    Hi Sidharth,

     

    Sorry that it took some time to get it done as i need to key in properly with my product name so as not to have anything messed up.

    Anyway here is the source code:

     

    <script src="//cdn.jotfor.ms/static/jotform.js?3.1.920" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.setConditions([{"action":[{"field":"22","visibility":"Show"},{"field":"19","visibility":"Show"},{"field":"24","visibility":"Show"},{"field":"27","visibility":"Show"},{"field":"35","visibility":"Show"}],"index":"0","link":"Any","priority":"0","terms":[{"field":"23","operator":"equals","value":"Bank Transfer"}],"type":"field"},{"action":[{"field":"28","visibility":"Show"}],"index":"1","link":"Any","priority":"1","terms":[{"field":"23","operator":"equals","value":"Credit Card -- Not available at the moment **"}],"type":"field"},{"action":[{"field":"33","visibility":"Show"}],"index":"2","link":"Any","priority":"2","terms":[{"field":"24","operator":"isFilled","value":false}],"type":"field"},{"action":[{"field":"30","visibility":"Show"},{"field":"34","visibility":"Show"}],"index":"3","link":"Any","priority":"3","terms":[{"field":"33","operator":"isFilled","value":false}],"type":"field"},{"action":[{"field":"32","visibility":"Show"}],"index":"4","link":"Any","priority":"4","terms":[{"field":"34","operator":"isFilled","value":false}],"type":"field"}]);

       JotForm.init(function(){

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

          JotForm.description('input_23', 'Please select your payment method first, and you can select your product after that! <br /><br />Thank you!');

          $('input_35').hint('Example; 123-45678-9 , POSB Saving');

          JotForm.description('input_35', 'For tracking of payment purposes.');

          JotForm.description('input_22', 'Make payment to -- POSB Saving<br />(170-58762-6) .PLEASE ADD UP the product total and shipping feeExample: Product total: $19 + shipping method $1.50 = $20.50 <-- Total amount payable');

          productID = {"0":"input_28_1002","1":"input_28_1001"};

          JotForm.totalCounter({"input_28_1002":{"price":"19","quantityField":"input_28_quantity_1002_1"},"input_28_1001":{"price":"69","quantityField":"input_28_quantity_1001_2"}});

          JotForm.description('input_28', 'Please select your product and check if the check box is ticked and quantity being entered correctly.<br /><br />Thank you!');

       });

    </script>

    <link target="_blank" href="http://cdn.jotfor.ms/static/formCss.css?3.1.920" rel="nofollow" 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.920" rel="nofollow" />

    <style type="text/css">

        .form-label{

            width:100px !important;

        }

        .form-label-left{

            width:100px !important;

        }

        .form-line{

            padding-top:12px;

            padding-bottom:12px;

        }

        .form-label-right{

            width:100px !important;

        }

        .form-all{

            width:450px;

            color:#000000 !important;

            font-family:'Verdana';

            font-size:14px;

        }

        /* Injected CSS Code */

    .form-all { background: transparent !important;}

        /* Injected CSS Code */

    </style>

     

    <form class="jotform-form" action="http://submit.jotform.me/submit/31661421851449/" method="post" name="form_31661421851449" id="31661421851449" accept-charset="utf-8">

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

      <div class="form-all">

        <ul class="form-section">

          <li class="form-line" id="id_15">

            <label class="form-label-top" id="label_15" for="input_15">

              Name<span class="form-required">*</span>

            </label>

            <div id="cid_15" class="form-input-wide"><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="10" name="q15_name[first]" id="first_15" />

                <label class="form-sub-label" for="first_15" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="15" name="q15_name[last]" id="last_15" />

                <label class="form-sub-label" for="last_15" id="sublabel_last"> Last Name </label></span>

            </div>

          </li>

          <li class="form-line" id="id_17">

            <label class="form-label-top" id="label_17" for="input_17">

              E-mail<span class="form-required">*</span>

            </label>

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

              <input type="email" class=" form-textbox validate[required, Email]" id="input_17" name="q17_email" size="47" />

            </div>

          </li>

          <li class="form-line" id="id_21">

            <label class="form-label-top" id="label_21" for="input_21">

              Address<span class="form-required">*</span>

            </label>

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

              <table summary="" class="form-address-table" border="0" cellpadding="0" cellspacing="0">

                <tr>

                  <td colspan="2"><span class="form-sub-label-container"><input class="form-textbox validate[required] form-address-line" type="text" name="q21_address21[addr_line1]" id="input_21_addr_line1" />

                      <label class="form-sub-label" for="input_21_addr_line1" id="sublabel_21_addr_line1"> Street Address </label></span>

                  </td>

                </tr>

                <tr style="display: none;">

                  <td colspan="2"><span class="form-sub-label-container"><input class="form-textbox form-address-line" type="text" name="q21_address21[addr_line2]" id="input_21_addr_line2" size="46" />

                      <label class="form-sub-label" for="input_21_addr_line2" id="sublabel_21_addr_line2"> Street Address Line 2 </label></span>

                  </td>

                </tr>

                <tr>

                  <td width="50%" style="display: none;"><span class="form-sub-label-container"><input class="form-textbox validate[required] form-address-city" type="text" name="q21_address21[city]" id="input_21_city" size="21" />

                      <label class="form-sub-label" for="input_21_city" id="sublabel_21_city"> City </label></span>

                  </td>

                  <td style="display: none;"><span class="form-sub-label-container"><input class="form-textbox validate[required] form-address-state" type="text" name="q21_address21[state]" id="input_21_state" size="22" />

                      <label class="form-sub-label" for="input_21_state" id="sublabel_21_state"> State / Province </label></span>

                  </td>

                </tr>

                <tr>

                  <td width="50%" function zip(){var iterator=Prototype.K,args=$A(arguments);if(Object.isFunction(args.last())) iterator=args.pop();var collections=[this].concat(args).map($A);return this.map(function(value,index){return iterator(collections.pluck(index));});}><span class="form-sub-label-container"><input class="form-textbox validate[required] form-address-postal" type="text" name="q21_address21[postal]" id="input_21_postal" size="10" />

                      <label class="form-sub-label" for="input_21_postal" id="sublabel_21_postal"> Postal / Zip Code </label></span>

                  </td>

                  <td><span class="form-sub-label-container"><select class="form-dropdown validate[required] form-address-country" name="q21_address21[country]" id="input_21_country">

                        <option value="" selected> Please Select </option>

                        <option value="United States"> United States </option>

                        <option value="Afghanistan"> Afghanistan </option>

                        <option value="Albania"> Albania </option>

                        <option value="Algeria"> Algeria </option>

                        <option value="American Samoa"> American Samoa </option>

                        <option value="Andorra"> Andorra </option>

                        <option value="Angola"> Angola </option>

                        <option value="Anguilla"> Anguilla </option>

                        <option value="Antigua and Barbuda"> Antigua and Barbuda </option>

                        <option value="Argentina"> Argentina </option>

                        <option value="Armenia"> Armenia </option>

                        <option value="Aruba"> Aruba </option>

                        <option value="Australia"> Australia </option>

                        <option value="Austria"> Austria </option>

                        <option value="Azerbaijan"> Azerbaijan </option>

                        <option value="The Bahamas"> The Bahamas </option>

                        <option value="Bahrain"> Bahrain </option>

                        <option value="Bangladesh"> Bangladesh </option>

                        <option value="Barbados"> Barbados </option>

                        <option value="Belarus"> Belarus </option>

                        <option value="Belgium"> Belgium </option>

                        <option value="Belize"> Belize </option>

                        <option value="Benin"> Benin </option>

                        <option value="Bermuda"> Bermuda </option>

                        <option value="Bhutan"> Bhutan </option>

                        <option value="Bolivia"> Bolivia </option>

                        <option value="Bosnia and Herzegovina"> Bosnia and Herzegovina </option>

                        <option value="Botswana"> Botswana </option>

                        <option value="Brazil"> Brazil </option>

                        <option value="Brunei"> Brunei </option>

                        <option value="Bulgaria"> Bulgaria </option>

                        <option value="Burkina Faso"> Burkina Faso </option>

                        <option value="Burundi"> Burundi </option>

                        <option value="Cambodia"> Cambodia </option>

                        <option value="Cameroon"> Cameroon </option>

                        <option value="Canada"> Canada </option>

                        <option value="Cape Verde"> Cape Verde </option>

                        <option value="Cayman Islands"> Cayman Islands </option>

                        <option value="Central African Republic"> Central African Republic </option>

                        <option value="Chad"> Chad </option>

                        <option value="Chile"> Chile </option>

                        <option value="People's Republic of China"> People's Republic of China </option>

                        <option value="Republic of China"> Republic of China </option>

                        <option value="Christmas Island"> Christmas Island </option>

                        <option value="Cocos (Keeling) Islands"> Cocos (Keeling) Islands </option>

                        <option value="Colombia"> Colombia </option>

                        <option value="Comoros"> Comoros </option>

                        <option value="Congo"> Congo </option>

                        <option value="Cook Islands"> Cook Islands </option>

                        <option value="Costa Rica"> Costa Rica </option>

                        <option value="Cote d'Ivoire"> Cote d'Ivoire </option>

                        <option value="Croatia"> Croatia </option>

                        <option value="Cuba"> Cuba </option>

                        <option value="Cyprus"> Cyprus </option>

                        <option value="Czech Republic"> Czech Republic </option>

                        <option value="Denmark"> Denmark </option>

                        <option value="Djibouti"> Djibouti </option>

                        <option value="Dominica"> Dominica </option>

                        <option value="Dominican Republic"> Dominican Republic </option>

                        <option value="Ecuador"> Ecuador </option>

                        <option value="Egypt"> Egypt </option>

                        <option value="El Salvador"> El Salvador </option>

                        <option value="Equatorial Guinea"> Equatorial Guinea </option>

                        <option value="Eritrea"> Eritrea </option>

                        <option value="Estonia"> Estonia </option>

                        <option value="Ethiopia"> Ethiopia </option>

                        <option value="Falkland Islands"> Falkland Islands </option>

                        <option value="Faroe Islands"> Faroe Islands </option>

                        <option value="Fiji"> Fiji </option>

                        <option value="Finland"> Finland </option>

                        <option value="France"> France </option>

                        <option value="French Polynesia"> French Polynesia </option>

                        <option value="Gabon"> Gabon </option>

                        <option value="The Gambia"> The Gambia </option>

                        <option value="Georgia"> Georgia </option>

                        <option value="Germany"> Germany </option>

                        <option value="Ghana"> Ghana </option>

                        <option value="Gibraltar"> Gibraltar </option>

                        <option value="Greece"> Greece </option>

                        <option value="Greenland"> Greenland </option>

                        <option value="Grenada"> Grenada </option>

                        <option value="Guadeloupe"> Guadeloupe </option>

                        <option value="Guam"> Guam </option>

                        <option value="Guatemala"> Guatemala </option>

                        <option value="Guernsey"> Guernsey </option>

                        <option value="Guinea"> Guinea </option>

                        <option value="Guinea-Bissau"> Guinea-Bissau </option>

                        <option value="Guyana"> Guyana </option>

                        <option value="Haiti"> Haiti </option>

                        <option value="Honduras"> Honduras </option>

                        <option value="Hong Kong"> Hong Kong </option>

                        <option value="Hungary"> Hungary </option>

                        <option value="Iceland"> Iceland </option>

                        <option value="India"> India </option>

                        <option value="Indonesia"> Indonesia </option>

                        <option value="Iran"> Iran </option>

                        <option value="Iraq"> Iraq </option>

                        <option value="Ireland"> Ireland </option>

                        <option value="Israel"> Israel </option>

                        <option value="Italy"> Italy </option>

                        <option value="Jamaica"> Jamaica </option>

                        <option value="Japan"> Japan </option>

                        <option value="Jersey"> Jersey </option>

                        <option value="Jordan"> Jordan </option>

                        <option value="Kazakhstan"> Kazakhstan </option>

                        <option value="Kenya"> Kenya </option>

                        <option value="Kiribati"> Kiribati </option>

                        <option value="North Korea"> North Korea </option>

                        <option value="South Korea"> South Korea </option>

                        <option value="Kosovo"> Kosovo </option>

                        <option value="Kuwait"> Kuwait </option>

                        <option value="Kyrgyzstan"> Kyrgyzstan </option>

                        <option value="Laos"> Laos </option>

                        <option value="Latvia"> Latvia </option>

                        <option value="Lebanon"> Lebanon </option>

                        <option value="Lesotho"> Lesotho </option>

                        <option value="Liberia"> Liberia </option>

                        <option value="Libya"> Libya </option>

                        <option value="Liechtenstein"> Liechtenstein </option>

                        <option value="Lithuania"> Lithuania </option>

                        <option value="Luxembourg"> Luxembourg </option>

                        <option value="Macau"> Macau </option>

                        <option value="Macedonia"> Macedonia </option>

                        <option value="Madagascar"> Madagascar </option>

                        <option value="Malawi"> Malawi </option>

                        <option value="Malaysia"> Malaysia </option>

                        <option value="Maldives"> Maldives </option>

                        <option value="Mali"> Mali </option>

                        <option value="Malta"> Malta </option>

                        <option value="Marshall Islands"> Marshall Islands </option>

                        <option value="Martinique"> Martinique </option>

                        <option value="Mauritania"> Mauritania </option>

                        <option value="Mauritius"> Mauritius </option>

                        <option value="Mayotte"> Mayotte </option>

                        <option value="Mexico"> Mexico </option>

                        <option value="Micronesia"> Micronesia </option>

                        <option value="Moldova"> Moldova </option>

                        <option value="Monaco"> Monaco </option>

                        <option value="Mongolia"> Mongolia </option>

                        <option value="Montenegro"> Montenegro </option>

                        <option value="Montserrat"> Montserrat </option>

                        <option value="Morocco"> Morocco </option>

                        <option value="Mozambique"> Mozambique </option>

                        <option value="Myanmar"> Myanmar </option>

                        <option value="Nagorno-Karabakh"> Nagorno-Karabakh </option>

                        <option value="Namibia"> Namibia </option>

                        <option value="Nauru"> Nauru </option>

                        <option value="Nepal"> Nepal </option>

                        <option value="Netherlands"> Netherlands </option>

                        <option value="Netherlands Antilles"> Netherlands Antilles </option>

                        <option value="New Caledonia"> New Caledonia </option>

                        <option value="New Zealand"> New Zealand </option>

                        <option value="Nicaragua"> Nicaragua </option>

                        <option value="Niger"> Niger </option>

                        <option value="Nigeria"> Nigeria </option>

                        <option value="Niue"> Niue </option>

                        <option value="Norfolk Island"> Norfolk Island </option>

                        <option value="Turkish Republic of Northern Cyprus"> Turkish Republic of Northern Cyprus </option>

                        <option value="Northern Mariana"> Northern Mariana </option>

                        <option value="Norway"> Norway </option>

                        <option value="Oman"> Oman </option>

                        <option value="Pakistan"> Pakistan </option>

                        <option value="Palau"> Palau </option>

                        <option value="Palestine"> Palestine </option>

                        <option value="Panama"> Panama </option>

                        <option value="Papua New Guinea"> Papua New Guinea </option>

                        <option value="Paraguay"> Paraguay </option>

                        <option value="Peru"> Peru </option>

                        <option value="Philippines"> Philippines </option>

                        <option value="Pitcairn Islands"> Pitcairn Islands </option>

                        <option value="Poland"> Poland </option>

                        <option value="Portugal"> Portugal </option>

                        <option value="Puerto Rico"> Puerto Rico </option>

                        <option value="Qatar"> Qatar </option>

                        <option value="Romania"> Romania </option>

                        <option value="Russia"> Russia </option>

                        <option value="Rwanda"> Rwanda </option>

                        <option value="Saint Barthelemy"> Saint Barthelemy </option>

                        <option value="Saint Helena"> Saint Helena </option>

                        <option value="Saint Kitts and Nevis"> Saint Kitts and Nevis </option>

                        <option value="Saint Lucia"> Saint Lucia </option>

                        <option value="Saint Martin"> Saint Martin </option>

                        <option value="Saint Pierre and Miquelon"> Saint Pierre and Miquelon </option>

                        <option value="Saint Vincent and the Grenadines"> Saint Vincent and the Grenadines </option>

                        <option value="Samoa"> Samoa </option>

                        <option value="San Marino"> San Marino </option>

                        <option value="Sao Tome and Principe"> Sao Tome and Principe </option>

                        <option value="Saudi Arabia"> Saudi Arabia </option>

                        <option value="Senegal"> Senegal </option>

                        <option value="Serbia"> Serbia </option>

                        <option value="Seychelles"> Seychelles </option>

                        <option value="Sierra Leone"> Sierra Leone </option>

                        <option value="Singapore"> Singapore </option>

                        <option value="Slovakia"> Slovakia </option>

                        <option value="Slovenia"> Slovenia </option>

                        <option value="Solomon Islands"> Solomon Islands </option>

                        <option value="Somalia"> Somalia </option>

                        <option value="Somaliland"> Somaliland </option>

                        <option value="South Africa"> South Africa </option>

                        <option value="South Ossetia"> South Ossetia </option>

                        <option value="Spain"> Spain </option>

                        <option value="Sri Lanka"> Sri Lanka </option>

                        <option value="Sudan"> Sudan </option>

                        <option value="Suriname"> Suriname </option>

                        <option value="Svalbard"> Svalbard </option>

                        <option value="Swaziland"> Swaziland </option>

                        <option value="Sweden"> Sweden </option>

                        <option value="Switzerland"> Switzerland </option>

                        <option value="Syria"> Syria </option>

                        <option value="Taiwan"> Taiwan </option>

                        <option value="Tajikistan"> Tajikistan </option>

                        <option value="Tanzania"> Tanzania </option>

                        <option value="Thailand"> Thailand </option>

                        <option value="Timor-Leste"> Timor-Leste </option>

                        <option value="Togo"> Togo </option>

                        <option value="Tokelau"> Tokelau </option>

                        <option value="Tonga"> Tonga </option>

                        <option value="Transnistria Pridnestrovie"> Transnistria Pridnestrovie </option>

                        <option value="Trinidad and Tobago"> Trinidad and Tobago </option>

                        <option value="Tristan da Cunha"> Tristan da Cunha </option>

                        <option value="Tunisia"> Tunisia </option>

                        <option value="Turkey"> Turkey </option>

                        <option value="Turkmenistan"> Turkmenistan </option>

                        <option value="Turks and Caicos Islands"> Turks and Caicos Islands </option>

                        <option value="Tuvalu"> Tuvalu </option>

                        <option value="Uganda"> Uganda </option>

                        <option value="Ukraine"> Ukraine </option>

                        <option value="United Arab Emirates"> United Arab Emirates </option>

                        <option value="United Kingdom"> United Kingdom </option>

                        <option value="Uruguay"> Uruguay </option>

                        <option value="Uzbekistan"> Uzbekistan </option>

                        <option value="Vanuatu"> Vanuatu </option>

                        <option value="Vatican City"> Vatican City </option>

                        <option value="Venezuela"> Venezuela </option>

                        <option value="Vietnam"> Vietnam </option>

                        <option value="British Virgin Islands"> British Virgin Islands </option>

                        <option value="US Virgin Islands"> US Virgin Islands </option>

                        <option value="Wallis and Futuna"> Wallis and Futuna </option>

                        <option value="Western Sahara"> Western Sahara </option>

                        <option value="Yemen"> Yemen </option>

                        <option value="Zambia"> Zambia </option>

                        <option value="Zimbabwe"> Zimbabwe </option>

                        <option value="other"> Other </option>

                      </select>

                      <label class="form-sub-label" for="input_21_country" id="sublabel_21_country"> Country </label></span>

                  </td>

                </tr>

              </table>

            </div>

          </li>

          <li class="form-line form-line-column" id="id_23">

            <label class="form-label-top" id="label_23" for="input_23">

              Payment Method<span class="form-required">*</span>

            </label>

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

              <div class="form-single-column"><span class="form-radio-item" style="clear:left;"><input type="radio" class="form-radio validate[required]" id="input_23_0" name="q23_paymentMethod23" value="Bank Transfer" />

                  <label for="input_23_0"> Bank Transfer </label></span><span class="clearfix"></span><span class="form-radio-item" style="clear:left;"><input type="radio" class="form-radio validate[required]" id="input_23_1" name="q23_paymentMethod23" value="Credit Card -- Not available at the moment **" />

                  <label for="input_23_1"> Credit Card -- Not available at the moment ** </label></span><span class="clearfix"></span>

              </div>

            </div>

          </li>

          <li class="form-line form-line-column" id="id_35">

            <label class="form-label-top" id="label_35" for="input_35">

              Your Bank Account Number + Account type<span class="form-required">*</span>

            </label>

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

              <input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_35" name="q35_yourBank35" size="40" />

            </div>

          </li>

          <li class="form-line form-line-column form-line-column-clear" id="id_22">

            <label class="form-label-top" id="label_22" for="input_22"> Bank Transfer -- Read First ! </label>

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

              <textarea readonly="readonly" id="input_22" class="form-readonly form-textarea" name="q22_bankTransfer" cols="40" rows="6">* Hover Mouse over the Text Area *</textarea>

            </div>

          </li>

          <li class="form-line" id="id_19">

            <label class="form-label-top" id="label_19" for="input_19"> Shipping Method </label>

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

              <div class="form-single-column"><span class="form-radio-item" style="clear:left;"><input type="radio" class="form-radio" id="input_19_0" name="q19_shippingMethod" checked="checked" value="Registered Postage" />

                  <label for="input_19_0"> Registered Postage </label></span><span class="clearfix"></span>

              </div>

            </div>

          </li>

          <li class="form-line" id="id_24">

            <label class="form-label-top" id="label_24" for="input_24">

              Order Products<span class="form-required">*</span>

            </label>

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

              <select class="form-dropdown validate[required]" style="width:320px" id="input_24" name="q24_orderProducts">

                <option value="">  </option>

                <option value="[PhoneCover] HK FlipDiary (Black) -- $62.90"> [PhoneCover] HK FlipDiary (Black) -- $62.90 </option>

                <option value="[PhoneCover] HK FlipDiary (Baby Pink) --    $62.90"> [PhoneCover] HK FlipDiary (Baby Pink) -- $62.90 </option>

                <option value="[PhoneCover] HK FlipDiary (Hot Pink) -- $62.90"> [PhoneCover] HK FlipDiary (Hot Pink) -- $62.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Pink) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Pink) -- $39.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Blue) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Blue) -- $39.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Orange) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Orange) -- $39.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Green) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Green) -- $39.90 </option>

                <option value="[PhoneCover] Leather Wallet Big Face Kitty -- $27.90"> [PhoneCover] Leather Wallet Big Face Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Love heart Kitty -- $27.90"> [PhoneCover] Leather Wallet Love heart Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Angel Kitty -- $27.90"> [PhoneCover] Leather Wallet Angel Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Sitting Kitty -- $27.90"> [PhoneCover] Leather Wallet Sitting Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Chick Kitty -- $27.90 "> [PhoneCover] Leather Wallet Chick Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Go to School Kitty -- $27.90"> [PhoneCover] Leather Wallet Go to School Kitty -- $27.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (A) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (A) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (B) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (B) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (C) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (C) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (D) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (D) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (E) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (E) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (F) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (F) -- $8.90 </option>

                <option value="[Necklace] Sapphire Blue Crystal -- $19.90"> [Necklace] Sapphire Blue Crystal -- $19.90 </option>

                <option value="[Necklace] White Angel Crystal -- $19.90"> [Necklace] White Angel Crystal -- $19.90 </option>

                <option value="[Necklace] Lovey Charm -- $19.90"> [Necklace] Lovey Charm -- $19.90 </option>

                <option value="[Necklace] Creamy Yellow Crystal -- $19.90"> [Necklace] Creamy Yellow Crystal -- $19.90 </option>

                <option value="[Necklace] Cornell Red Crystal -- $19.90"> [Necklace] Cornell Red Crystal -- $19.90 </option>

                <option value="[Necklace] Emerald Crystal -- $19.90"> [Necklace] Emerald Crystal -- $19.90 </option>

                <option value="[Necklace] Fuchsia Crystal -- $19.90"> [Necklace] Fuchsia Crystal -- $19.90 </option>

                <option value="[Necklace] Heart Lock -- $19.90"> [Necklace] Heart Lock -- $19.90 </option>

                <option value="[Necklace] Persian Rose Crystal -- $19.90"> [Necklace] Persian Rose Crystal -- $19.90 </option>

                <option value="[Necklace] Sweet Apple -- $19.90"> [Necklace] Sweet Apple -- $19.90 </option>

              </select>

            </div>

          </li>

          <li class="form-line" id="id_27">

            <label class="form-label-left" id="label_27" for="input_27">

              Quantity<span class="form-required">*</span>

            </label>

            <div id="cid_27" class="form-input">

              <input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_27" name="q27_quantity" size="3" />

            </div>

          </li>

          <li class="form-line" id="id_33">

            <label class="form-label-top" id="label_33" for="input_33"> Order 2nd Products </label>

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

              <select class="form-dropdown" style="width:320px" id="input_33" name="q33_order2nd">

                <option value="">  </option>

                <option value="[PhoneCover] HK FlipDiary (Black) -- $62.90"> [PhoneCover] HK FlipDiary (Black) -- $62.90 </option>

                <option value="[PhoneCover] HK FlipDiary (Baby Pink) --    $62.90"> [PhoneCover] HK FlipDiary (Baby Pink) -- $62.90 </option>

                <option value="[PhoneCover] HK FlipDiary (Hot Pink) -- $62.90"> [PhoneCover] HK FlipDiary (Hot Pink) -- $62.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Pink) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Pink) -- $39.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Blue) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Blue) -- $39.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Orange) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Orange) -- $39.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Green) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Green) -- $39.90 </option>

                <option value="[PhoneCover] Leather Wallet Big Face Kitty -- $27.90"> [PhoneCover] Leather Wallet Big Face Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Love heart Kitty -- $27.90"> [PhoneCover] Leather Wallet Love heart Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Angel Kitty -- $27.90"> [PhoneCover] Leather Wallet Angel Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Sitting Kitty -- $27.90"> [PhoneCover] Leather Wallet Sitting Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Chick Kitty -- $27.90 "> [PhoneCover] Leather Wallet Chick Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Go to School Kitty -- $27.90"> [PhoneCover] Leather Wallet Go to School Kitty -- $27.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (A) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (A) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (B) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (B) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (C) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (C) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (D) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (D) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (E) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (E) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (F) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (F) -- $8.90 </option>

                <option value="[Necklace] Sapphire Blue Crystal -- $19.90"> [Necklace] Sapphire Blue Crystal -- $19.90 </option>

                <option value="[Necklace] White Angel Crystal -- $19.90"> [Necklace] White Angel Crystal -- $19.90 </option>

                <option value="[Necklace] Lovey Charm -- $19.90"> [Necklace] Lovey Charm -- $19.90 </option>

                <option value="[Necklace] Creamy Yellow Crystal -- $19.90"> [Necklace] Creamy Yellow Crystal -- $19.90 </option>

                <option value="[Necklace] Cornell Red Crystal -- $19.90"> [Necklace] Cornell Red Crystal -- $19.90 </option>

                <option value="[Necklace] Emerald Crystal -- $19.90"> [Necklace] Emerald Crystal -- $19.90 </option>

                <option value="[Necklace] Fuchsia Crystal -- $19.90"> [Necklace] Fuchsia Crystal -- $19.90 </option>

                <option value="[Necklace] Heart Lock -- $19.90"> [Necklace] Heart Lock -- $19.90 </option>

                <option value="[Necklace] Persian Rose Crystal -- $19.90"> [Necklace] Persian Rose Crystal -- $19.90 </option>

                <option value="[Necklace] Sweet Apple -- $19.90"> [Necklace] Sweet Apple -- $19.90 </option>

              </select>

            </div>

          </li>

          <li class="form-line" id="id_30">

            <label class="form-label-left" id="label_30" for="input_30">

              Quantity<span class="form-required">*</span>

            </label>

            <div id="cid_30" class="form-input">

              <input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_30" name="q30_quantity30" size="3" />

            </div>

          </li>

          <li class="form-line" id="id_34">

            <label class="form-label-top" id="label_34" for="input_34"> Order 3rd Products </label>

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

              <select class="form-dropdown" style="width:320px" id="input_34" name="q34_order3rd">

                <option value="">  </option>

                <option value="[PhoneCover] HK FlipDiary (Black) -- $62.90"> [PhoneCover] HK FlipDiary (Black) -- $62.90 </option>

                <option value="[PhoneCover] HK FlipDiary (Baby Pink) --    $62.90"> [PhoneCover] HK FlipDiary (Baby Pink) -- $62.90 </option>

                <option value="[PhoneCover] HK FlipDiary (Hot Pink) -- $62.90"> [PhoneCover] HK FlipDiary (Hot Pink) -- $62.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Pink) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Pink) -- $39.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Blue) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Blue) -- $39.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Orange) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Orange) -- $39.90 </option>

                <option value="[PhoneCover] EcoSkin Flip Diary (Green) -- $39.90"> [PhoneCover] EcoSkin Flip Diary (Green) -- $39.90 </option>

                <option value="[PhoneCover] Leather Wallet Big Face Kitty -- $27.90"> [PhoneCover] Leather Wallet Big Face Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Love heart Kitty -- $27.90"> [PhoneCover] Leather Wallet Love heart Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Angel Kitty -- $27.90"> [PhoneCover] Leather Wallet Angel Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Sitting Kitty -- $27.90"> [PhoneCover] Leather Wallet Sitting Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Chick Kitty -- $27.90 "> [PhoneCover] Leather Wallet Chick Kitty -- $27.90 </option>

                <option value="[PhoneCover] Leather Wallet Go to School Kitty -- $27.90"> [PhoneCover] Leather Wallet Go to School Kitty -- $27.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (A) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (A) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (B) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (B) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (C) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (C) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (D) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (D) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (E) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (E) -- $8.90 </option>

                <option value="[PhoneCover] Hello Kitty Hard Back Case (F) -- $8.90"> [PhoneCover] Hello Kitty Hard Back Case (F) -- $8.90 </option>

                <option value="[Necklace] Sapphire Blue Crystal -- $19.90"> [Necklace] Sapphire Blue Crystal -- $19.90 </option>

                <option value="[Necklace] White Angel Crystal -- $19.90"> [Necklace] White Angel Crystal -- $19.90 </option>

                <option value="[Necklace] Lovey Charm -- $19.90"> [Necklace] Lovey Charm -- $19.90 </option>

                <option value="[Necklace] Creamy Yellow Crystal -- $19.90"> [Necklace] Creamy Yellow Crystal -- $19.90 </option>

                <option value="[Necklace] Cornell Red Crystal -- $19.90"> [Necklace] Cornell Red Crystal -- $19.90 </option>

                <option value="[Necklace] Emerald Crystal -- $19.90"> [Necklace] Emerald Crystal -- $19.90 </option>

                <option value="[Necklace] Fuchsia Crystal -- $19.90"> [Necklace] Fuchsia Crystal -- $19.90 </option>

                <option value="[Necklace] Heart Lock -- $19.90"> [Necklace] Heart Lock -- $19.90 </option>

                <option value="[Necklace] Persian Rose Crystal -- $19.90"> [Necklace] Persian Rose Crystal -- $19.90 </option>

                <option value="[Necklace] Sweet Apple -- $19.90"> [Necklace] Sweet Apple -- $19.90 </option>

              </select>

            </div>

          </li>

          <li class="form-line" id="id_32">

            <label class="form-label-left" id="label_32" for="input_32">

              Quantity<span class="form-required">*</span>

            </label>

            <div id="cid_32" class="form-input">

              <input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_32" name="q32_quantity32" size="3" />

            </div>

          </li>

          <li class="form-line form-line-column" id="id_28">

            <label class="form-label-top" id="label_28" for="input_28"> My Products </label>

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

              <input type="hidden" name="simple_fpc" value="28" /><span class="form-product-item"><input class="form-checkbox" type="checkbox" id="input_28_1002" name="q28_myProducts[][id]" value="1002" />

                <label for="input_28_1002">

                  HK Necklace<span class="form-product-details"><b>

                      $<span id="input_28_1002_price">19.00</span>

                      SGD

                    </b></span>

                </label>

                <br />

                <br /><span class="form-sub-label-container"><select class="form-dropdown" name="q28_myProducts[special_1002][item_0]" id="input_28_custom_1002_0">

                    <option value="">  </option>

                    <option value="Red"> Red </option>

                    <option value="Blue"> Blue </option>

                    <option value="Green"> Green </option>

                    <option value="Black"> Black </option>

                    <option value="Magenta"> Magenta </option>

                  </select>

                  <label class="form-sub-label" for="input_28_custom_1002_0"> Color </label></span><span class="form-sub-label-container"><input type="text" size="3" onblur="if(!this.value)this.value=0" style="text-align:left; width:30px; padding-left:4px " value="1" class="form-textbox" name="q28_myProducts[special_1002][item_1]" id="input_28_quantity_1002_1" />

                  <label class="form-sub-label" for="input_28_quantity_1002_1"> Quantity </label></span></span>

              <br /><span class="form-product-item"><input class="form-checkbox" type="checkbox" id="input_28_1001" name="q28_myProducts[][id]" value="1001" />

                <label for="input_28_1001">

                  HK Flip Diary<span class="form-product-details"><b>

                      $<span id="input_28_1001_price">69.00</span>

                      SGD

                    </b></span>

                </label>

                <br />

                <br /><span class="form-sub-label-container"><select class="form-dropdown" name="q28_myProducts[special_1001][item_0]" id="input_28_custom_1001_0">

                    <option value="">  </option>

                    <option value="Black"> Black </option>

                    <option value="Baby Pink"> Baby Pink </option>

                    <option value="Hot Pink"> Hot Pink </option>

                  </select>

                  <label class="form-sub-label" for="input_28_custom_1001_0"> Color </label></span><span class="form-sub-label-container"><select class="form-dropdown" name="q28_myProducts[special_1001][item_1]" id="input_28_custom_1001_1">

                    <option value="">  </option>

                    <option value="Iphone 4/4s"> Iphone 4/4s </option>

                    <option value="Iphone 5"> Iphone 5 </option>

                    <option value="Samsung Galaxy S3"> Samsung Galaxy S3 </option>

                    <option value="Samsung Galaxy S4"> Samsung Galaxy S4 </option>

                  </select>

                  <label class="form-sub-label" for="input_28_custom_1001_1"> Device </label></span><span class="form-sub-label-container"><input type="text" size="3" onblur="if(!this.value)this.value=0" style="text-align:left; width:30px; padding-left:4px " value="1" class="form-textbox" name="q28_myProducts[special_1001][item_2]" id="input_28_quantity_1001_2" />

                  <label class="form-sub-label" for="input_28_quantity_1001_2"> Quantity </label></span></span>

              <br />

              <div style="border: 1px solid lightgray; padding: 5px; border-radius: 6px; width: 200px;">

                <table id="coupon-table">

                  <tr>

                    <th colspan="2" align="left"><span id="coupon-header">Enter coupon</span>

                    </th>

                  </tr>

                  <tr>

                    <td>

                      <input id="coupon-input" type="text" size="15" />

                    </td>

                    <td width="40%" style="text-align: center">

                      <img src="../images/ajax-loader.gif" id="coupon-loader" style="display:none" />

                      <button type="button" id="coupon-button" data-qid="input_28" value="">

                        Apply

                      </button>

                    </td>

                  </tr>

                  <tr>

                    <th colspan="2" align="left"><span id="coupon-message"></span>

                    </th>

                  </tr>

                </table>

              </div>

              <input id="input_28_coupon" type="hidden" name="coupon" />

              <br /><span class="form-payment-total"><b>

                  Total:&nbsp;<span>$<span id="payment_total">0.00</span>

                    SGD</span></span>

              </b>

            </div>

          </li>

          <li class="form-line" id="id_14">

            <label class="form-label-top" id="label_14" for="input_14"> Additional Requests </label>

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

              <textarea id="input_14" class="form-textarea" name="q14_additionalRequests" cols="40" rows="6"></textarea>

            </div>

          </li>

          <li class="form-line" id="id_13">

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

              <div style="margin-left:106px" class="form-buttons-wrapper">

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

                  Submit Order

                </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="31661421851449" />

      <script type="text/javascript">

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

      </script>

    </form>

  • Profile Image

    Answered by sidharth_kch on June 26, 2013 at 05:01 AM

    @justsymphony

    Sure I will check this.

    Request you to please copy your form's source code here: http://pastie.org/

    Thanks,

    Sidharth

  • Profile Image

    Answered by justsymphony on June 26, 2013 at 05:09 AM

    Ok Sidharth.

     

    I have copied to the url that you provided. So do i need to do anything else from here?

     

    Thank you!

  • Profile Image

    Answered by sidharth_kch on June 26, 2013 at 05:22 AM

    @justsymphony

    Please change the language from dropdown to "HTML / XML". When you copy your code in pastie.org and click the button "Create Paste", you will see the url is changed. You need to copy the url and send it to me.

    Thanks,

    Sidharth

  • Profile Image

    Answered by justsymphony on June 26, 2013 at 04:16 PM

    Ok Sidharth

    Sorry for the long wait. Here is the url http://pastie.org/8083711

    Thank you

  • Profile Image

    Answered by sidharth_kch on June 26, 2013 at 04:42 PM

    @justsymphony

    Okay I will have a look and get back to you if I have any questions.

    Thanks,

    Sidharth