How can I reset all color formatting on a form (most likely using CSS)?

  • Profile Image
    djdemers1
    Asked on July 07, 2015 at 04:13 PM

    I recently imported forms from Adobe, and the custom CSS seems to take priority over the JotForm designer. The CSS is very messy, and if I remove all injected CSS, the spacing and margins of the form go crazy.

    I've tried a simple html, body { background: transparent !important } fix which made some progress, but some color formatting seems to be hidden deep in the code.

    Is there a simple fix to the code that would make all backgrounds white, all text black, and allow for future formatting to be controlled by the designer?

  • Profile Image
    BDAVID
    Answered on July 07, 2015 at 05:44 PM

    I doubt there is a simple way to do this, basically you have to copy the whole injected CSS code, paste it in a text editor, look for the "color" attributes, and delete them, just leave the CSS code that adjust the padding, margins, position etc.

    I have actually started doing it on this form: http://form.jotformpro.com/form/51876971944977?

    Also, the "hidden formatting" it's actually the style attributes located on each of the HTML fields:

    I have remove the color, so the forms looks now like this("all backgrounds white, all text black"):

     

    You may clone my form as explained on this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    You might have to ever check deeper to remove certain style attributes, hope this helps.

    (Suggestion: do not touch the original imported form, make clones and work on them.)

  • Profile Image
    djdemers1
    Answered on July 08, 2015 at 11:11 AM

    Ha, I hadn't thought to check the style attributes... Thanks very much, very impressive service here at JotForm! Cheers,

    Dan

  • Profile Image
    djdemers1
    Answered on July 08, 2015 at 11:32 AM

    As a follow-up... I'm realizing that there are hundreds of these style attributes and it's not practical to change them one by one. Thanks Adobe, ha... Ideally I could access the full HTML code and do a Replace All.

    I've seen threads on how to download the code (Embed -> Source), but is it possible to upload the new HTML code somewhere?

  • Profile Image
    Welvin
    Answered on July 08, 2015 at 01:00 PM

    No, you cannot import back the form source codes into the form builder. That means you are going to customize the form outside the form builder.

    I know it's a time-consuming process, but you have to go through each field and remove the inline styles.

    For the current form, I've made the changes for you. Here's the link: http://www.jotformpro.com/form/51885152817967.  You should now able to override the styles using the form designer.

    Thanks