Automating calculation with a Spreadsheet on form

  • HippoDaddy
    Asked on September 1, 2014 at 5:12 PM

    We can manually fill in the lines for description and dollar amounts.

    We want the form to manually calculate the total.

     

    How would we create a form ( start to finish including boxes and calculations )

    that looks like this with Jotform?

     

    Thank you....

     

     

    Jotform Thread 423378 Screenshot
  • Mike_T Jotform Support
    Replied on September 1, 2014 at 5:42 PM

    Thank you for contacting us.

    We can do something similar with a Spreadsheet widget on form.

    Example with two columns and auto total calculation:

    Automating calculation with a Spreadsheet on form Image 1 Screenshot 20

    Form:

    http://form.jotformpro.com/form/42436684102956

    You can also clone that form.

    In case you need to style it a bit more, open a new thread, and we will be happy to help.

  • HippoDaddy
    Replied on September 1, 2014 at 6:44 PM

    Still having problems with resizing... but the calculations are working great and I thank you.

    I would like the fields to have more space under the Description and a little less under the cost... is this possible?

    Thank you

    Automating calculation with a Spreadsheet on form Image 1 Screenshot 20

  • Kiran Support Team Lead
    Replied on September 1, 2014 at 8:16 PM

    Hello,

    Please add the following CSS code to Custom CSS of the spreadsheet widget.

    .A input {

    width:100% !important;

    }

    Automating calculation with a Spreadsheet on form Image 1 Screenshot 30

    This should give the view as shown in the screenshot below :

    Automating calculation with a Spreadsheet on form Image 2 Screenshot 41

    Hope this information helps. Please get back to us if you need further assistance. We are happy to help.

  • HippoDaddy
    Replied on September 1, 2014 at 10:13 PM

    Any way to add the decimal point with two numerals in the total?

     

    I would also like more space for the Service description.... making it almost as wide as the complete form. Lots of empty space to the left.

    Thank you.

     

    Automating calculation with a Spreadsheet on form Image 1 Screenshot 20

     

  • Ashwin JotForm Support
    Replied on September 1, 2014 at 11:55 PM

    Hello HippoDaddy,

    I am trying to work on your css requirement. Please allow some time and I will get back to you with the custom css code.

    Thank you!

  • kartmartaol
    Replied on September 14, 2014 at 5:21 PM

    I have been watching and waiting for a response on this for 13 days. Can i please have an update? Thank you for your help.

  • HippoDaddy
    Replied on September 14, 2014 at 6:04 PM

    Here is a link to the online form showing the empty space we are looking to use.

    We are looking for space to fill in the work description then a much smaller space for the dollar amount.

     

    http://mortanmankc.com/forms.html

     

    Thank you

  • Ashwin JotForm Support
    Replied on September 14, 2014 at 10:32 PM

    Hello,

    Please take a look at the following cloned form and see if this looks as expected where i have change the width of the widget to display a wider cells:  http://form.jotformpro.com/form/42568050362957? 

    It should display you the spreadsheet as displayed in the screenshot below:

    Automating calculation with a Spreadsheet on form Image 1 Screenshot 30

    I have added the following custom css code in the widget:

    div#spreadsheetContainer {

    width: 500px !important;

    }

    table {

    width: 500px;

    }

    tr.r1 {

    width: 350px !important;

    }

    .A input {

    width: 381px !important;

    }

    Please check the screenshot below on how to add the custom css code in the "Spreadsheet" widget:

    Automating calculation with a Spreadsheet on form Image 2 Screenshot 41

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!

  • HippoDaddy
    Replied on September 14, 2014 at 10:46 PM

    Much better. Thank you.

    Would still like the decimal to show up automatically if possible in both the cost column and the total area.

    Also , is it possible to move the "Service Description" to the left of the box?

    Here is the link....

    http://mortanmankc.com/forms.html

     

     

    Thank you.

  • Ashwin JotForm Support
    Replied on September 15, 2014 at 12:14 AM

    Hello,

    Would still like the decimal to show up automatically if possible in both the cost column and the total area.

    Unfortunately, it is not possible to display the decimal automatically. Currently if the input value in the cost section has decimal value, it will display the decimal. I am anyway moving this question to a new thread so that we can send a feature request to our back end team. You will be answered in the following thread:  http://www.jotform.com/answers/428743 

    Also , is it possible to move the "Service Description" to the left of the box?

    Please replace the existing custom css code with the following code:

    div#spreadsheetContainer {

    width: 500px !important;

    }

    table {

    width: 500px;

    }

    tr.r1 {

    width: 350px !important;

    }

    .A input {

    width: 381px !important;

    text-align: left !important;

    }

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • HippoDaddy
    Replied on September 15, 2014 at 2:07 PM

    This is what I get on the auto responder...

     

    Services [[" ","#","A","B"],[" ",1,"Service Description","Cost"],[" ",2,"Description line 1 test","250.00"],[" ",3,"Line description test 2","18.25"],[" ",4,"",""],[" ",5,"",""],[" ",6,"",""],[" ",7,"",""],[" ",8,"",""],[" ",9,"",""],[" ",10,"Total",268.25]]

     

    Any way to clean this up so it just shows the line and the amount?

     

    Thank you.

  • Kiran Support Team Lead
    Replied on September 15, 2014 at 3:17 PM

    Hello,

    I have moved the issue to a new thread and will be answered shortly.

    http://www.jotform.com/answers/429152

    Thank you.