How to customize form with CSS code?

  • Profile Image
    elfinh
    Asked 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
    tkdmc90
    Answered 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
    elfinh
    Answered 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
    tkdmc90
    Answered 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
    omer
    Answered 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
    elfinh
    Answered 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
    Kiran
    Answered 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
    elfinh
    Answered 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
    Welvin
    Answered 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!