How do I put a submisssions counter on

  • Profile Image
    Asked on August 08, 2011 at 02:50 AM

    Is it possible to have a counter of the number of submissions received on my web page?

  • Profile Image
    Answered on August 08, 2011 at 03:03 AM

    Hi bouillon,

    Sorry but placing a submissions counter in your form is not possible with JotForm at the moment. But this feature could be of good use for a handful of JotForm members, so I'll include this feature request in our programming team's to do list.

    Please let us know if you have any other suggestions or concerns. Thank you for using JotForm!


  • Profile Image
    Answered on August 08, 2011 at 05:07 AM


    Although this feature is unavailable explicitly within our Form Builder, there is a workaround that can mimic the same function. Take a look at this sample form to see this workaround in action.

    Let me know if you are interested so I can lay down the steps I undertook to accomplish this feat. Also, feel free to open new threads for questions that are unrelated to the issue at hand.

    I will be awaiting your response. Thanks!


  • Profile Image
    Answered on August 08, 2011 at 05:36 AM

    Hi Thanks for the quick reply. Looks great please let me know how you did it.


    Glen Smith

    Description: online-email-logo

    Mob: 07949460183 (UK)
    P Before printing, think about the environment

  • Profile Image
    Answered on August 08, 2011 at 06:12 AM

    Hi Glen,

    First, you need to insert a unique ID field in your form. You can find it under the Power Tools section of the Form Builder.

    Name the ID to something like 'Products submitted' or 'Entries Submitted'.  This label will be displayed in the form as the title of the counter.

    Unique ID should start at zero the first time it is added to a form, meaning, previous entries will not be counted.

    Then, create an HTML Table report for your form:

    1.  Go to My Forms

    2.  Click on the specific form where you want the counter to appear

    3.  Click the Reports button in the toolbar then choose Add New Report

    4.  Choose HTML Table Listing from the options then click Next

    5.  Check only the Unique ID field to display on your report then click Next

    6.  Get the iFrame code for your report

    7.  Edit your form. Insert a Free Text HTML field in your form. This tool can be found under the Power Tools section as well

    8.  Click the HTML button in the toolbar then copy your report's iframe code. Change the height and min-height to 59px. You may adjust the width as well to your preferred value.

    9.  Copy and paste this code before your report's iframe code

    <div style="width: 100%; height: 100%; top: 0px; left: 0pt; position: absolute; z-index: 100;"></div>

    For example:

    10.  Save and test your form.


  • Profile Image
    Answered on August 15, 2011 at 07:03 AM

    Just included it on a site and it works well, thank you. Is there a way to stop it showing the scroll on the right hand side of the box? example

    Regards Glen

  • Profile Image
    Answered on August 15, 2011 at 07:27 AM


    Change scrolling="auto" to scrolling="no" in your report's iframe code embedded in the free text field. After saving your form, be sure to re-embed your form's codes in your site to update it since you are using Source embed method which does not update by itself.



  • Profile Image
    Answered on August 05, 2012 at 05:19 PM

    This works like a charm! Is there anyway to just extract the number in the field and not the white background and blue header? Basically, I would like to display a huge sized digit representing the number of signups. I was able to elimnate the padding via css but couldn't figure out how to get rid of all the rest (everything but the number). Is this possible?

  • Profile Image
    Answered on August 05, 2012 at 07:32 PM

    Hello emmanuelmoreno.  Unfortunately, since layouts of grid/HTML reports are not editable, what you're looking for is not possible.  Although if you wish to export your form in your website and use PHP, you can try creating an RSS report and create a counter that you can modify the layout of the counter.

    Here is a user guide of what I have in mind.  But instead of putting up limits, you can print the counter instead and let it appear on your web page.

    If you need further assistance, please let us know.

  • Profile Image
    Answered on August 05, 2012 at 08:37 PM

    @ emmanuelmoreno

    I tried expanding NeilVicente's work using the google spreadsheet integration. And this is the result

    This the form and the google spreadsheet . In the integrated google spreadsheet I simply added another column and publish that particular cell and embed it into the form.

    You can clone the form to see it how I did it.

    Hope this also help as an alternative option to what you  need.


  • Profile Image
    Answered on August 06, 2012 at 05:42 PM


    Thanks for the workaround. I tried to follow the guide and adapt it to my needs (print content only), but couldn't figure out how to get it to work. If you could be more specific that would be great.


    This seems to be a very good alternative. I was able to replicate your sample sheet (more or less). Just a couple of questions:

    1. How do I get rid of the spreadsheet title? This doesn't appear on your example

    2. How do I get rid of the "powered by google"? This doesn't appear on your example

    3. Any ideas on how I could grab just the cell content (i.e. the number only)? I read somewhere that if &bc=transparent is added to the url the background would be transparent, but I couldn't get it to work...

    See attached pic for what it looks like so far.


  • Profile Image
    Answered on August 06, 2012 at 08:13 PM


    Hi, please check this form. I made some changes to reflect the requirements you stated.

    If you cloned the form already, I am sure you have seen the content of the free text(html) field. It currently look like this:

    This is the code I got from google spreadsheet when I "publish" to the web the spreadsheet.


    The other iframe codes are what I got from the original form (by NeilVicente's), I just adjusted the iframe to fit in the 'cell' number only of the spreadsheet.

    Most of the formatting an work done on the 'cell' number counter are actually done on the spreadsheet end (size of font, bold, colors.. etc.).

    You can get the google doc "publish code" by using this steps:

    1. Go to google docs spreadsheet and open that spreadsheet that is integrated to the form. (in my sample is this )

    2. On the opened spreadsheet file, click on File menu, then Publish to the Web..


    3. A dialog box will open... (Please see image below for the details on the steps instead)


    4. The code you copied from the google spreadsheet should be pasted into the free text HTML field in the form. Please note that you only replace the "src" code, and try to retain the iframe codes.

    This is how the form now looks like


    I hope I was able to provide you a clearer instructions. Please inform us if you need further assistance on it.




  • Profile Image
    Answered on August 08, 2012 at 11:29 AM

    Thanks Jonathan! JotForm tech support rocks! I have never encountered another service with a support team willing and able to go so far outside of its own feature set /service scope, seriously.

    Although I couldn't get rid of the background, I was able to format it with a good amount of flexibility, so I think this will do.

    Just one last thing that I couldn't figure out regarding the CSS injection - any idea why my email input box and submit buttons (on first page of form) change width depending on the browser? I optimized for firefox but couldn't figure out how to keep it together with CSS in the other browsers... I'm also seeing weird borders around the counter in Chrome!

    Here's the link to the form

    Thanks again, much appreciated!

  • Profile Image
    Answered on August 08, 2012 at 05:16 PM

    On behalf of my colleague you are quite welcome! Thank you very much for such a positive feedback.

    You can try to set some exact size in pixels for your Text Boxes, by adding the following CSS to your form:

    .form-textbox {width: 260px !important;}

    Mentioned borders coming from the Google Spreadsheet CSS.

    If you have the access to that file you may try removing:


    border-bottom:1px #ccc solid;

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

  • Profile Image
    Answered on November 03, 2012 at 08:36 AM

    Hi there i have been trying to follow your tutorial to make a form that counts down on submission.

    I have got it to work but even though i have published submission with automatically when changes are made the publish URL does not seam to update untill i manually rebublich?

    any thoughts

    here is the google spread sheet

    here is the form

  • Profile Image
    Answered on November 03, 2012 at 09:48 AM



    This my shared spreadsheet

    I used your form as basis . If you submit this form, and check on the spreadsheet you will notice the 'balance' diminish from the original inventory number.

    I would like to inform you though on the counter that you see on the form's free text(HTML) field -- I have experience this before... for some reason which I do not know yet the cause, there is delay on the displayed number. It may have updated already on the spreadsheet, but you will not immediately see it reflect in real-time on the form html field. 

    You will know that it is working though, because if republish the spreadsheet, the number will get refreshed and updated too.

    Try to check later again the form.. see if the html displayed number will change/update.

    Hope this help you in anyway.