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

162 Comments...

See all comments
  • sara_chejanovich

    Hi I would like to make some field on my form, to be defaulted to an X in red (to show where the customer has to sign on a particular page). I cannot find how to do so on CSS for my form.
    the field I am triyng to make it appear in a printed X red is #input_736

    My form is https://form.jotform.com/200886417847062

    can you help me with this?

    Best Regards

  • anjarmath

    How can i customize my submit button?
    Thanks

  • cjadeltas1975

    How can I change a number format to a currency format such as $###.##? I've tried the text and the number elements with no luck.

  • CITADROffice

    I've changed the auto response email and saved it, but it is still sending out the old one. Is there a reason for this or an option I should choose?

  • CITADROffice

    Hi, I need the code to create a sublabel for thsi radio button question: Are you the Onsite Event Host?

    Here's the jotform: https://form.jotform.com/62094364451152

  • hmpatten

    Can I make "Label Width" different on different questions or is it all or nothing?

  • JKINnovations

    Can I add a picture of my product?

  • jeremyestes

    I am looking to be able to make numbers (dollar amounts) show the dollar sign and also the comma in the value. Thank you.

  • Harald Metzler

    Liebe Entwickler,

    Ist es möglich, die zuvor eingegebenen Formulardaten in einer Datenbank zu speichern um sie dann in ein anderes Formular einzutragen?

    Danke für die tolle app, weiter so!

    Beste Grüße aus Deutschland
    Harald Metzler

  • Tabbitt

    Hello! So I'm using the Scale Rating Module on my form.
    I want my clients to rate us from 1-11.
    I want to put right on the side of the number "11" a smiley face.
    The CSS ID for number "11" is "#input_30_11"

    So... Before trying to put a smiley face I want to try other more simple stuff, like putting text-decoration declarations... You know, just for the sake of testing... So I went to my CSS section on the Form Designer Section and put some code...
    And it's not working, I'm not seeing any changes... Any ideas on how could I make this happen?

    Here is the code...

    #input_30_11 {
    text-decoration: line-through;
    }

    I'll be waiting for your response,
    Thanks!

  • MAfestival

    How can I change the color of "clear" to white under the signature-box of the signature widget? What is the code for this?

  • Izzy_w

    Hi! Anyway to change to word "Coupon" to "Promo"?

  • christine.mburu

    Hello i would like to add a custom css that if a customer selects one section for a service e.g content writing that they in turn need to attach a file for the service picked

  • cpatel3271990

    I would like to add a "if" function to my form. For example, if the person completing RSVP is "Jack Smith" and I only have 2 RSVPs for the family of Jane Smith, I want the response to the question "How many total attending event" to have a drop down with options limited to 1 or 2. Similarly, if "Jane Doe" has maximum 4 RSVPs, then I want the total attending response to be limited to 1,2,3 or 4 only.

  • BluePearlsEnrichmentFoundationI

    Hi,

    I would like to change the font for my main form from black to white. What is the code for white?

    Thank you.

  • flavorcupcakery

    Is there a way to use custom CSS in the Date/Time widget that will prevent people from selecting both the current date AND the next day?

  • sebeller

    I want to increase the length of the text boxes in the Dynamic text box widget. I assume it could be done via custom CSS code. Please explain the process and code for doing this.

  • BD_Financial

    Hello.

    I've created a table to capture contact info and was hoping to have the option to check email and phone for validity. I notice there is a widget that allows for email checking but I was hoping to add the function to the existing table if possible.

    Thanks

  • mario.shonga

    I need a widget that can give long text entry with date and can add multiple entries of long txt

    So a date field, below which would be a long text window
    below a plus button to add another combo of date and long text fields

  • eventspeople

    How do I make the font in my text to be Lato? I've changed all fonts in Lato, put in the code too but text created are not in Lato font.

  • Childersla

    Can I get some help with a CSS code to split this checklist widget into 2 columns?
    https://www.jotform.com/build/92894955680173

  • bestsmile18

    Hi there,

    we would like to have the language choice for our form as a first window to have it more prominent for the user to be choosen.

    Is that somehow possible without code? If not, do you have any documentation on such a use case?

    Best

  • BarJalocals

    I want to remove some bottons on the form

  • thorstipi

    How do I use the CSS to change the number format in a calculated field? At the moment it looks like General formatting in Excel, but I want it to show as a currency field (£)

  • liyana.dmmc

    i need to limit the date of reservation.The date picked must be minimum 3 days before the reservation date
    For example. I want to book session on 16 October 2019, so i have to book on before 13 October.

    I try to use widget but do not find this function.

    Hope you can help me on this

  • iCare24Group

    Managed to do some CSS tweaks however any of the Modules, do not fall within the CSS they break the form as you cannot continue or they cover the page etc..

    https://eu.jotform.com/build/92533290967365
    this is the form.
    the first issue starts at i believe page 12.
    there are multiple parts of the forms that use widgets. including terms and conditions that do not fall within the CSS

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