Can I combine the style sheet info for the forms into my site's style sheet?

  • Profile Image
    Asked on October 21, 2011 at 12:15 PM

    I have a form that's a newsletter signup, which is placed on a bunch of pages on my site. I've been using Yslow to tune up the site to get it to load faster, and on every page that has a jotform on it, the grade takes a nosedive, because there are three separate calls for style sheets (because jotform adds three separate style sheets to the page). Granted a couple of the sheets are gzipped, which Yslow likes, BUT, I'd like to combine the sheets into the one sheet for my site. Can I just copy/paste the code from the jotform style sheets into my site's style sheet?

  • Profile Image
    Answered on October 21, 2011 at 01:22 PM

    Since you are using full source codes to embed the form, it would make sense to combine the form's css codes with your site's.

    However, an even better idea is to download the css files then upload it on your webhost. This way, conflicts between your site's css and the form's will be prevented.

    Just change the stylesheet links to point to the ones that will be uploaded on your server.

    To download the css files:

    1.  Go to Setup & Embed tab
    2.  Click Embed Form
    3.  Click Source
    4.  Click the download link for your form's source files then save it on your computer

  • Profile Image
    Answered on October 21, 2011 at 03:52 PM

    Thanks, Neil! I downloaded the .css and .js files. Now, do I just find any reference to "jotform.css" and "jotform.js" in the code and then point to the files on my server?

    Also, I got a bunch of other files, like "calendarview", "location", "protoplus-ui", "protoplus", etc., in the js file folder. Do I need to upload those to the server as well?

    Thanks again!


  • Profile Image
    Answered on October 21, 2011 at 04:39 PM


    I would be tempted to just use the content in the css files you downloaded (you probably only need the form.css file) & add them to you sites' css file. i.e copy and paste the contents to the bottom of your WalkingOliver.css file )

    Then I would try removing the 3 references to jotform css files i have highlighted below:



    That, in theory at least, should work.. and leave your page needing to make less calls for resources when its loading. 

    For the javascript, personally, I would probably just leave it alone, tho there may well be a case for removing the reference to the line I have highlighted below:


    You could experiment and see if that file is absolutely necessary.


    Please backup or at least be sure you have a good memory before making changes to these files, as I can never be 100% sure that this will work as expected. Better still, its probably wise to make a copy of your index.html on your webserver and try the changes there,  before transfering them to your live page.


    Hope that makes sense, this will probably take a little bit of work to get right and we may see unexpected results as its not something we get asked about all that often.


    If at all possible, try and break the process down into small stages, of smaller changes and test the forms functionality after each stage is completed, just so your better informed as regards where and what 'broke'.


    If you have any questions at all, as you work through this, please ask.

  • Profile Image
    Answered on October 21, 2011 at 04:44 PM

    Ah, excellent! Thanks so much! 

    Very much appreciated.