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.
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 &quot; after I save my CSS changes.
For example, I type this into the custom CSS box in the widget:
font-family: "Open Sans", Arial, sans-serif;
but after saving, the widget converts this to:
font-family: &quot;Open Sans&quot;, 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?
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:
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.
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: &#039;Open Sans&#039;, sans-serif;
I think there is a bug with widgets reading quotes in custom CSS.
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.
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.
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.
Thanks for updating us. I have forwarded your findings t our developer. You will be notified via this thread when it gets fixed.