Advanced Form Designer: Comments preventing CSS styles from working

Hi,

After dozens of hours of troubleshooting, I’ve identified what appears to be a critical issue with how Jotform handles CSS comments in the form designer.

For demonstration purposes, here is a link to a simple, unmodified Jotform template along with a simplified CSS code block. Strangely, the CSS block only works if the comment directly above it is removed. This behavior contradicts widely accepted CSS standards, where comments should not interfere with the application of subsequent styles.

This issue significantly hampers the ability to debug and organize CSS in a maintainable way and may be affecting many users without their awareness.

I’d appreciate your help in investigating and confirming if this behavior is caused by malformed CSS or something on your end.

https://www.jotform.com/build/252338462628159/design

CG

/*This code block ONLY works if this comment is removed:*/

@media screen {

  #first_3, #last_3 {

 background-color: red !important;

 border: 2px solid yellow !important;

  

}

}

Hi jotformcom778,

Thank you for reaching out to Jotform Support. You mentioned that your CSS block only works if the comment directly above it is removed, which is unusual behavior compared to standard CSS handling.

Based on our knowledge, Jotform allows injecting custom CSS codes into forms, but this feature is supported only on Classic Forms, not on Card Forms. Comments in CSS normally should not interfere with the application of styles, so this behavior might be related to how the CSS is injected or interpreted within the Jotform environment.

If your CSS comments are causing issues, try to ensure the CSS syntax is correct and that comments are properly formatted (e.g., /* comment */). Sometimes, malformed comments or missing closing tags can cause the CSS to break.

Also, keep in mind that custom CSS added in the Styles tab may not work on some widgets because they are loaded inside iframes, which isolate their styles.

If you continue to experience this issue despite correct CSS syntax, it could be a specific behavior in the Jotform form designer. We recommend testing the same CSS code outside Jotform (in a simple HTML file) to confirm it works as expected, then adjusting your Jotform CSS accordingly.

Let us know if you need further assistance with CSS injection or troubleshooting your form’s styles.

Hi Mafe_M,

Thank you for your response and for taking the time to address the issue.

To clarify, the code block I provided contains standard and syntactically valid CSS. I’d appreciate it if you could please review that snippet directly and confirm whether you also believe the syntax is correct.

Additionally, I encourage you to visit the link I originally shared and confirm that:

1. The form in question is indeed a Classic Form, not a Card Form.
2. The CSS is placed in the form’s global Styles section, not within any widget or external container.

Given that this behavior appears to contradict how valid CSS should behave, it may point to an issue within Jotform’s CSS parser. I would be grateful if you could review this in more detail and let me know your thoughts.

Looking forward to your insights.

CG

Hi CG,

I tested the exact CSS snippet you shared on a cloned Classic Form, and it worked correctly even with the comment included. I've shared a screenshot of my results below for reference:

This suggests the issue is not a global bug with CSS comments but may be specific to the overall CSS in your form. I've listed possible causes below:

• A comment block above is left unclosed like /* … without */ which breaks all styles after it.
• A missing or extra curly bracket earlier in the CSS invalidates later blocks.
• Hidden or non-standard characters are introduced when copying code into the editor.

To confirm, you can try the following:

1. Move the media query with its comment to the very top of your CSS to see if it works there.
2. Manually retype the /* and */ markers in the editor to avoid invisible characters.
3. Review the rest of your CSS to ensure that all comment and bracket pairs are properly closed.

Since the snippet itself is valid and applies normally on cloned forms, the behavior points to a syntax or formatting issue higher up in your stylesheet.

Give it a try and let us know if you have any other questions.

Hi Kenneth,

Thanks so much for taking the time to try and replicate the issue and for responding. I use the Advanced Designer area to enter the CSS code. Can you tell me if that is where you entered the code block?

CG

Here is a .gif of what I am experiencing. The .gif is low resolution which may be hard to see.

Hi CG,

I cloned your form, and I also see that you’ve added your custom CSS through the Advanced Designer, and that's fine. You can also add the same CSS in the Form Designer under the Style tab and in the Inject Custom CSS section. Both options work the same way, so you can use whichever is easier for you. Let me show you how:

1. In Form Builder, click on the Paint Roller icon on the right side of the page.

2. In Form Designer menu, click on the Styles tab, and scroll down to Inject CSS Code box section. 

Check out the screencast below, showing that after adding a comment above the media query and testing it in live mode, the media query still works as expected:

Could you add a space between your comment and the media query and check if that helps? I’ve also cleared your form cache to fix any temporary loading issues.

You can also clone this demo form to your own account and see if that works for you.

Give it a try and let us know how it goes.

Hi Keenly,

Thanks but instead of entering the code block with comment in Styles -> Inject CSS Code screen could you please enter the code block with comment in the Advanced Designer screen?  

The Inject CSS Code box seems to work fine for me as it did for you, however Advanced Designer does not.  Adding a space between the comment and the media query does not resolve the issue and I have verified this behavior on (3) different bowsers and (2) different devices.

CG

Hi CG,

I tested a clone of your form and had the same issue, so I created a ticket and escalated this to our Developers. Although we don't know exactly when it'll be fixed, we’ll circle back to this thread when we have an update.

Thanks for your patience and understanding, we appreciate it.



Hi John,

Thanks so much for your help.

I have to admit, this was an especially frustrating one to track down. Working with nearly 300 lines of CSS across two forms, I found myself playing whack-a-mole as I made various additions, deletions, and edits, both to code blocks and comments. The real challenge was that some of the issues didn’t surface until days later, making it extremely difficult to isolate the cause. Never in a million years did I suspect a properly structured comment to be the culprit.

Just to expand on my initial post, the issue extends well beyond @media rules. I’ve also observed other valid CSS blocks including standard selector declarations and some animation-related syntax are also stripped from the Advanced Builder CSS editor after saving but only when directly preceded by a comment line.

Thanks for getting this on the radar.

CG

Hi CG,

Our Developers are on the case and doing their best to get this sorted quickly. We’ll update you as soon as we can.