How to Inject Custom CSS Codes

Last Update: September 4, 2016

Jotform gives you a wide variety of ways to customize how a form is rendered. An example of customization can be found on this guide: Customize your Form using Custom CSS Codes. In this guide, you'll learn how to inject a custom CSS codes to the form.

Please follow the steps below:

1. In the form builder, click the Design button from the main toolbar:



2. Go to Inject CSS tab and then insert your custom CSS codes under Inject Custom CSS box:


3. Click the "Save Changes" button to save your form. 


Having difficulties with the custom CSS? Please let us know in the comment box below or heads up to our support forum and create a new post explaining your issue.


26 Comments...


   
springdaletravel (November 22, 2011 at 03:50 PM)

Is it possible to set up my custom css one time and have it apply for all of my forms? All of my forms are for the same web site and I would like for them to all follow the same css coding. If I could avoid putting it in on each form individually that would be extremely helpful.

View Answer


   
Plastersales (October 25, 2012 at 05:59 AM)

HI again
yeah where I have Plasterboard width 1200 and 1350 section, some of those sheet sizes are not available so I thought i would shade them in or I am open to other suggestions
Cheers

View Answer


   
Plastersales (October 25, 2012 at 06:12 AM)

Hi I have provided the below link for your interest, notice the different shades of colours in the boxes, I would like to be able to do that

http://www.how2plaster.com/pborder/pborder.htm

Kind regards Brett

View Answer


   
Plastersales (October 25, 2012 at 06:47 AM)

Hi Mate

You still with me, I was hoping to have this sorted by tonight. Let me know if wont another example of what I'm wanting to achieve

regards Brett

View Answer


   
GlobeTechnical (November 14, 2012 at 12:59 PM)

Hi Guys,
I'm just wondering whether injecting my own CSS code overwrites existing styles. for example, if I 'inject' some code for a particular class, do I have to copy all the existing styling for that class and include it in my injection? Or does your system look for the relevant class/ID/whatever and update it with the injected code?
Many thanks,
Leon

View Answer


   
dilip (January 31, 2013 at 05:41 AM)

h


   
Arvin Denorte (June 13, 2013 at 03:50 AM)

i did do this on my form http://www.jotform.com/answers/166743-How-to-remove-contact-form-border but it didnt do anything :(

View Answer


   
pari223 (November 04, 2013 at 10:55 AM)

Thank you so much


   
kosirm (January 23, 2014 at 11:33 AM)

Great example, thanks!!! Go Jotforms!


   
symphonicdist (January 29, 2014 at 05:24 PM)

Thanks for this! Is there a modified code for multiple scrolling text boxes?

View Answer


   
Paulkt16 (March 06, 2014 at 04:40 AM)

I've changed my title stlye color h1 using the following code:
h1 {
padding-top: 10px;
font-size: 200%;
color: #FF5C01;
font-weight: lighter;

Works ok in designer but not in preview or when embedded. Am I missing something obvious?

View Answer


   
sunnynanny (March 07, 2014 at 05:35 AM)

How to inject more codes? Just to make space between them or to use any specific symbol to divide them?

View Answer


   
p (September 22, 2014 at 09:47 AM)

can you change just one field rather than the form, i would like to encrease the font size of the answer in a "drop down"

View Answer


   
robertmemeti (December 16, 2014 at 09:29 AM)

Tried but not changed the form

View Answer


   
Anne (March 04, 2015 at 02:26 PM)

Don't know CSS codes......so I can't change the font size of my drop downs.

View Answer


   
Nicole Jones (May 24, 2015 at 12:55 PM)

Is there a code to make my form smaller when viewing on a mobile device? All the fields and boxes are overlapping each other when access on a mobile/

View Answer


   
Kangsigit (July 09, 2015 at 12:26 PM)

thank you.. this work 100%


   
addyann89 (August 27, 2015 at 11:46 AM)

Can I adjust the size of a specific column?

View Answer


   
eiermann (January 12, 2016 at 03:42 AM)

Is there a way to inject custom CSS code for multiple forms at once?

View Answer


   
marlinnoir (March 07, 2016 at 06:29 AM)

It works . Thanks


   
testtrust (March 07, 2016 at 01:27 PM)

Hi,

How do I change the color of tittle-texts and the phrase "Enter your address here" on the field?

I also need to add a small sample below the shape.

https://widgets.jotform.com/widget/autocompleted_address



Thanks

View Answer


   
en32 (March 22, 2016 at 12:37 PM)

im still getting that white box.

View Answer


   
milladesignmaccom (May 02, 2016 at 08:58 AM)

Hi, why can't I get this window? I get the "old" version I think, and its very small to work within ...

View Answer


   
idan (May 12, 2016 at 03:02 PM)

I insert css code to right to left, but the options are ok but not the question.
Can u help?
Tnx

View Answer


   
jafferalhamad (August 23, 2016 at 06:32 AM)

How to exclude some fields or widgets from the custom CSS codes you have entered?

In other words, If I have added some custom CSS codes, but I want them to apply on all fields and widgets except one or two, how is that possible?

View Answer


   
ncfs (September 12, 2016 at 05:51 PM)

The instructions above show an "Inject CSS" button or option, but I don't see that when I go to Designer. Am I missing something, doing it wrong, or does a system option need to be activated, etc??? Thanks, Mark

View Answer


Send Comment