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

    Can someone provide a calculator workaround on Jotform?

    Asked by izen on May 23, 2013 at 11:35 AM

    Hi, I have been trying to find some way to have a calculator using Jotform on my wordpress site. I found some good examples in the forum esp. on http://www.jotform.com/answers/142218-Customized-Order-Form-to-calculate-total-sum, but being a non-techie, I could not make it work as intended on my wordpress page.

    Can someone help me with a workaround using source code option. My form is linked below which I'll be pasting as an iframe on my wordpress page.

    http://form.jotformpro.com/form/30533454016950

    I want the user to fill in fields A, B, C & D, and then calculated results should show up immediately on fields E, F & G in a larger font size(5) - where...

    E= B * C

    F= E * D / 100

    G= F * 12

    Look forward to your support... Thanks a ton

     

    Page URL:
    http://form.jotformpro.com/form/30533454016950

    JotForm workaround size source font size
  • Profile Image
    JotForm Support

    Answered by abajan on May 23, 2013 at 11:53 AM

    Not making any promises but I'll see if I can come up with a script by sometime later today. (My internet connection has been a bit intermittent lately.)

  • Profile Image

    Answered by izen on May 23, 2013 at 12:36 PM

    Thanks for the quick response, will wait...

  • Profile Image
    JotForm Support

    Answered by abajan on May 23, 2013 at 07:20 PM

    I have a script for this but I'm just trying to tweak it a bit.

  • Profile Image
    JotForm Support

    Answered by abajan on May 23, 2013 at 11:12 PM

    Hi again

    Please test this demo and let us know if its functionality acceptable. If it is, the tricky part may be getting the solution to work in WordPress but we'll cross that bridge when we get to it.

    Thanks

  • Profile Image

    Answered by izen on May 24, 2013 at 02:15 PM

    Hi, thanks a lot. The calculation works like a breeze, and I liked the bigger font size for the results fields. I tried sending the form, but didn't work - possibly you had not integrated the same. Now how can I get this code to move into my original form? I hope I'll be able to change the other fields(outside the calculator) Please let me know the next step, as I want to paste this into wordpress to test.

    Your help is much appreciated. Thanks :)

  • Profile Image

    Answered by jeanettebmz on May 24, 2013 at 03:29 PM

    I am very glad to see Abajan's workaround was of your satisfaction. He surely will follow up to provide you with a solution to your queston .

    Like he said, the tricky part of this is to make the solution work in wordpress

  • Profile Image
    JotForm Support

    Answered by abajan on May 25, 2013 at 05:12 PM

    Hi again izen

    The reason nothing appeared to happen when the form was sent was because the form only had a notification and no autoresponder at the time. Since the submission was made via my clone, the notification instead of you. If you were to make a submission via the demo now, an autoresponse should show up in your inbox.

    As to applying the solution to your own form, if it were just a regular non-WordPress page, you could do the following:

    1. Load the form into the form builder and delete the [E], [F] and [G] fields and replace them with just regular text boxes with the same labels

    2. Replace the form's current injected CSS with the following:

    #input_19, #input_20, #input_21 {
    width: 120px !important;
    height: 25px;
    font-size: 20px;
    }

    (The IDs in the selector might need to be changed. Please see this guide)

    3. Save the form

    4. Copy the source code of the form and paste it into the body of your web page

    5. Copy this code and paste it into the same web page, anywhere after the form's code but preferably right at the end, just before the page's closing body and html tags, as you'll see in the demo's source. (If the IDs needed to be changed in step 2 above, the last three variable definitions in this code would need to be changed to match those IDs.

    6. Save the web page changes

    (Alternatively, you could omit steps 1 to 3 and clone my form. That way, there would be no need to change anything in the script. This is probably the better option since your current form has no submissions.)

    However, as we've previously mentioned, getting this solution to work in a WordPress page could prove challenging. Give me till Monday to see what I can come up with.
  • Profile Image
    JotForm Support

    Answered by abajan on May 25, 2013 at 05:19 PM

    In the first paragraph of my last reply, I meant to state that since the submission was made via my clone, the notification went to me instead of you.

  • Profile Image

    Answered by izen on May 27, 2013 at 04:02 PM

    Thanks, I will try this and update tomorrow.

  • Profile Image
    JotForm Support

    Answered by jonathan on May 27, 2013 at 05:55 PM

    @Krishna,

    Hi, it seems you have created 2x post about the same topic. The other one is here.

    http://www.jotform.com/answers/215057-How-can-I-get-calculation-done-on-this-form#13

    May I suggest we use one only... let us use this one with Wayne's (Abajan) solution on it.

    I have closed the other post.

    Thanks.

  • Profile Image

    Answered by izen on June 12, 2013 at 03:41 AM

    Hi, I just found about the Wordpress Plugin launch on Jotform.

    I had changed my form labels a bit - leaving the calculator fields - which can be seen here...

    http://jotformpro.com/form/30533454016950

    Will it be possible now for this form with calculator to be used on wordpress?

     

  • Profile Image
    JotForm Support

    Answered by abajan on June 12, 2013 at 06:14 AM

    Hi izen

    Unfortunately, that plugin can only be used to embed forms directly from JotForm. Our team will try to devise a workaround for you, but we can't promise anything.

    On the other matter (changes made to the form), in order for my script to work, the "Total Value of Intermediary Bookings", "Profit Loss per Month" and "Profit Loss per Year" fields would need to be changed to just plain text boxes, like those in my demo.

    Thanks

  • Profile Image

    Answered by billylevine2003gmailcom on August 29, 2013 at 08:13 AM

    this would seem to work for me if I want to calucaty total $ for qty and price which are inputed

     

    How do I incorporate the calculation into jotforms

  • Profile Image
    JotForm Support

    Answered by abajan on August 29, 2013 at 08:40 AM

    @billylevine2003gmailcom

    Could you please open a new thread, identify the form to which you are referring and elaborate on what you wish to accomplish?


    Thanks