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

    Is It Possible to Use CSS to Target Various Elements of the Submissions Count Widget?

    Asked by Masalamedia on March 25, 2015 at 11:54 AM

    When you get the CSS designer tool to isolate the DIV for the Count Submissions Widget (no small feat - it doesn't seem to want to be selected) it doesn't correctly place the CSS labels in the editor window. This makes it impossible to alter key formatting issues like font color. My form background is dark so the default black text renders this widget unusable.

     

    ALSO there is a line break between the BEFORE label and the counter data; and there is another line break between the counter data and the AFTER text. How do we get rid of this unwanted line break?

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

    submissions count remove line break use css css for widget
  • Profile Image
    JotForm Support

    Answered by david on March 25, 2015 at 01:22 PM

    Hi,

    Since many of our widgets are loaded in to iFrames, they are not directly accessible in the form designer and CSS cannot be applied to them outside of the widget setup itself.  This happens to be one of those widgets.  The only customization available for it currently is the before and after text:

    I couldn't see the line breaks you were referring to:

    In any case, due to the limitations on the widget, I fear these also cannot be removed.

    If you have any further questions, let us know and we will be happy to help.

  • Profile Image

    Answered by Masalamedia on March 25, 2015 at 01:28 PM

    OK - wow, major bummer. But thanks for clarifying.

    The line break is that "41" is on a separate line from "submissions so far". 

    As noted I can't use this widget since it is invisible against my page design. I am sure you can understand the disappointment that an elementary task such as changing font color is unavailable.

     

  • Profile Image

    Answered by Ben on March 25, 2015 at 02:41 PM

    Our widgets team is working on making it possible to easy change the style and I presume that they want the widgets to be editable by Form Designer, but in the mean time, it is as mentioned by my colleague.

    The only thing that I would suggest is to (this is not a clean and nice way to resolve this) add a Text field and alter CSS to have it right under the text, with a transparent white color, which would allow the text to be more easy to read.

  • Profile Image

    Answered by Masalamedia on March 25, 2015 at 02:52 PM

    thanks for the suggested workaround... 

  • Profile Image

    Answered by raul on March 25, 2015 at 04:07 PM

    On behalf of my colleagues, you're welcome.

    Feel free to contact us again, should you require our assistance.
    Best Regards.

  • Profile Image

    Answered by chinathinksbig on November 07, 2015 at 09:47 AM

    a follow-up to this question: does this widget have the option to be hidden now?
  • Profile Image

    Answered by victor on November 07, 2015 at 12:50 PM

    To assist you better, I have created a new thread which will be answered shortly.

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

  • Profile Image
    JotForm Support

    Answered by abajan on November 07, 2015 at 02:46 PM

    @Masalamedia

    Just in case you were unaware, since our last reply to your questions the Submissions Count widget has been updated with a section where CSS can be used to style it:


    For example, the line break to which you referred was removed in this form. If you clone it you'll see the following CSS in the widget's settings:

    #text-before {
     margin-left: -8px;
     width: 200px;
     text-align: left;
    }

    #count {
     position: absolute;
     top: 8px;
     left: 177px;
     font-weight: bold;
     color: red;
    }

    Do inform us if you need further help with this.

    Thanks