Simple calculated fields

  • Profile Image
    cfranson
    Asked on July 05, 2012 at 04:14 PM

    I know that you stiil don't have a fully functional calculated fields option, but I just need a very simple calculator. I sell two items as fundraisers.  One item is $5 and one Item is $10.  So I guess I would need the two calculators unless you have a more elegant solution.

    Is this something that you can manufacture for me?  CSS?  If you can manage it I would be very grateful.  Thanks for your time.

    Carl

     

    If you sell  Items x $5.00 =  dollars earned.   

    If you sell  Items x $10.00 =  dollars earned.   

    Total dollars   earned. 

  • Profile Image
    cfranson
    Answered on July 05, 2012 at 04:24 PM

    that didn't paste quite right.  Try this again.

     

    If you sell <input field> items X $5 = <calculated field> dollars earned.

    If you sell <input field> items X $10 = <calculated field> dollars earned.

    <calculated field> total dollars earned.

    <calculate submit button>

  • Profile Image
    cfranson
    Answered on July 05, 2012 at 05:58 PM

    I was able to create an acceptable form using the Purchase Order format.  Thanks anyway!

    Carl

  • Profile Image
    Mike_T
    Answered on July 05, 2012 at 06:56 PM

    Hello Carl,

    We are happy to hear that you have found a nice work around :) We have plans to add the standalone calculation feature at some point in the future.

    Thank you for using our services.

  • Profile Image
    cfranson
    Answered on July 05, 2012 at 07:19 PM

    Hi Mike,

    I do have another question.  Why are my questions winking out when I mouse over them.

    I'm using iweb and Safari.  Here is the link.

    http://www.outlawsalsa.com/OutlawSalsa/Fundraising_Tools.html

  • Profile Image
    Mike_T
    Answered on July 05, 2012 at 07:34 PM

    This is coming from default form CSS. You may change hover color for .form-product-item class by injecting custom CSS:

    .form-product-item:hover {
    color: white;
    }

    Here you can find some more information about color value.

    Please feel free to contact us if you need any further assistance.

  • Profile Image
    cfranson
    Answered on July 05, 2012 at 07:42 PM

    Hey Mike, that's great.  I changed it to red so it doesn't change at all when moused over.  Now you can show me how to change the font color for the dollar amount in the toal amount I'd be really pleased.

    Thanks again for your help!

  • Profile Image
    Mike_T
    Answered on July 05, 2012 at 08:41 PM

    You can use the following CSS to set the yellow color for needed span:

    .form-payment-total span {color: yellow;}

    You are quite welcome!

  • Profile Image
    cfranson
    Answered on July 09, 2012 at 11:36 AM

    Thanks again for your help Mike.  I have one further question.  Is it possible to change the label "Total"  to something like "Your total Profit"?

    Thanks

  • Profile Image
    pinoytech
    Answered on July 09, 2012 at 11:49 AM

    Hi,

    Yes, that is possible. All you need to do is, "Edit" your form source code then change the label "Total" to "Your Total Profit".

    <script src="//www.jotform.com/min/g=jotform?3.0.3707" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init(function(){

          JotForm.totalCounter({"input_1_1001":{"price":"3","quantityField":"input_1_quantity_1001_0"},"input_1_1002":{"price":"5","quantityField":"input_1_quantity_1002_0"}});

          JotForm.highlightInputs = false;

       });

    </script>

    <link target="_blank" href="http://www.jotform.com/min/g=formCss?3.0.3707" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" target="_blank" href="http://www.jotform.com/css/styles/nova.css?3.0.3707" />

    <style type="text/css">

        .form-label{

            width:150px !important;

        }

        .form-label-left{

            width:150px !important;

        }

        .form-line{

            padding-top:12px;

            padding-bottom:12px;

        }

        .form-label-right{

            width:150px !important;

        }

        .form-all{

            width:490px;

            background:#000000;

            color:#FF0026 !important;

            font-family:'Helvetica';

            font-size:14px;

        }

        .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{

            color:#FF0026;

        }

     

        /* Injected CSS Code */

    .form-product-details b {

    color: yellow;

    font-size:16px;

    font-style: italic;

    }

    .form-product-item:hover {

    color: #FF0026;

    }

    .form-payment-total span {color: yellow;

    font-size:16px;

    font-style:italic;

    }

        /* Injected CSS Code */

    </style>

     

    <form class="jotform-form" action="http://www.jotform.com/submit.php" method="post" name="form_21866121573958" id="21866121573958" accept-charset="utf-8">

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

      <div class="form-all">

        <ul class="form-section">

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

            <label class="form-label-top" id="label_1" for="input_1"> Estimate # of Units Your Group Will Sell </label>

            <div id="cid_1" class="form-input-wide"><span class="form-product-item"><input class="form-checkbox" type="checkbox" id="input_1_1001" name="q1_estimate1[][id]" value="1001" />

                <label for="input_1_1001">

                  # of Pints sold @ Profit Per Unit of<span class="form-product-details"><b>

                      $<span id="">3.00</span>

                      USD

                    </b></span>

                </label>

                <br />

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

                    <option value="10"> 10 </option>

                    <option value="20"> 20 </option>

                    <option value="30"> 30 </option>

                    <option value="40"> 40 </option>

                    <option value="50"> 50 </option>

                    <option value="60"> 60 </option>

                    <option value="70"> 70 </option>

                    <option value="80"> 80 </option>

                    <option value="90"> 90 </option>

                    <option value="100"> 100 </option>

                    <option value="110"> 110 </option>

                    <option value="120"> 120 </option>

                    <option value="130"> 130 </option>

                    <option value="140"> 140 </option>

                    <option value="150"> 150 </option>

                  </select>

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

              <br /><span class="form-product-item"><input class="form-checkbox" type="checkbox" id="input_1_1002" name="q1_estimate1[][id]" value="1002" />

                <label for="input_1_1002">

                  # of Quarts sold @ Profit Per Unit of<span class="form-product-details"><b>

                      $<span id="">5.00</span>

                      USD

                    </b></span>

                </label>

                <br />

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

                    <option value="10"> 10 </option>

                    <option value="20"> 20 </option>

                    <option value="30"> 30 </option>

                    <option value="40"> 40 </option>

                    <option value="50"> 50 </option>

                    <option value="60"> 60 </option>

                    <option value="70"> 70 </option>

                    <option value="80"> 80 </option>

                    <option value="90"> 90 </option>

                    <option value="100"> 100 </option>

                    <option value="110"> 110 </option>

                    <option value="120"> 120 </option>

                    <option value="130"> 130 </option>

                    <option value="140"> 140 </option>

                    <option value="150"> 150 </option>

                  </select>

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

              <br />

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

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

                    USD</span></span>

              </b>

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

      <script type="text/javascript">

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

      </script>

    </form>

    Hope you find this helpful and if you need further assistance, feel free to contact us again anytime.

    Thank you!