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

    JotForm V4>>Widgets Custom CSS Area: quotes are not reading properly.

    Asked by allstarvacationhomes on January 20, 2017 at 06:25 PM

    I am using the font Open Sans on my form, but I am having trouble when declaring the font-family in the DateTime Single calendar widget CSS. The quotes in "Open Sans" are converted to " after I save my CSS changes.

    For example, I type this into the custom CSS box in the widget:

     

    input {

      font-family: "Open Sans", Arial, sans-serif;

    }

     

    but after saving, the widget converts this to:

     

    input {

      font-family: "Open Sans", Arial, sans-serif;

    }

     

    I have tried single and double quotes around the font name, and the widget doesn't seem to allow them in the CSS. Is there a way to fix this?

  • Profile Image
    JotForm Support

    Answered by Jim_R on January 21, 2017 at 03:02 AM

    You should import the Font first before you can use it on the Custom CSS section of the widget.

    Just append this line right at the top:

    @import url(http://fonts.googleapis.com/css?family=Open+Sans);

    Then use single quotes when declaring the font-family:

    font-family: 'Open Sans', sans-serif;

    Seeing that you managed to heavily customize the widget with CSS, I'll just assume you know where/how to make these changes.

    RESULT:

  • Profile Image

    Answered by allstarvacationhomes on January 24, 2017 at 09:36 AM

    Whether I use single or double quotes, the quotes are converted, and the style isn't read correctly. The @import line does not make a difference. I input single quotes around the font name, and the result is:

    font-family: 'Open Sans', sans-serif;

    I think there is a bug with widgets reading quotes in custom CSS.

  • Profile Image
    JotForm Support

    Answered by BDAVID on January 24, 2017 at 11:34 AM

    You are correct, there is a bug with the widget reading the quotes in custom CSS:

    \

    I have reported this to our back-end team. You will be updated via this thread when it gets fixed.

  • Profile Image
    JotForm Developer

    Answered by ceren on January 26, 2017 at 09:35 AM

    Hello allstarvacationhomes,

    Encoding problem related with custom css of widgets is fixed now. We're sorry for inconveniences.

    If you have any other questions please let us know.

  • Profile Image

    Answered by allstarvacationhomes on January 26, 2017 at 07:06 PM

    It hasn't been fixed. The quotes show properly in the custom CSS module, but the CSS is still not implemented correctly. If I look at the CSS through developer tools, I can see that the quotes are still not read properly. The font-family is the last line in the attached screenshot.

  • Profile Image
    JotForm Support

    Answered by BDAVID on January 26, 2017 at 09:06 PM

    Thanks for updating us. I have forwarded your findings t our developer. You will be notified via this thread when it gets fixed.