How can I change format (look and feel) of all fields added to a form?

  • Profile Image
    Asked on July 13, 2016 at 08:16 PM
  • Profile Image
    Answered on July 14, 2016 at 01:28 AM

    There are 2 ways to do this using the Form Designer.

    #1 By using form themes 

    User guide: How-to-use-your-JotForm-themes

    #2 Using the Form Designer to design your form.

    Video guides: Form-Designer-Tutorial-Let-s-create-fantastic-forms-

    Let us know if you need further assistance.

  • Profile Image
    Answered on July 14, 2016 at 11:55 AM

    Thanks for the info, very helpful, but I think I need something more specific. For example, in the Sports Registration theme, it looks like this:

    I can't find a way to apply a gradient to a label, or to apply a border to a label. I thought it might be CSS, but when I looked at CSS for the label there was no elements applied.

    Please let me know if this is possible with Jotform designer application or if it is more of a programming thing.

  • Profile Image
    Answered on July 14, 2016 at 12:43 PM

    The theme you have applied has a CSS code directly embedded or loaded on the form, you won't be able to edit it. But you can use your own custom CSS code to somehow overwrite it.

    Here's a sample CSS code that I have:

    #label_4 {

        border: 2px solid black !important;

        background: #E6DADA; /* fallback for old browsers */

        background: -webkit-linear-gradient(to left, #E6DADA , #274046); /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(to left, #E6DADA , #274046); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


    Blue highlight is the field ID of the label for "Le Club".

    Yellow highlight is the CSS code style specific to it.

    Here's a screenshot showing where you can place it in your Form Designer Tool, you can also use the CSS helper. On my screenshot, when you double click on a field that you hovered on, it will simply insert its field ID on the CSS textarea where you can add different kind of styling.


    You can also learn some basic CSS coding on the following links: 


    I also suggest checking the links provided by my colleague to fully maximize the user of the Form Designer Tool.

    Let us know if you need further help on this.

  • Profile Image
    Answered on July 14, 2016 at 01:00 PM

    Thanks, that's exactly what I needed!

  • Profile Image
    Answered on July 14, 2016 at 01:06 PM

    I'm glad it helped. Should you need our assistance again, feel free to contact us here in the forum.

    Thank you :)