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

    Injecting CSS Stylesheet/File: Feature Request?

    Asked by alicchen on March 01, 2013 at 03:58 PM

    The current implentation for injecting CSS seems to be a bit clunky due to light-boxed text input, and I was wondering if there was a way to implement a css stylesheet instead of typing (or pasting) all the CSS code into the text box. Once you start customizing the form with your own CSS inject codes, it becomes a real pain to keep copying and pasting modifications to see how it looks in the form. Having to go through Preferences>Form Styles>Copy/Paste, Close, Save steps requires way too many clicks for it to be efficient.

    It would be nice to just provide a section for the user to enter a URL to link a stylesheet in place of or in addition to the injected CSS code. This way, users can work on the CSS code using a better (smart) editor, update the file on their own server and just refresh the Form to see changes. I can't imaging that being too complicated of an implementation since it would just be a line like:

    <link rel="stylesheet" type="text/css" target="_blank" href="mystyle.css">

    where the mystyle.css is a link to your own style sheet.

    Feature Request css stylesheet style size font
  • Profile Image
    JotForm Support

    Answered by ardy0689 on March 01, 2013 at 05:47 PM

    Hello alichen, I will forward this to our development team though I can not give you a time frame for this. They will update this thread if there is news.

    In the meantime, linking a CSS stylesheet for JotForm will work using the traditional way. Paste this in the "<head>" section of the html:

    <link rel="stylesheet" type="text/css" target="_blank" href="mystyle.css">

    Thanks

  • Profile Image

    Answered by on April 26, 2013 at 11:23 AM

    Hi,

     

    I added my external stylesheet to my HTML page and JotForm seems to have eliminated it. When I view souce, it is not there and of course, my CSS has not been cascaded down to the HTML element classes?

     

    Any ideas?

     

    Craig Andree

  • Profile Image

    Answered by jefreylandicho on April 26, 2013 at 12:04 PM

    If the changes you have made is not appearing, please try clearing your browser cache or try using another browser.  adding !important tag would also be helpful.

  • Profile Image

    Answered by on April 29, 2013 at 02:24 PM

    Thank you for your help.

    I just want to be sure that JotForm can handle an external CSS file. As documented above in this thread, I put the link tag within the <head> boundries of the HTML page that will host the embeded JotForm script. Correct.

    I have tried two browsers and refreshed the cache. With no class styling changes. I viewed the source to make sure the css file was indeed there, and it was. Furthermore, the <body> tag css worked on HTML that is not in the JotForm. It seems JotForm does not know about the CSS or can apply the CSS class styles.

    Any other ideas. This is sort of important for us to control the styling of the form page within our CMS.

    thanks.

    Craig

  • Profile Image

    Answered by Craig Andree on April 29, 2013 at 02:36 PM

    I just applied this:

     

    form {
      background-color : #ffc;
    }  to see if it would affect a background behind the form element. I am doing this in FireFox as well as IE.

  • Profile Image

    Answered by moonzkie on April 29, 2013 at 03:00 PM

    Hi,

    To change the background of your form, you will have to use these codes:

    .form-all {

    background-color : #ffc;

    }

    However, you can also change the background of your form by:

    1. Select Form Style tab

    2. Click Background

    Then select your preferred color.

    Both of these methods work on IE and Firefox.

    Thank you.