User Guide

How to Inject Custom CSS Codes

Last Update: September 12, 2017

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 icon.


2. Click on the CSS tab, and paste the code in the "Inject Custom CSS" area.


3. Make sure to click on the Save button.


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.

31 Comments...

  • springdaletravel

    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.

     
  • Plastersales

    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

     
  • Plastersales

    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

     
  • Plastersales

    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

     
  • GlobeTechnical

    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

     
  • dilip

    h

     
  • Arvin Denorte

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

     
  • pari223

    Thank you so much

     
  • kosirm

    Great example, thanks!!! Go Jotforms!

     
  • symphonicdist

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

     
  • Paulkt16

    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?

     
  • sunnynanny

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

     
  • p

    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"

     
  • robertmemeti

    Tried but not changed the form

     
  • Anne

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

     
  • Nicole Jones

    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/

     
  • Kangsigit

    thank you.. this work 100%

     
  • addyann89

    Can I adjust the size of a specific column?

     
  • eiermann

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

     
  • marlinnoir

    It works . Thanks

     
  • testtrust

    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

     
  • en32

    im still getting that white box.

     
  • milladesignmaccom

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

     
  • idan

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

     
  • jafferalhamad

    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?

     
  • ncfs

    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

     
  • Mark42

    Hi,

    I don't want to use Submit button but would like to have a normal html button on click of which I want to call a javascript function. But when I am changing the input type of Submit to "button" then the form validation stops working. Plz help!

     
  • BackdropCity

    is there a way to create a code so that when someone picks a date on a calendar it is not any less than 10 days from the current date? I want it to 'gray out' the options prior to 10 days before today. If not then can it display an error message if a date is picked too early?

     
  • bloomfieldknoble

    I am injecting CSS code to hide labels and do some minor formatting, but when embedding this form it doesn't seem to render the CSS?

     
  • morraigan

    I can't see the custom CSS option in new accounts any more. Have you removed it?

     
  • maryloi

    When I click the "Form Designer", I dont get the options as shown in the example. I only see "palettes themes custom" tabs. No "CSS"

     

Send Comment