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

    Clever Colorful Theme: Copy fields - styling doesn't copy though?

    Asked by ssdsforms on February 01, 2017 at 06:35 AM

    I want to duplicate fields in my Character Breakfast form, particularly the Child's Name fields - but the styling/ formatting of the fields don't carry over when I do that. And I can't even view the settings for the those fields to copy on to the ones I want to change.

  • Profile Image
    JotForm Support

    Answered by seth on February 01, 2017 at 07:03 AM

    Hello,

    I cloned and check the form. You are right. The styles can't be copied with the field. This issue belongs to theme. The theme should automatically update the styling code. I am escalating the issue to the owner of the theme. They will update the theme accordingly.

    In the mean time, you can add your own styling code to implement styling to the copied fields. Here is the code that you should inject in the form builder.

    #id_10 {

        width : 460px;

        margin : auto;

        -webkit-border-radius : 10px;

        -moz-border-radius : 10px;

        border-radius : 10px;

        background : rgb(0,183,229);

        background : -moz-linear-gradient(top,  rgba(0,183,229,1) 0%, rgba(0,183,229,1) 100%);

        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,183,229,1)), color-stop(100%,rgba(0,183,229,1)));

        background : -webkit-linear-gradient(top,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

        background : -o-linear-gradient(top,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

        background : -ms-linear-gradient(top,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

        background : linear-gradient(to bottom,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

        filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7e5', endColorstr='#00b7e5',GradientType=0 );

    }

     

    Here is a guide on how to inject CSS code into your forms:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    For adding the same styling into other fields, you need to find its id on the console. Then duplicate this code and update the id part and inject the code. Here is a demonstration on finding id on the console. I am using Chrome. Right click on the filed that you want to add styling:

    Scroll up to the "li" element on the HTML code and there lies the id of the "li" element:

    Here how it looks like after injecting the CSS code to id_10:

     

    You will be updated about the issue when it is fixed.

    Thank you for your understanding.

    Regards.