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

  • tristansquest
    Asked on July 13, 2016 at 8:16 PM
  • jonathan
    Replied on July 14, 2016 at 1: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.

  • tristansquest
    Replied 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:

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

    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.

  • Charlie
    Replied 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.

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

     

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

    https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes 

    http://www.w3schools.com/css/ 

     

    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.

  • tristansquest
    Replied on July 14, 2016 at 1:00 PM

    Thanks, that's exactly what I needed!

  • Charlie
    Replied on July 14, 2016 at 1:06 PM

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

    Thank you :)