How to apply CSS into the form

Dear JotForm Support,

I’m experiencing an issue where custom CSS code is successfully entered in the Form Designer's CSS panel, but it does not visually apply to the corresponding field in the live form.

Specifically, I’ve applied the following CSS:

[data-css-selector="id_354"] {

border-width: 1px;

border-style: solid;

font-family: Helvetica;

font-size: 13px;

}

While the code appears correctly saved in the CSS panel, the styles are not being reflected on the live form. I have confirmed that the field ID is correct and that there are no conflicting styles overriding it.

Could you please help me troubleshoot why the styles are not being applied? Is there a limitation when using data-css-selector or do I need to use a different selector such as #id_354 instead?

Attached is a screenshot for your reference.

Thank you in advance for your assistance.

Best regards,

SAM

Hi SAM,

Thanks for reaching out to Jotform Support. You can add this CSS code to fix it. Let met show you how:

1. First, copy this CSS code:

#id_354,#id_347{

  border-width: 1px;

  border-style: solid;

  font-family: Helvetica;

  font-size: 13px;

}

2. Then, in Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box first line. That’s it. The code is automatically saved.

You can also check out our guide about How to Inject Custom CSS Codes for more information.

Check out this screenshot of my result:

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

Dear Jotform Support Team,

I have implemented the custom CSS code you provided, and it worked correctly at first. However, I noticed that after refreshing the page, the CSS no longer takes effect. It appears that the injected code is being removed or ignored upon reload.

To help illustrate the issue, I’ve attached a dynamic GIF showing what happens.

Could you please advise on why this might be occurring, and how I can ensure the custom CSS remains effective after saving and refreshing the form?

Thank you for your assistance.

Best regards,

Sam

Hi Sam,

I checked your form and see that the code have been removed. Let me show you how to fix it:

1. In Form Builder, click on the Paint Roller icon on the right, and click on the Styles tab.
2. Next, in your Inject Custom CSS box, paste the provided codes on line 1.
3. Then, scroll down to the bottom and remove the open CSS to prevent potential issues,
   

Here's the code just for your reference:

#id_354, #id_347 {

  border-width: 1px;

  border-style: solid;

  font-family: Helvetica;

  font-size: 13px;

}

Here's how it would appear as published:

Give it a try and let us know if you need any help.