How to customize form with CSS code?

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 :)

Hello Elfinh;

Sure, please find the following page to guide you on the topic: Style your Forms with Custom CSS.

     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,

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.

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 Link: http://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

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,

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

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.

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

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!