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


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.

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

153 Comments...

See all comments
  • 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.

  • JeffBender

    Can you give me a CSS code to increase the font size of hoover text? THANKS

  • hr.zeejob

    I WANT TO USE TERMS AND CONDITION WIDGET AS A POPUP WINDOW FROM THE FORM.
    CAN YOU PLEASE HELP ME

  • premroong

    ฉันสามารถสร้างปุ่มพิมพ์เอกสาร และพิมพ์เป็นไฟล์เอกสาร PDF ได้หรือไม่

  • guru6t9

    how to display in superscript in single choice entry?

  • JavierV100

    Hi.

    How can I populate specific hours. Example only the following hours 9:30, 11:00, 1pm, 3pm, 4pm.

    Thank you

  • jamie.hannath

    Hi,

    I want to use the 'Conditions' functions to hide options available on a drop down box but I don't appear able to. My first drop box is 'Line/Area' so options are 'Line 1', 'Line 2', 'Line 3' etc. My next drop down box contains all my assets/machines so example 'Metal detector', 'Conveyor', 'Labeller' etc. When I select the line/area I want all the machines/assets that are not in that area to be hidden from the drop down box. I understand I can create different drop down boxes for each area then hide all the ones that are not relevant but then when the data is exported into google sheets it leaves empty gaps everywhere.

    Any help would be appreciated!

    Thanks Jamie

  • Karen

    I’ve used one of your standard forms but don’t know how to change the date from French to English once published and also selection months to English rather than French? How am I able to get the questions formatted so doesn’t cut off letters too? If I have to upgrade or pay a one off fee to get these corrected happy to do so. As reallly like your site/app. This is all relatively new to me. Thank you Karen

  • davidakoontz

    I do NOT see a "Styles" tab on the properties page (like shown in example above) - why?

    I'd like to add the ability to force text into upper case.

    Maybe this should be a feature of the Input Mask e.g. AAAA -> mask for upper case.

  • iklansajadisini

    Hallo please widget html telpon support to applikasih html

  • Kalyan Ram

    Hi
    In the attached form, I want to make PPS Number a numeric and text field. Unable to change it,
    I have used an existing 'email address' field. It always says to enter a valid email address.
    Any help would be appreciated.
    Regards
    kalyan

  • Bhare

    I'm trying to add CSS code for each of the answers for the "Non Sport Specific Scholarships. I've tried entering code for the first one, but nothing is appearing. Are you able to help me get the first one set up to include the following content:

    Established with the Western Colorado University Foundation to perpetuate the memory of William Charlesworth, a 1954 graduate of Western. To provide financial assistance to student-athletes pursuing majors in mathematics or related natural sciences.

    ELIGIBILITY:
    • Major: Pursuing a math or science major
    • Need: Demonstrates a need for financial assistance
    • Athletics: Demonstrates an interest and is active in organized athletics
    • Year in School (after completion of current spring semester): Incoming freshmen accepted to Western to Seniors are eligible; preference given to incoming freshmen
    • Residence: Preference given to applicants from Delta County, the Western Slope of Colorado, and Colorado.
    • Other: Preference given to applicants whose study time is limited by family obligations or the need to earn income.

    SELECTION COMMITTEE:
    Chaired by the chairman of the Department of Natural and Environmental Sciences, includes a representative from the Athletic Department appointed by the Athletic Director, and a representative from the Mathematics Department.

    AWARD:
    $1,100 for 2020-2021
    Depends on fund availability

    Thanks!!!

  • Lrichmond

    I have entered the code as outlined, however, it is not changing my form. Please see form at https://form.jotform.com/Lrichmond/clone-of-room-rental-fee---occc and let me know what I have done wrong.

  • stevekjrs

    I want to add value in a field and want to make it by default and should not be editable

  • CaliServices

    Hi,

    There is no "Styles" tab in the version I have.

    It has the major headings "Color", "Image","Video" and "Layout". Then sub headings "Themes" and "Custom".

    I cannot find an CSS box in any of these but I may be looking in the wrong place.

  • gahoppe

    Where is the "styles" tab? In the form designer I only see "color, Image, Video, Layout" options... there is no "Styles" area to input css as there is in the picture above?

  • KromahStudio

    How to add CSS for to date and time so that people are not able to book the same hours in the same date??

  • SMART_GENGE

    How to customize quantities with half?

  • HRCCo

    HI
    How i can move text bot only in Arabic from left to right ?

  • robynlawton

    After following these instructions fully, the field input width is still the same after pressing save. Do I have to go out of the form or refresh for this to take place. The current size of the input field is too small to fit names, phone and email when the form is printed. https://www.jotform.com/build/92967230251861

  • park14jobs

    was trying to figure out how to resize the picture uploaded to 2 x 2 inches???? seems the pdf editor is has no options to do this at all, btw its a resume to fill up an application. everytime i got an email the picture is too big for pdf version.

  • Sharmili

    The header image ( image.header)is not compatible in the mobile view. Please help me

  • rgannon

    Looks like it did the trick..... Thanks

  • Rick

    How can I change the color of the text and lines. Different widgets appear to come with different default colors. I understand where I need to type the CSS code but what code do I write? Thanks

  • TonyaB88

    its not showing up still . Im trying to use the simple Pay pal form with this

  • bondapp147

    Our forms require some financial data (in currencies). The UX will be enhanced if we insert commas between thousands (ie. instead of a home purchase price of 1000000; it displays as 1,000,000). Can you assist? I still need these to be used in calculations so can't use the widget, it will need to be a css solve.

  • sbarbara

    Hi,
    i want to capitalize the first word of my options. How can i do that?
    For example:
    option 1 "uppercase" "lowercas"
    opton 2 TEST choose this options
    Can you help me?
    Thanks

  • RT

    I want to change the color of the dropdown menu field, to match the color of the option chosen in the options list. Do you have any idea how to do this? I'm clueless!

  • RIDENGO

    I'm using the Date Reservation form. however, once someone picks a day. No one else can use that day. I need to be able to have many date reservations for the same day.
    Can you tell me how to fix this issue.

    thank you
    Brenda Sarconi
    Ride N Go

  • bayviewboom

    is that the best place to put custom css for the fixed 'feedback' button? (i mean, the button that opens the form, not the form itself.)

  • RIDENGO

    I developed a job application, while sending out to be completed a message shows up with an error message. where do I change the setting on that..

    Also, how you do I change the clear the form.. the written items are removed but not the circle.
    Please help
    Thank you

  • lynnephelps

    I too would like to know how to reduce the top margin of my JotForms. I can't see the answer below, it is restricted.