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 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 CSS tab, 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.

Send Comment

88 Comments...

See all comments
  • FuturisticInfinity

    Can anyone help me with css code i picked a multi option for my form but i really need the option to be in USD currency when i come through to my spread sheet. Is this possible? All help will be appreciated
    Thanks

  • jimedington

    I got the code to work, BUT I'm having issues getting copied/pasted data to format.

  • itsabary

    Where do I find a CSS section in the Designer?

  • HussainAlbarakaty

    If I want to custom one field, how can I find the selector ?

  • jmh_jmh

    Editing form CSS is not there. Are you going to fix it and if yes, when?

  • vmalinski

    Hey Guys,
    This button to see custom CSS is not there anymore :(
    Has anyone figured out where we can now add custom CSS to Jotform....
    I just spent the last hour trying to figure it out.

  • lisahumbert

    Can you help me get rid of the grey color in the questions that have a input grid?

    Thank you!

    https://www.jotform.com/build/82256333706153?iak=931841542fc4ee3f6e0cd024a32a4481-6669cfa3d2e96047

  • lisahumbert

    How do I change the color of the basic Input Table and the font color?

    Thank you,

    Lisa.Humbert@bridgefinancialstrategies.com

  • georgie_marques

    Hi,

    I want to use the preview before submit widget but would only like the preview to show the fields that have been filled rather than a preview of the entire form. Is this possible?

    https://form.myjotform.com/81614570741556

  • talents

    I can't find the CSS tab.. did you change the design?

  • alphataumedical

    This is not possible in my form https://www.jotform.com/build/81982792368474. I would like to change the direction of the form going from right to left.

  • Nathan_Higgs

    I am not understanding. I want the customer to be able to edit their entry incase of an update or a incorrect form that was created.

  • Nathan_Higgs

    I just want them to be able to edit their content they put into the form. Not the form itself.

  • Lijn58

    I want the filled in names to appear automaticly in capitals. How do I do this?

  • illumin8nz

    I would like for customers to select their array of multi-choice selections that reflect their design requirements and then, I would like those selections to determine which design options that are available for them...

    i.e. when their floor area is large and they want really nice feature lighting, the cheaper design options become unavailable...

    How would I do this? Would I do this with CSS Coding?

  • adawson64843

    i just want to make the form answer spaces longer to that all of the name that ill be putting in them will show and am not sure how to do that

  • flydiscount

    how to change the height of the form

  • danringer

    I am using your forms to collect sales information. How do I get the numbers to show up with commas and/or add currency $

    ie: $156,688 vs 156688

  • misdmaverick

    I copied a form template which uses the submit button to send to paypal. I need this to change to just submit the form data to the already defined email addresses (notification and email of user filling out and submitting the form. How do I change it to stop sending to paypal? I have never used CSS or PHP, so I though it was a defined function/widget/etc. I could choose. Thanks.

  • Caloykokoy

    not working :(

  • enzojacinto

    When i put Image Upload Preview appear the image on screen. Its possible or exit the same stuff but for videos?
    What exist dont show the videos on screen just appear the link of video.

    Thank you

  • stevieboy63

    hi new here,

    to auto capitalize simply
    click on your name field
    properties
    advanced
    expand field details at the bottom - find the field ids
    should be like #input_1 or similar
    close box
    go to form designer (paint roller icon)
    choose css
    then paste into
    1
    #input_1{text-transform:capitalize;}
    etc for each name field you want first letter capitalized
    bingo!



  • tkrpata

    Looking at the custom date picker, but I want to limit the drop-down to Years only 1975, 1976, 1977 etc, how can I do this? Or is there a better way to do this?

  • ASIGEOMATRICULA

    Me funcionó!! Gracias!!

  • Cora Ahern

    Getting a message saying IP address has been banned because of possible phishing attempt. Tried to fill in form but I can't remember username. Put email but when I click submit it freezes in "enter the message as its shown" but no message appears. Thank you for your help.

  • Sharelogi

    Hi there
    Is there any way to verify the RTL option is working ? i used your CSS recommendation embedded here (https://www.jotform.com/answers/629135-Having-problems-in-creating-forms-in-Right-to-Left-language) and its seems like only part of the text is moving to the right (without the headers).
    Any solution which will allow me full RTL solution ?

    Regards
    Tomer

  • zimou13

    This is a simple 'padding reduction' change. Added to Custom CSS it is correctly applied until the page is viewed from a smaller viewpoint (device). At this point, the Original XC version is re-applied (i.e. Custom CSS is not active). Viewing on a desktop device and then sliding the browser window from big to small etc you can flip from one to the other and watch the css change appear / disappear within the browser inspect tool.... and you can see a media query being "applied" automatically within the browser inspect tool window too...ShowBox vidmate mobdro

  • dANNYdANNO

    I don't have the custom CSS possibility. In my design menu I can choose: color, image and video.

    I'd like use custom CSS, is it still possible?

  • jbunch359

    Nice

  • ltomlin

    When I click CSS in Forms Designer, all I get is a completely blank white page.

  • KorWanitaKota

    how do i set the maximum size of image submission?

  • robcabeca

    Hi I am trying to change the color of the input boxes. I have entered teh css codes as described in previous posts. But do i need to enter it for each box or is there a general css code that applys to all input boxes?
    Thank you!
    Robert

  • Yodjii

    Is it also availabre with cards? I don't see the option. Thank you

  • rhellmich674

    I was wanting to change the font in a short text entry input field. The intent was for the submitter to type in their name with the font being a cursive font. Below is what I entered into the Inject Custom CSS . It does change the font, just not to a cursive script. Is there anything further that could be done? Thanks,

    #input_17 {
    font-family: Damion, cursive;
    }

  • Brand_Station_Design

    Hi! Great job!

  • idika

    i want to change font color and grid colour

  • jrogers142

    Is this code all on one line or is it on 3 lines? I've pasted it in on one line and 3 lines with spaces and 3 lines without spaces but it did not move the questions to the right.

  • jborsukow

    can change some parts but not all here is what I have working.
    ------
    #coupon-button {
    width : 100px;
    }

    #coupon-input {
    width : 200px;
    }
    -----------------------

    cant get the outside to change below
    ----------------------
    .form-input-wide jf-required div {

    }
    .undefined th {

    }

  • wotco

    I'm trying to use Phone Element to receive the Mobile phone number in international format (with country code) which i don't need the "Area Code" field. how can i remove it or is there any other way to receive the mobile phone number in international format?

  • gcook1868

    My field id is #input_24. The field is a calculated total payment amount. My problem is that, when the amount is 27.50 (American currency), it displays 27.5. How can I make the number display with two decimal places?

  • jerryfisherpta

    worked great!! thank you!

  • chidiebereC

    i need a comment section form. pls do u guys offer such?

  • Mastergardener1

    I am trying to get the following information to center on these separate lines and it just is not doing it! Please help!!
    Saturday, March 24, 2018
    Cumberland County Extension Office
    Charlie Rose Agro-Expo
    Center Crown Coliseum Complex
    301 East Mountain Drive
    Fayetteville, NC 28306
    Please reply to Lgrates@nc.rr.com as I am the one doing the form. Thanks!

  • Azitamous

    Hello,
    Thank you for the great framework.
    I was able to inject the new style to the css and save it. I am able to see the changes in my BUILD tab, however, when I publish the form and open it in new tab or embedded my custom css is not showing. I appreciate if you provide some advice.

    Thank you

    Best,
    Azita

  • TelmoPaixo

    Como colocar os 5 botões na mesma linha e um campo de escolha único. Por defeito a aplicação só me deixa colocar 4.


  • crawley_patrick

    In my form (Confidential Information Form) I have tried to change the font to Book Antiqua. I have followed the instructions and no changes are being reflected. Could you see what I have been doing wrong?

  • YGU

    Hello,
    I'm going to use your spreadsheet extension and I want to change the names of columns and rows, example
    A changed solo
    B changed to duets
    C changed into teams

    1 changed in number
    2 changed in number
    .
    .
    .
    5 changed in total

    Can I do it?
    cordially

    M Guillermin

    yves.guillermin@lyon.ort.asso.fr

  • barbwra

    I'm almost ready to go live with my form. Thanks for all your help! There's just one thing:

    In the middle of my page are three sets of check boxes. Each set has an Add button. When I preview the form at this link, https://form.jotform.com/73185533584160, and click on an Add button, it simply shows what I already have there. I do not want this. Can I eliminate/hide the three Add buttons in the Checkbox sections? Thanks.

  • MIWgroup

    I only have the following:
    palettes, themes, and custom

    No CSS is available in the tab.

    Where can I find CSS editor?

  • CheerfullyCreated

    I am trying to enlarge my images when hovering. I am not able to see the answers below. I do not have the CSS tab. I would appreciate any help that you can give!!

    Thank you in advance!