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

    Automating calculation with a Spreadsheet on form

    Asked by HippoDaddy on September 01, 2014 at 05: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....

     

     

    Screenshot
    create a form calculations auto calculation spreadsheet form
  • Profile Image
    JotForm Support

    Answered by Mike_T on September 01, 2014 at 05: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:

    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.

  • Profile Image

    Answered by HippoDaddy on September 01, 2014 at 06: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

  • Profile Image
    JotForm Support

    Answered by Kiran on September 01, 2014 at 08:16 PM

    Hello,

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

    .A input {

    width:100% !important;

    }

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

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

  • Profile Image

    Answered by HippoDaddy on September 01, 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.

     

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 01, 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!

  • Profile Image

    Answered by kartmartaol on September 14, 2014 at 05: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.

  • Profile Image

    Answered by HippoDaddy on September 14, 2014 at 06: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

  • Profile Image
    JotForm Support

    Answered by ashwin_d 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:

    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:

    Hope this helps.

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

    Thank you!

  • Profile Image

    Answered by HippoDaddy 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.

  • Profile Image
    JotForm Support

    Answered by ashwin_d 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!

  • Profile Image

    Answered by HippoDaddy on September 15, 2014 at 02: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.

  • Profile Image
    JotForm Support

    Answered by Kiran on September 15, 2014 at 03: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.