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 can I change format (look and feel) of all fields added to a form?

    Asked by tristansquest on July 13, 2016 at 08:16 PM
    form themes form designer
  • Profile Image
    JotForm Support

    Answered by jonathan 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 by tristansquest 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
    JotForm Support

    Answered by Charlie 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:

    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.

  • Profile Image

    Answered by tristansquest on July 14, 2016 at 01:00 PM

    Thanks, that's exactly what I needed!

  • Profile Image
    JotForm Support

    Answered by Charlie 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 :)