JotForm User Guide / Advanced Features /

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


See all comments
  • robcabeca

    Hi I am trying to change the color of the input boxes. I have entered teh css codes as described in previous posts. But do i need to enter it for each box or is there a general css code that applys to all input boxes?
    Thank you!

  • Yodjii

    Is it also availabre with cards? I don't see the option. Thank you

  • rhellmich674

    I was wanting to change the font in a short text entry input field. The intent was for the submitter to type in their name with the font being a cursive font. Below is what I entered into the Inject Custom CSS . It does change the font, just not to a cursive script. Is there anything further that could be done? Thanks,

    #input_17 {
    font-family: Damion, cursive;

  • Brand_Station_Design

    Hi! Great job!

  • idika

    i want to change font color and grid colour

  • jrogers142

    Is this code all on one line or is it on 3 lines? I've pasted it in on one line and 3 lines with spaces and 3 lines without spaces but it did not move the questions to the right.

  • jborsukow

    can change some parts but not all here is what I have working.
    #coupon-button {
    width : 100px;

    #coupon-input {
    width : 200px;

    cant get the outside to change below
    .form-input-wide jf-required div {

    .undefined th {


  • wotco

    I'm trying to use Phone Element to receive the Mobile phone number in international format (with country code) which i don't need the "Area Code" field. how can i remove it or is there any other way to receive the mobile phone number in international format?

  • gcook1868

    My field id is #input_24. The field is a calculated total payment amount. My problem is that, when the amount is 27.50 (American currency), it displays 27.5. How can I make the number display with two decimal places?

  • jerryfisherpta

    worked great!! thank you!

  • chidiebereC

    i need a comment section form. pls do u guys offer such?

  • Mastergardener1

    I am trying to get the following information to center on these separate lines and it just is not doing it! Please help!!
    Saturday, March 24, 2018
    Cumberland County Extension Office
    Charlie Rose Agro-Expo
    Center Crown Coliseum Complex
    301 East Mountain Drive
    Fayetteville, NC 28306
    Please reply to as I am the one doing the form. Thanks!

  • Azitamous

    Thank you for the great framework.
    I was able to inject the new style to the css and save it. I am able to see the changes in my BUILD tab, however, when I publish the form and open it in new tab or embedded my custom css is not showing. I appreciate if you provide some advice.

    Thank you


  • TelmoPaixo

    Como colocar os 5 botões na mesma linha e um campo de escolha único. Por defeito a aplicação só me deixa colocar 4.

  • crawley_patrick

    In my form (Confidential Information Form) I have tried to change the font to Book Antiqua. I have followed the instructions and no changes are being reflected. Could you see what I have been doing wrong?

  • YGU

    I'm going to use your spreadsheet extension and I want to change the names of columns and rows, example
    A changed solo
    B changed to duets
    C changed into teams

    1 changed in number
    2 changed in number
    5 changed in total

    Can I do it?

    M Guillermin

  • barbwra

    I'm almost ready to go live with my form. Thanks for all your help! There's just one thing:

    In the middle of my page are three sets of check boxes. Each set has an Add button. When I preview the form at this link,, and click on an Add button, it simply shows what I already have there. I do not want this. Can I eliminate/hide the three Add buttons in the Checkbox sections? Thanks.

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


    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


    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?

  • 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


    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.


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

Browse Article by Topics