What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to customize form with CSS code?

    Asked by elfinh on March 27, 2015 at 03:44 AM
    but I have difficulties in creating CSS code since I don't know about that, do you have CSS samples of how to change , font-color, label button color, background of label color etc. ? Appreciate it :)
  • Profile Image

    Answered by tkdmc90 on March 27, 2015 at 04:23 AM

    Hello Elfinh;

             You can implement CSS code, by following these steps.

    1) Click on "Edit Form".

    2) Click on "Preferences" from toolbar.

    3): Click on second tab "Form Styles". Here you can write custom CSS code.

     

    Please, ask if you have any question/queries.

    Thankyou,

  • Profile Image

    Answered by elfinh on March 27, 2015 at 05:01 AM

    Thanks for the answer...... I know where to put the CSS code, but I don't know the codes since I never learn it, do you have samples codes of CSS of how to change , font-color, label button color, background of label color etc. (like preset codes of CSS) so I can copy the codes and paste it in my form CSS.

  • Profile Image

    Answered by tkdmc90 on March 27, 2015 at 05:13 AM

    Sure Elfinh, I have created a form for you to explain this. If you can provide me the link of your form, that would be great.

    Form Linkhttp://www.jotform.me/form/50851801319452

    Form CSS Code:

    .form-label-left{

            width:150px !important;

        }

        .form-line{

            padding-top:6px;

            padding-bottom:6px;

        }

        .form-label-right{

            width:150px !important;

        }

        body, html{

            margin:0;

            padding:0;

            background:#FFFFFF;

        }

     

        .form-all{

            margin:0px auto;

            padding-top:20px;

            width:454px;

            background: #FFFFFF;

            color:#000000 !important;

            font-family:'Verdana';

     

            font-size:12px;

    }

     

    Please, will let me know if you've any questions/queries.

    Thanks,

    Syed

  • Profile Image
    JotForm Designer

    Answered by omer on March 27, 2015 at 06:05 AM

    Hi elfinh,

    You can use our Form Designer, so may be you will not write css code :)

     

    Moreover, if you want to write custom css for your form, our "css helper" may help you:

    Have a nice day,

  • Profile Image

    Answered by elfinh on March 27, 2015 at 11:08 AM

    yes, but since I use form tabs widget, I need to search around about the tab CSS costumizing ... :(

  • Profile Image
    JotForm Support

    Answered by Kiran on March 27, 2015 at 01:14 PM

    So, I understand that you want to change the styling of Tabs. You can change the styling of Tabs widget from the Form tabs wizard.

    I see that there is some CSS already added to the widget. Some of the options you mentioned were already there in the code so that you may play around changing the values. However, if you can let us know your exact requirement, we can provide you with necessary assistance. 

    Thanks.

  • Profile Image

    Answered by elfinh on March 27, 2015 at 09:52 PM

    So,  you already know my form ? Yes I already add the codes after searching around….  :)

  • Profile Image
    JotForm Support

    Answered by Welvin on March 28, 2015 at 03:32 AM

    Yes, as far as I could see it. Great to know that you've figured it out. Please don't hesitate to contact us again if you need further assistance.

    Thank you!