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

    I changed the background of my header but the color does not reach right side

    Asked by jmuskus on September 12, 2014 at 02:09 PM

    Comment 1:

    Hi,

    I entered the code above to remove the red background of the error message but it doesn't seem to have worked, this is the current code entered in the custom css box:

    .font--face {
    font-family: 'Carrois Gothic';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;src: local('Carrois Gothic'),
    local('CarroisGothic-Regular'),
    url(http://fonts.gstatic.com/s/carroisgothic/v4/GCgb7bssGpwp7V5ynxmWy2IHn70NeZKJ0uStDo7Dza8.woff) format('woff');
    }.form-all {
    font-family: 'Carrois Gothic';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    }
    .form-required {
    color: black !important;
    }
    .form-line-error {
    background:none repeat scroll 0 0;
    }

    Thanks in advance!

     

    Comment 2:

     

    If I want to add custom CSS to my thank you page do i need to enter it into the HTML part of the editor, am just learning CSS so if you could give me an example of how I can do this that would be great, thanks!

     

    Comment 3:



    Me again! I changed the background of my header but the color does not reach right across the width of the form meaning the background color of the form also makes up part of the header... Can you help?

     

     



    This is a re-post of a comment on Customize your Form using Custom CSS Codes



    This is a re-post of a comment on Customize Your Form Using Custom CSS Codes

  • Profile Image
    JotForm Support

    Answered by steve on September 12, 2014 at 04:09 PM

    Hello-

    Thanks for writing. I think this is the form you're referring to:

    http://www.jotformeu.com/form/42535606641352

    Here's a link on how to inject CSS into your forms:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    As for the color not reaching the right side, it appears that it does. It reaches all the way to the right width of the form. If you'd like it to be wider, then you can adjust the form width.

     

    Adjust form width:

    As for adjusting the color of the error text, here is a very thorough explanation:

    https://www.jotform.com/answers/35144-CAN-I-CHANGE-THE-COLOR-OF-THE-WARNING-AND-ERRORS

    Here is a simpler explanation, which might be easier to follow:

    https://www.jotform.com/answers/338385-Required-fields-Changing-the-error-color

    Please let us know if you're able to work through those and make the adjustments, or if you need further assistance.

    Kind Regards

  • Profile Image

    Answered by jmuskus on September 13, 2014 at 09:25 AM

    Thanks so much. Regarding comment 2, I am not sure how to specifically target the thank you page so i can enter the custom CSS? And regarding comment 3, I realised I didn't explain myself properly. The header bar seems to be shifted over to the right and keeps on going off the side of the form, also meaning that there is no gap between the left edge of the header bar and the header text which doesn't look very good. I have made the form background yellow so if you preview the form you will immediately see what i mean! Thanks!

  • Profile Image
    JotForm Support

    Answered by Welvin on September 13, 2014 at 12:12 PM

    I have your last two comments moved to a separate thread. They are queued and we'll answer both shortly.

    Comment 2: http://www.jotform.com/answers/428369

    Comment 3: http://www.jotform.com/answers/428370

    Thank you!