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;}

Demo here

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

137 Comments...

See all comments
  • mahmo2014

    How a multiple choice calculation works؟
    thanks

  • lsgphilanthropy

    How do I change the color of a widget spreadsheet?

  • Cristian bello cruz

    Hey there I was wondering is it possible to us html5 , and, css , on jotform

  • Kathryn

    Hi I would like to know how to change the CSS code so I can change the date format to be dd-mm-yyyy as I am in Australia

  • Tara_Bee

    I have 2 fields with check boxes. I would like them to all be available to check if need be. I don't know how to do this. Can you guide me plz?

  • bondapp147

    Hi

    I'm using the following for my radio buttons:


    input[type=radio].form-radio {
    display : none;
    }

    input[type=radio].form-radio + label {
    padding-left : 26px;
    height : 22px;
    display : inline-block;
    line-height : 22px;
    background-repeat : no-repeat;
    background-position : 0 0;
    font-size : 17px;
    vertical-align : middle;
    cursor : pointer;
    }

    input[type=radio].form-radio:checked + label {
    background-position : 0 -21px;
    }

    input[type=radio] + label {
    background-image : url(https://shots.jotform.com/elton/radio_flat.png);
    -webkit-touch-callout : none;
    -webkit-user-select : none;
    -khtml-user-select : none;
    -moz-user-select : none;
    -ms-user-select : none;
    user-select : none;
    }

    I also have a multiple choice question that I would like to style the same way, can you please assist?

  • bhuck1208

    I uploaded an image and it just repeats down the page. How can I change the height of the image, so that it is only 1 image on the page

  • deannat1967

    How do I change the color of input table itself and the font color in the table?

  • Boosterbiz.club

    What is the best technique to combine 2 sections of page breaks into one?
    Example:
    Back and Next in this css are stacked vertically. Desired outcome is to have them side by side on this one page form in a manner like is on the card forms.

    .form-pagebreak-next {
    background : #00c7d6 !important;
    text-align : center !important;
    border-radius : 40px !important;
    color : #fff !important;
    text-shadow : 0 0 !important;
    box-shadow : 0 0 0 transparent !important;
    border : 1px !important;
    border-color : #00c7d6 !important;
    text-shadow : 0 0 0 transparent !important;
    }

    .form-pagebreak-next:hover {
    background : #0095a0 !important;
    color : #fff;
    }

    .form-radio-item label, .form-checkbox-item label {
    display : inline!important;
    }

    .form-submit-button {
    background : #00c7d6 !important;
    text-align : center !important;
    border-radius : 40px !important;
    color : #fff !important;
    text-shadow : 0 0 !important;
    box-shadow : 0 0 0 transparent !important;
    border : 1px !important;
    border-color : #00c7d6 !important;
    text-shadow : 0 0 0 transparent !important;
    width : 150px !important;
    }

    .form-submit-button:hover {
    background : #0095a0 !important;
    color : #fff;
    }

    .form-pagebreak-back {
    background : #00c7d6 !important;
    text-align : center !important;
    border-radius : 40px !important;
    color : #fff !important;
    text-shadow : 0 0 !important;
    box-shadow : 0 0 0 transparent !important;
    border : 1px !important;
    border-color : #00c7d6 !important;
    text-shadow : 0 0 0 transparent !important;
    }
    }

    .form-pagebreak-back:hover {
    background : #0095a0 !important;
    color : #fff;
    }

    #form-pagebreak-back_83:hover {
    color : #0095a0 !important;
    outline : 2px solid #0095a0;
    }

  • DesignedByMarin

    I would like to put a space between the last line of the "Email Validator" statement and the "Confirm Code" field. (https://designedbymarin.com/test/contact.html). To see the statement you will need to add an email address and press "Verify Email" in the link above.

  • DevoraG

    How can I make my "Take Photo" button display the same way as my "Scan Barcode"? What's the name of my Take Photo button to use in CSS?

    Thank you!

  • Dean Pitout

    What code can I used to put a think border around all input fields, and use the HEX color code to make the border a specific color?

  • bscs15031

    Hi please help me out I want to add audios to the form and get review on them. I found a link but it was for an older version. Please help me out.

  • Stoupakis

    Hello there. In an "image choice" question, I need to make buttons bigger (2 per row) and each image to cover the whole button (edge of image falls in button edge). Is there any way to do this? Thanks

  • roberto.torres

    Hi, I'm having a hard time enabling teammates to enter advance CSS mode on a form. They get an unauthorized message. How do I give them rights to enter advance CSS edit mode?

  • YogaTrail

    Trying to style Yes/No buttons on Card form such that all the Yes Button is green, the no button is read. Can this be done with CSS code?

  • NorthernRays

    Hello. How do I keep the line formatting in place? Or indicate I want to start a new line?
    On screen it looks fine but when I check the preview all lines have run together and is very hard to read.
    Thanks
    Lyn

  • Angela

    Hello, I am trying to create a table of 6 cells across, and 20 cells down. I would like to columns to entitled:
    QUANTITY - UPC# - SIZE - DESCRIPTION - UNIT PRICE - AMOUNT
    Is this possible? Basically I am trying to create a form to provide to customers that will give them a quotation on the products that they are purchasing. Also, I would love to have the fields be able to multiply the quantity by the unit price, and return the answer in the amount column. There would then be Sub Total, Taxes, and Total cells at the bottom of the table.
    Would love some assistance on this!

    thank you,

  • adzarr

    How do I move the hover text from its default position. In its current position, it is covering my input box. The previous example is no longer available.

  • Adams_Ryan

    How do I make an answer come up in red/ green once selected?

    I need the customer to know that something is dangerous or faulty in the form at a quick glance.

  • compliancerocks

    I want a list of questions each with a space to sign next to them, e.g.

    Topic one - SIGNATURE
    Topic two - SIGNATURE
    etc

    How best to use CSS to make this happen?

  • gpceeat

    Hi,

    I need space between the Field-Label and the field itself.
    How can I inject this?

  • jrod2036

    How can i, for example, change the options in a drop down list., such as as a time picker, where when someone clicks, it displays 24 different hours,, how would i go about taking off some of those hours?

    how can i pull up the EXISTING css code and maybe just take them off manually and repaste?

    jrod2036 at yah(you know the last two letters) dot kom

  • Meeta

    I want to modify my form such that it has 4 text boxes when I enter a number, say 4.
    For instance, when I ask how many subjects do you want to take in the first semester?
    The student answers 4, there should be 4 text boxes below it.
    Please help.
    Thank you.

  • ohnmar12.mcpl

    How do I remove create job from below the form?

  • heidianheuer

    Hello,
    how can I change the color and font-size of all the "placeholder fields" in my forms?
    Thanks

  • jeffnorthway

    What is the code to change the outline color of a check box? And since I am at it, how do I change the inside color of a check box?
    Thanks for any help!
    Love the form!

  • CBBMP

    Is there a code or way to get payment donation tiers (i.e. $5, $20) as buttons.

  • ugesavet


    Hi. To integrate the form with google calendar, for the start time field I must choose datetime. To define the final time, I need a datetime field that in my form only shows time and does not date.
    How to hide date and show time?

  • seekerhealth

    I would like to have two parts to a question. I want the second part to be of a smaller font, and indented a bit to the right (basically providing additional notes to the question above)

    How do we do that?

  • hillsceneLIVE

    I would like to alter my previous question "How do I make the sub labels under the questions a different colour? The code supplied only changes the colour of the sub labels under the personal information data." as I have worked out that the sub labels turn grey when I have character limits. Is there a way to keep the sub labels in my colour choice AND have character limits for answers for long text entry?

  • hillsceneLIVE

    How do I make the sub labels under the questions a different colour? The code supplied only changes the colour of the sub labels under the personal information data.

  • AZDBAdesze

    Is there a way to remove the borders around a frame url that is a spreadsheet on a Iframe Embed widget?
    I have a spreadsheet that I want to show the user on the form I have created and I only want to show the columns and rows.

  • patriciabriggs

    Hi
    I am trying to remove the border round my form?

  • Matt

    I have a basic questionnaire form. It looks great on desktop but not on the mobile preview. My logo is cropped at the top and the facebook widget is cropping on mobile.

    How can I get these to "fit" on the screen when someone is viewing on their mobile device?

  • nicolassoong

    Hi, for single choice answer, how do I make the answer "circle" larger?

    Thank you.

  • SadieBelles_Sweets

    How to make a field a required field?? I want to add the asterik and people cant submit the form without filling that field out

  • rtolmach

    It would make things so much easier if the text color selector on the Text Quick Element let us choose a hex color.
    Until then, how can I change that color with CSS? I do not see it explained on this page, https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes
    Thanks!

  • sonoranserenityspa

    how do i make the BMI widget bigger vertically? i got some code for just the BMI that i added and it worked, but now i'm trying to incorporate it into a bigger form and when the BMI calculates, it gets cut off because the height is too small. form is https://www.jotform.com/build/82957513984169

  • janiew77

    Hi
    Can you tell me how to add codes to increase height of text fields? Not sure why they are looking so small. Thank you

  • nicolemarlin

    Is there a way to make one multiple choice option associated with an element, such as having the option to choose a number appear in a multiple choice option? I want to use this to affect pricing, where it would be the set price times the number that is entered.

  • aelfassy

    I was wondering if there was a way to take the limit off the date reservation tracker. I would like more than one person to be able to choose a date but once it is chosen the date doesn't show up again.

  • helenmarshall

    How do you CSS line height? Thanks

  • dawnielle

    I need help please with CSS code to make the multiple choice quetions and answers appear in arial font - 12 pt. Can you help?

    My email address is ann@primewomen.com. Dawnielle is no longer with us.

  • stevefitzgerald18

    How do I remove the shadow around the form? I'd like it to be flat.

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

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