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

    Inject custom css - what is class tag to add an image as a background for the header

    Asked by magnatexforms on August 06, 2014 at 07:16 PM

    I want to add a background image to the header of my form. I have Frankensteined it on this page:

    http://www.magnatexpumps.com/replacement-ansi-pumps-parts.html

    but want to get it done correctly by adding custom css.

    What class tag do I need to edit for the header?

    I have tried this:

    .form-header {

    color: #c9caca;

    text-transform: uppercase;

    background: #00693e url('http://www.magnatexpumps.com/images/landing-page-form-header-bg.jpg') no-repeat top; padding: 5px 25px 30px 25px;

    }

    but it is not working.

     

    Page URL:
    http://www.magnatexpumps.com/form-testing-clone.html

    Inject Custom CSS add an image background image jpg www top
  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 07, 2014 at 01:19 AM

    Hello magnatexforms,

    Please use the following custom css code in your form and that should solve your problem:

    .form-header {

    color: #c9caca;

    text-transform: uppercase;

    background-image: url('http://www.magnatexpumps.com/images/landing-page-form-header-bg.jpg');

    padding: 5px 25px 30px 25px;

    height: 63px;

    width: 100%;

    }

    You need to delete the existing ".form-header" code you have in your form and inject the one share above. 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!