User Guide

 

How to Inject Custom CSS Codes

How to Inject Custom CSS Codes

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.

Send Comment

41 Comments...

  • MIWgroup

    I only have the following:
    palettes, themes, and custom

    No CSS is available in the tab.

    Where can I find CSS editor?

  • CheerfullyCreated

    I am trying to enlarge my images when hovering. I am not able to see the answers below. I do not have the CSS tab. I would appreciate any help that you can give!!

    Thank you in advance!

  • rodmor

    I need help, I cannot find the css control . The only options available are palette, themes and custom.

    I'm using the pastebin widget to display some diff files, howerver, I have two problems with it.
    First, it shows to scrollbars which is confusing for the user. Second, it is too small in the screen. I would like to resize it or decrease the size of the elements outside the widget to gain more space.

    Thanks for your support.

  • UnitedSpaHealth

    After more digging it seems that you don't get a CSS tab for "Single Question in One Page" type forms... How do you inject the css for these forms?

  • UnitedSpaHealth

    Hi! Trying to remove the header and blank space that's at the top from my forms. I see here that this can be done with injecting CSS, however with the new version it seems to not be an option? I only have the following tabs: palettes, themes, and custom

    Any ideas? Thanks!!

  • mmorsy2017

    Hi, i tried everything
    I can't change the font color from Black to other using any HEX color even.
    in Widget "Minimal Checkbox"

    need help

  • Farrah88

    Thank you.
    If I did it that way, it may make all the form go RTL, right?
    If so, then better make it that it's centered. That way it will look better for all language?
    What is the code to center it please?

  • rebeccamcgrane

    I only have the following tabs:
    palettes, themes, and custom

    CSS is not an available tab.

  • Jellfishygraphics

    I followed these directions and still no CSS option. Please help.

  • EDSONLEIDE

    Bom dia.

    Como faço para que o campo pagamento não seja obrigatório o seu preenchimento que que eu possa enviar o pedido sem preçisar por os dados do cartao do formulario no paypal ?

  • 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"

  • morraigan

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

  • 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?

  • 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?

  • 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!

  • 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

  • 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?

  • idan

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

  • milladesignmaccom

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

  • en32

    im still getting that white box.

  • 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

  • marlinnoir

    It works . Thanks

  • eiermann

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

  • addyann89

    Can I adjust the size of a specific column?

  • Kangsigit

    thank you.. this work 100%

  • 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/

  • Anne

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

  • robertmemeti

    Tried but not changed the form

  • 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"

  • sunnynanny

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

  • 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?

  • symphonicdist

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

  • kosirm

    Great example, thanks!!! Go Jotforms!

  • pari223

    Thank you so much

  • 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 :(

  • dilip

    h

  • 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

  • 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

  • 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 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

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