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

    Why custom CSS code is not applied on preview mode?

    Asked by PeraltaOutreach on June 21, 2017 at 02:29 PM

    I have been referencing this post https://www.jotform.com/answers/1052968-Clever-Colorful-Theme-Copy-fields-styling-doesn-t-copy-though   is order to get this theme to copy the formatting to each field.  It works correctly in the 'build' environment, however, when I preview or publish, all of the fields either revert to their original formatting or become completely white.

    Page URL:
    https://form.jotform.us/71714803105145

  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 21, 2017 at 03:44 PM

    I have checked your form and I can see the form is showing the same on the form builder as well as the direct link. 

    Here are some screenshots about it: 

    Please, do note that you need to apply the code based on the fields on your form, you could get the ID of each field by right clicking on it and copying the value in the "id" attribute. 

    On your form there is some code applied to fields that do not exist in the form, for example, the "id_10" and "id_12" do not exist. 

    Please, try applying the code to the correct field ID and let us know  how it goes. 

    Sample code, it can be customized: 

    #fieldID {

     

        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 );

     

    }

    Hope this helps. 

  • Profile Image

    Answered by PeraltaOutreach on June 21, 2017 at 03:57 PM

    thank you for the information. I think what you are seeing is what happens when i publish the form. The customizations get stripped away...   I did as you mentioned above, and replicated it again.  I didn't complete the whole form, but made an example id_12 and attributed it to the email, phone, and birthdate fields.

    In the build area, the form looks like this:

     

    In preview and publish, it looks like this:

    In addition, in cases where the form did automatically put a color background (e.g. student name), it will default back to the original color.  i did not change it this time, but in the past, if i changed 'student name' to id_12 (green), it was green in the build area but it showed as blue once published.

     

    https://form.jotform.us/71707577805162

  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 21, 2017 at 05:42 PM

    Thank you for the additional information. 

    I've cloned your form now and I can  see this is the only code in the form: 

    I have added code that affects the "Student E-mail", "Phone number" and "Birth Date" fields, it seems to work on my end and I even tried closing the form, logging out, logging-in using incognito mode and the CSS code I injected was still there. 

    I would suggest you to try with the same code I injected on my end, it is a simplified version that simply changes the background color and sets the dimensions: 

    #id_6 {

        width : 460px;

        margin : auto;

        -webkit-border-radius : 10px;

        -moz-border-radius : 10px;

        border-radius : 10px;

        background : rgb(135, 209, 15);

    }

     

    #id_25 {

        width : 460px;

        margin : auto;

        -webkit-border-radius : 10px;

        -moz-border-radius : 10px;

        border-radius : 10px;

        background : rgb(135, 209, 15);

     

    }

     

    #id_24 {

        width : 460px;

        margin : auto;

        -webkit-border-radius : 10px;

        -moz-border-radius : 10px;

        border-radius : 10px;

        background : rgb(135, 209, 15);

    }

    Also, may be that the default code in the form is overriding the injected one so it may be required to add "!important" in order to force the code to be applied, example: 

    #id_24 {

        width : 460px !important;

        margin : auto !important;

        -webkit-border-radius : 10px !important;

        -moz-border-radius : 10px !important;

        border-radius : 10px !important;

        background : rgb(135, 209, 15) !important;

    }

    You can see my cloned form where I injected the code here: https://form.jotformpro.com/71716529675972 

    Feel free to clone it: How-to-Clone-an-Existing-Form-from-a-URL

    Please, make sure you are saving the changes on your form before you reload the page or preview the form: 

    Let us know how it goes. 

  • Profile Image

    Answered by PeraltaOutreach on June 21, 2017 at 05:50 PM

    ah! got it. i was doing things backwards. i'll give this a try.