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 CSS form is rendered. An example of customization can be found in this guide: Customize your Form using Custom CSS Codes. In this guide, you'll learn how to inject custom CSS codes into the form.

1. In the form builder, click the Form Designer icon.

2. Click on the Styles tab, scroll down a bit, and paste the code in the Inject Custom CSS area.

3. Make sure to click on the Save button.

Related Guide: How to Inject CSS Codes to Widgets.


Contact Support:
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Contact JotForm Support: https://www.jotform.com/contact/

Send Comment

183 Comments...

See all comments
  • 5kamalini5

    Hi there,
    On the Element 'Appointment', instead of giving the user the possibility of choosing a time, I would like to give them the possibility of choosing a slot. We'd have 6 slots available per day, and only Mondays would be available, so 6 slots per Monday. This means that they would pick a Monday and choose from slot 1 to slot 6. Would that be possible?
    Thank you!
    Kind regards,
    Carla

  • steskw

    i want to divide the row into small boxes. How to do that?

  • 4WARDS

    Is custom css only an option for payed plans?
    My free plan doesn't show a field to edit anything.

    Thanks

  • jgraham606

    Is there a way to do an on hand inventory?

  • assets55ltd

    Is it possible to reset some questions (but not others). If a user changes the "Assets Category" on my form https://eu.jotform.com/build/203325737145352 I'd like to make the "Critical Impact" field back to "Please Select".

    Can I do this through CSS? I've never written in CSS but am willing to give it a shot if you can guide me.

    I've read all of the queries below and none have anything which can be adapted.

    Thanks

  • Prabhubaa

    How to change the colour of the text and background of the Fancy Large Input Widget
    CSS or any other way?
    What should be the CSS Code and Where to paste it to activate it.

  • Calkins

    2 questions:
    1) Is there any way to remove the powered by Jotform from the bottom of my form?
    2) Can I change the color of the submit button? Thanks

  • Darlington_Kasumba

    CSS wont update table.

    Form https://www.jotform.com/build/202954258115051

    I added css for the th but it wont take effect

    Same applies for the checkboxes

  • nirradreltub

    thank you! I entered div#cid_176 {
    margin-top: -23px !important;
    }
    div#text_128 {
    margin-top: -33px !important;
    }
    div#text_125 {
    margin-top: -29px !important;
    }
    however none of the spacing changed. I tried it in two forms. Hmmm.

  • teresa.meza

    I need help making the Gift Registry Widget product field longer. I don't know which CSS code to use to do this. I have enough information in these fields that I need the product information to be twice as long.

    Thanks for any help!

  • Salema01

    How do I add a new Project code number or a new account number to our forms? We have a new Project code number that needs to be added.

  • georgias714

    Thank you so much!

  • Mendell_Gosnell

    Hi,
    How can I change the color of the header without changing anything else.
    I did change the color but once this is done, the format of the boxes below gets completely
    changed.
    https://www.jotform.com/build/203075153393856

  • bestforms

    Hello, how to remove the background and frame of form!? Thank you!

  • monti.united.experts

    Hi there
    I wanna ask about how to make my all my form's elements alignment from right to left ( for Arabic language forms ) put in mind I would like to have all my label to be from right to left as well

  • chapchap

    Is it possible to add hyperlink in spreadsheet widget cell?

  • HatchingDragonsNursery

    Hi, I want to inject some css on my form, but I think that the form designer has a new appearance and I haven't been able to find where to do it. Could you please advise?

    Many thanks

  • margery.zeller1

    Perfect! Thanks so much!

  • chuntana_sa

    How to set width of each Text box in Configurable List Widget?

  • icochrane

    I have managed to set the column width but the setting applies to all table. So the first table is OK but the second table is not. How do I set the column widths in a specific table ?

    Trying to sort out the table widths has taken far to long for what is a very fundamental requirement. Easy to use apart from this one fundamental issue.

  • Crescog

    .form-textbox{text-transform:uppercase;}

    aplicar este código también cambiará a mayúsculas los correos electrónicos?

    quiero los demás textos en mayúsculas excepto los correos electrónicos

  • Ilona_ilona

    It worked on the form, however, when published I can see it. How can I remove "free" from the published version.

  • willem.nordeje

    HI

    I would like to design this form

    Chicken with Filling
    (And then Filling type and QTY)
    Ie
    Bacon & Cheese (Qty)
    Ham Cheese (QTY)

    Your help is valued

  • diegomtzm324

    How can I make the size of "TOTAL" bigger ?

  • Lillebergen

    How to remove the checkbox in the productlist (the one in front of the image)? This code does nothing :( I'm editing the "Pizza order form".

    .form-product-item input[type="checkbox"] {

    display: none;

    }

  • moshino0626

    I wanted to change the select column to the written style. How should I do it?

  • sohailakbar795

    Hi how can we hide back button in quiz so that user can not go back.

  • Martin_Lauren

    I'm trying to find this and even upgraded my plan thinking i needed to do that to do custom CSS to style my form to match my site but i still can't find this feature anywhere ,and all the CSS i'm trying to add to my form isn't working. please help

  • Silia

    hi I am trying to do a practice test with my form and it comes back with order ID is missing from my submission form?? How do I set this up please

  • MasortiOlami

    Hi,
    I"m using the address field for my form (here: https://form.jotform.com/201621949160048), but for the country drop-down field, i'm noticing that it's doesn't take on the same formatting as my other fields. I've managed to add CSS so that the background of the field box is the same gray, but how can i make it so the box size and font is like all of the other fields?

    Thanks,
    Tehila

  • vannson.nicolas

    Dear Staff,

    I would like to create a slider where I can add words on top of it such as bad for 0 and 10 for excellent. I would like also to personnalized the slider with a 0.1 step instead of 1. Is that possible ?

    Thank you

  • Hoerrner

    How do I increase the width of each of the fields, to the same width, to cover about 80% of the width of the survey?

  • Jo Ostlere

    Help - I’ve created a new form but not all the boxes are showing on the email after a client has submitted - how do I sort this?

  • lai0601

    How to create a question with eliminate choice? For example, registration of assignment topic. Once a respondent chosen an option, this option will no longer available for the next respondent to choose. Please advise. Thank you.

  • EMGuidance

    how do i increase the max length on the multiple choice header field

  • rickazrin

    I need help customizing this table so the width is smaller for the 2nd column than the third column. https://hipaa.jotform.com/201566757644161

    this is for the table with field unique name: pleaseIndicate

  • NakedPlanet

    Do I overwrite the existing CSS code with the one I wish to inject or add it to the coding that is already there?

  • primed_community

    Couldn't find an option in the css to change the color/line color/background color of radio button select circles. Any help?

  • KendalSnow

    Not all elements have STYLE tab, why not? I wanted to reduce the size of a paragraph text box...

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input, .form-spinner input{

    width:200px;/* to increase the width of your Input table*/

    height:50px;/* to increase the height of your Input table*/

    But cannot inject it?

  • Dave4777

    I had done this before and it worked :) Now I have added some products and things collapsed and I tried adding it again, no result. Please help ?
    https://form.jotform.com/201087224720143

  • RCSD81

    Is there a way to add a CSS code into my form so that users can pick 2 dates within an appointment calendar?:

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

  • Noorcakesbakes

    How can I remove the area code from the Phone number element?

  • ramongrf

    Thank you.

  • cheryl33710

    what line do you want me to inject this code into?

  • Cwpmackays

    Hi,
    I have a list of subtotals values like 25.00, 50.00 , 35.00, 110.00 however some cells show the decimal points and others don't so I get 25.00 , 50, 35.00, 110 which doesn't look good when they are aligned vertically. As far as I can see all cells are set up identically, each using a calculation widget to build a value (basic addition and multiplication in all cases). How can I get them to always show two decimal places even if the decimal is .00 ?
    Regards

  • jwajibul

    Hello,

    Is there a form ,widget, or feature, that allows me to input a table with a dollar amount? Specifically, I would like to include income sources in one column and dollar amount in another column.

  • assistenciasaudescs

    Hello,

    How can I change the months language to Portuguese (Brazil) on the Appointment Element?

    Best regards

  • 01AMADA

    Como puedo insertar un contrato

  • GroWise

    Hi,

    I am using the Passage Test plugin and want to change the fill-in-the-blanks colour box. Is it possible??

  • shamusm

    Is it possible for the column width of each column in the Spreadsheet widget to resize based on the pre-populated data?

    For example, if Column A is pre-populated with 'ABCDEFGHIJKLM', then the column width is wide enough to fully display 'ABCDEFGHIJKLM'.

    Alternatively, is it possible to assign column widths to each column of the Spreadsheet widget?

    Thank you.