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.

     

     

  • Profile Image

    Answered by PeraltaOutreach on June 21, 2017 at 01:53 PM

    i was having the same issue with this form. I tried the solution above. It worked correctly in the "build" area.  However, once published, the form reverted back to it's original styling.

  • Profile Image
    JotForm Support

    Answered by david on June 21, 2017 at 03:03 PM

    The theme is specific to a single form and the code referenced in this thread is specific to the users form.  You would need to apply new styling to any new fields added in the form.  If you need help with doing so, please create a new thread letting us know the form you are using and what needs to be updated, we will be happy to have a look:

    https://www.jotform.com/contact