JotForm User Guide / Advanced Features /

Customize Your Form Using Custom CSS Codes

Customize Your Form Using Custom CSS Codes

UPDATE: Let's create fantastic forms with Form Designer video course which allows you to generate beautiful form designs without knowledge of CSS!

First, you need to learn how to inject custom CSS on your form before you can start customizing your form using the CSS codes provided below.

Set a Background Image to the Page

.supernova {
background-image:url('http://www.site.com/image.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;}

Replace the URL with your background image.

Demo here


Make Page Background Transparent

.supernova {
background:transparent;
}

Remove the Spacing Around the Form

.jotform-form {
padding:0;
}

Make Form Background Transparent

.form-all {
background:transparent;
}

Change the Header Background Color
[data-type="control_head"]{background-color:#FFCC66;}


Change the Subheader Text Color
.form-subHeader {color:#2408FC !important;}


Change all the Sub Label Color
.form-sub-label {color:#FFCC66;}

Change the Yellow Highlight Effect Color
.form-line-active {background:#baffb9;}


Change the Form Required Star Color
.form-required {color: blue !important;}


Remove the Red Background on Error Messages
.form-line-error {background:transparent;}

Align Form to the Left
.form-all {margin:0;}
Preview Here

Instantly Create Two Column Layout on Shrunken Fields
.form-line-column {width: 50%;}.form-line-column:nth-child(even) {clear: left;}

Demohere

Make credit card fields in all payment integration mobile responsive

Copy the CSS codes here: http://pastebin.com/raw/UJV3nGf5

Demo here

If you can't find the CSS code you need for your form or if you need help with customizing your form, feel free to leave comments below.

Send Comment

93 Comments...

See all comments
  • mhowe479

    I have a form with an input table, with 6 columns numeric. Is there a way to limit it to only 1 numeric number per field?

  • Kpsforex

    KSP3344

  • larrywf

    Is there a CSS code that will take a numerical entry in a "Number" field or a field that has a numerical value that comes from a conditional calculation and add the dollar sign and a two place decimal? So an entry or calculation of 234 will appear as $234.00 or 234.3 as $234.30. Thanks.

  • portministries

    How can I make the multiple choice widget to insert numbers instead of a check mark? I'm trying to have it list number preference rather than selecting multiple options.

  • rodrigobritto

    Olá, Tudo bom ?

    Como faço para colocar as fotos do formulário no tamanho de 3x4 ?

    A ferramenta que utilizo deixa as fotos no tamanho que são enviadas, mas queria que no PDF gerado pelo Jotform a foto ficasse em 3x4 para que na mesma folha de PDF houvesse várias inscrições.

    Fico no aguardo.

    Desde ja agradeço a atenção

  • Jessmiles

    I have a form that contains Input Tables.
    Is it possible to use CSS to format these so that the data entered becomes 'wrapped' in the cells?
    i.e. rather than text being cut off because of the limitations on width, the information would flow into another line below & the cell would effectively by double-height.

  • RobertsLaw

    Is there a way using CSS in tables to specify the width of the text fields response?

  • Freesiachew

    How do I hide a column under Matrix Dynamique when form is submitted? I do not want to hide the whole field of this feature.

  • annefarleydatainteractive

    Hi - how do I change the question size on the radio button fields.
    I don't want the question to wrap around
    Example in Facilities Access Request Approval Form
    Thanks

  • VictorHugozr

    Necesito un código CSS para definir que un campo tenga un número máximo de caracteres

  • kellimcguinness

    When I changed the place holder text color, all but 2 boxes changed colors..how do i get the other 2 place holder texts the same color as all of the other ones?

  • SgtNSpy

    How do I make all the radio button tables the same size for the whole form?

  • Filippsidor

    hi do i add google geolocation, i got the css code from google but doesnt work when i fill out address it doesnt show the rest of correct address

  • javadudd

    Hi,
    Not sure if CSS codes are what I should be using.
    I'm looking to create a set number entry ie 1234#### where the # can be any number.
    It shouldn't prompt for the 1234 but if it doesn't fit that format it should reject the entry or clear what has been entered.

  • irmercado

    SALUDOS
    Como puedo filtrar respuestas de una lista desplegable a resultados especificos.
    Ejemplo: Elegir una provincia y que despliegue sus municipios

    Ej: Provincia Hermanas Mirabal =(Tenare, Salcedo, Villa Tapia)
    Duarte = ( San Fco, Castillo, Pimentel, Las Guaranas)

  • vnielson

    I am looking to change the layout of address field to be from
    #input_7_addr_line1, #input_7_addr_line2, #input_7_city, #input_7_state, #input_7_postal, #input_7_country
    to
    #input_7_addr_line1, #input_7_addr_line2, #input_7_city, #input_7_county, #input_7_state, #input_7_postal
    How would I make that change ?

  • Tara McWhite

    Hi, I can't see the custom CSS option in Form Designer. What am I doing wrong? https://www.dropbox.com/s/o0wdcd12yholrtn/Screenshot%202018-04-09%2008.54.28.png?dl=0

  • VCH_victoria

    Dear Jotform,
    I added the widget: Matrix Dinamique. I want to change the font of the letters and the size. Is there a code for this? I also want to change the size of the separation line in this widget. because it is bigger than all the other lines.

  • dlsnelson

    I am using a theme and I need to know how to increase the vertical space between a label and the input lines. I am new to all this! Would I enter the CSS code in the Form Designer....and what would that code look like? Also, I have 4 input tables with only one column for input. How can I make that column wider for the person inputing information. The input box allows for quite a bit of information, but I would like to see a larger box. I'm sorry I do not have screen shots. I'm new to my laptop and haven't quite figured out screen capture. Again, what would that code look like?

  • Joelemoine1

    I need a form that will get contact information for the clients and a description of the work to be preformed along with the amount to be paid and the method of payment with a space for contract dates and sisignatures

  • efraimd

    I would like to pre-fill the coupon code box with words, so that when the page loads it already has the code in the field. Is there a way to do this with css?

  • IRDA_DIRECTION

    Hello :)
    I need precision about the widget : Configurable List.
    I have too much requiered fields by row. Is it possible to show them on 2 lines because they appear out of the form...
    Thank you for you response !

  • alton

    Can I and how do I set up for a form that is multiple pages to auto fill a field such as full name on the top of every page once someone types it in the first page?

  • YFCHR

    How do I populate a field with a predetermined number? (for example 100%)

  • jackiekramer

    I agree to terms & conditions. *

    Can you please help me change the colors on this line? "I agree to" WHITE "terms & conditions." RED or another bright color (this is a hyperlink).

    Thank you!

    This is on my Floral Shoot & Edit Spree - La Conner

  • DQs

    How do I change the width of a date box to look smaller on the user end

  • mattg85

    How do I get rid of blank pages that occur when a condition is not met?

  • houacct

    Hi Team,
    I need help with popup in Text field which allows me to select values from list.
    below form I am trying to use popup in selection field and use in it.

    https://www.jotform.com/build/80067917185160

  • BLueList

    How do I chance the input table to allow for a client to enter in a percentage vs just checking the box?

  • canabird

    OH JUST SAY HOW TO INJECT THE EFFING IMAGE AND STOP BEING SO EVASIVE. OR IWE'LL GO ELSEWHERE THANKYOU

  • earthly

    I have chosen one of your themes for my form. My form is quite long. When I apply the theme on your website it looks great because the questions on my form scroll over the theme picture but when I go to my website the picture is totally distorted and stretched out as long as my form is so it looks terrible. Can you please tell me how to get the theme to look like it does in my domain.com website as it does on the JotForm website.

  • jguth

    Hey there,

    Looking to add the "Make Page Background Transparent" and "Make Form Background Transparent" tags but it doesn't seem to actually adjust the Lightbox embed.

    Is there something else we need to do or that we are missing?

  • ISAUEL

    Hi we are trying to create a table that has some columns using one type of input whilst some another (e.g. column 1 drop down, column 2 text, etc.). How is this possible?

  • MSMUwebmaster

    I'm trying to mimic a design from another site so I need a grey transparent border around my white form (with a photo back ground). I'm trying to make that boarder have a transparency of about 20% - I'm not sure how to do that with CSS on this form. Also, my border has a white hairline around it and I'm not certain why or how to remove it.
    https://form.jotform.com/72786676907173

    Can you help?
    KH

  • Sharlene916

    Hello, I need to to have css code to calculate the form submissions order form for payment

  • neenah71

    Hello,
    This form, https://form.jotform.com/10184333025, is giving me trouble. When in a field, that field highlights yellow making the text unreadable. I used the code below, but it didn't change anything. Is there a different code?
    .form-line-active {
    background:#738c89;
    }

  • Glovian

    Hello there,

    I'm a newbie of JotForm and CSS, just wonder if anyone can share tricks on how we can make use of CSS to swap the position of Print Form and Submit button so Print Form shows on the left of the Submit button? I'm open to ways of doing it so please kindly share how it can be done even if CSS is not the key to the solution.

    Thank you very much in advance.

    Regards,
    Glovian

  • rotarywstg

    Thanks for this article. I'd like to make the change the label in the terms and conditions widget but with no success.

    Tried variations of

    .label {
    font-weight : bolder;
    color: rgb(71, 71, 71);
    font-family: PT Sans Narrow, sans-serif;
    }

    but no luck.

  • floorcosts

    So with your CSS Form Designer, We can edit features of the widget, but can we add new ones?

    For example: I want to change where the input is positioned on the sliding pricing scale. I want to put the number at the top instead of at the bottom...

  • staceyvaughan

    On my theme there are border lines separting the fields and I'm trying to make them black instead of white (you can't even see them on my form) Any help would be much appreciated!

    https://form.jotform.us/71473464725158

  • Gregor

    Wie kann ich den Text vom "Submit" Button ändern?

  • CapitalElectric

    Using the configurable list widget, how do I make part of the list jump down to a new line instead of being too long for the screen?

    https://form.jotform.us/71436961099163

  • GinaW41hl

    Hi, can you tell me how to change the size of the font for the saved user input in the Matrix Dynamique widget? At the moment answers displayed after they Save and Add Row are very small. I want about 14 or 16pt and #ffffff . Thanks for your help.

  • ajp95

    I am trying to change the colour of the asterisk on my form as at present it is red on a red background. I have followed the instructions and managed to change it to white but it does not save the changes.

    Are you able to help?
    https://eu.jotform.com/build/70184336743356

  • oliverpowell

    Does anyone know how to change the list hover states of .form-autocomplete-list.

    I've managed to style a few things, but I'm finding it impossible to inspect a dropdown to figure out what style sheet it belongs to.

    It would be awesome if JotForm surfaced up all the hidden elements.

  • remman

    I have a Long Text Entry Element in my form. I want to change the background colour of THE TEXT ONLY to yellow. Please help!!

  • chefjeff

    Anyone have a suggestion to target product images and force them to stay open or at a specified height in the current collapse functionality? Thanks!

  • shadowcliff

    Is there CSS I can use to alter the matrix found under Survey tools? I am trying to increase the size of the text box. Thanks!

  • fittech

    Any help regarding safari css? y for is working good on chrome but when I open it in safari the field alignments got disturbed.

    How I add css for safari browser? Please tell with syntax.

  • klebe bh

    Very nice post you're sharing with us.

Browse Article by Topics