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

    Styling a form - CSS Rules are not working when I Inject them

    Asked by dgkg on January 15, 2014 at 09:24 AM

    I have a question, for example, when I want to style my form differently and when I use for example .form-header-group { background-image:url('http://www.degrieksekookgek.nl/versie2/menu/menitem_bg-1.jpg'); nothing changes when I inject this code, what is the use of injecting it?

    I thought this way you could change the looks of the form, but the above change does not have any effect. Also tried to change the background image of the form, also not working when I inject the code for it.

    Hope someone can help me out.

    Page URL:
    http://degrieksekookgek.nl/versie2/recept-formulier.php

    background image style size jpg Css Inject CSS
  • Profile Image
    JotForm Support

    Answered by TitusN on January 15, 2014 at 09:46 AM

    Hello, 

    Thank you for contacting us. 

    The CSS rules will not work if you do not have the correct Descriptors/ID

    To get the correct descriptors/ID's  for each element of your form (so that you can style them with CSS), please use this guide: http://www.jotform.com/help/146-How-to-find-Field-IDs-Names

    To check whether your form has accepted your CSS rules, use this link: http://www.jotform.com/40135233719348

    If you have embedded your form using the source code, you may have to embed it once more on your website so that the changes will take effect:  http://www.jotform.com/help/104-How-to-get-your-Form-Source-Code

    Please let us know how we can assist further. 

  • Profile Image

    Answered by dgkg on January 15, 2014 at 12:06 PM

    I tried to changes it here on Jotform and used the correct code suggested on the forum, so This should be right.

    For instance I tried the background and die not work, then I tried another one, to no success, I used a theme. Can This be the problem?

  • Profile Image
    JotForm Support

    Answered by abajan on January 15, 2014 at 12:37 PM

    Hi,

    The theme is not the problem. Perhaps an in-depth explanation of how CSS works is in order. The rule currently injected in your form

    .form-header-group {
    background-color;#2276c4
    }

    will be ineffective due to several factors.

    Firstly, there are no elements in that form bearing a class of form-header-group. I believe you intended to target the field labels and thought that they were headers. Their class is actually form-label-top. How do I know that? Just from experience in working with Solid themed forms (which yours is). But there's no need to rely on experience. My browser's developer tools could have told me the classes (and IDs if necessary) of those elements. Here's how to do it in Chrome:

    1. Right-click the "header" and when the contextual menu pops up, click Inspect Element


    2. A panel will open in the bottom half with the line in the HTML which renders that element highlighted. (See this screenshot.)

    From the screenshot you'll see that its class is indeed form-label-top. So, the selector should be changed to .form-label-top. (In CSS, classes must be prepended with a dot.) But that's only part of the puzzle because if you were to change the rule to

    .form-label-top {
    background-color;#2276c4
    }

    it still won't work. Why? Because to begin with, the declaration is written incorrectly. The semicolon should be replaced with a colon and a semicolon placed at the end. (Strictly speaking, no semicolon is required here because it's the last declaration but it's a best practice to include it.) Okay cool! So, the following ought to work:

    .form-label-top {
    background-color: #2276c4;
    }

    Right? Wrong! You might be lucky to glimpse the blue background for a split second while the page loads but it will eventually be hidden behind this image due to the natural stacking order of web pages. The rule is perfectly valid but in order to see the background, you'll need to override the default display of the image which has been defined in the fifth declaration of the second rule of the Solid Theme style sheet, highlighted below:

    .form-label-top {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    padding: 6px;
    background: url("../../images/grad.png") repeat-x scroll 0 0 #aaa;
    border: 1px solid #777;
    border-bottom: none;
    margin: 0;
    width: auto !important;
    display: block;
    }

    (The rule can be seen on the right side of the screenshot to which I previously referred.)

    There are a couple of ways to do that. You can either add a declaration of background-image: none; as below:

    .form-label-top {
    background-color: #2276c4;
    background-image: none;
    }

    or you could use a single background declaration:

    .form-label-top {
    background: #2276c4 none;
    }

    However, I gather that rather than having the blue background, you actually want to use your image. Changing the rule to this would accomplish that. And if doing that makes the text hard to read, add a color declaration. The result would be like this clone. (#FFF is shorthand for #FFFFFF or white.)

    As you can see, there's more to CSS than meets the eye (pun both intended and not intended!). So, should you need further assistance, our team is always available.


    Cheers

  • Profile Image

    Answered by dgkg on January 15, 2014 at 12:58 PM

    Ok, got it right now, it's working fine, thank you for the explanation.

  • Profile Image
    JotForm Support

    Answered by abajan on January 15, 2014 at 01:28 PM

    You're most welcome. Just remember that, as my colleague has stated, the form's code will need to be re-embedded into your web page in order for the changes to take effect there. Alternatively, you could just update the CSS right there in the web page but to keep everything synced it's better to do it in the form builder and then overwrite (paste over) the full code.


    Ciao