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

    How do I place a picture/vector background onto my forms?

    Asked by Jayne25 on May 21, 2013 at 06:54 AM

    There appears to be only a colour background option, but I'd like mine to look more personal to my business.

    My Forms picture colour
  • Profile Image

    Answered by pinoytech on May 21, 2013 at 09:30 AM

    Hi Jayne25,

    You might like to take a look at this article for more detailed information.

    http://jotform.me/help/75-Customize-your-Form-using-Custom-CSS-Codes

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image

    Answered by yselboller on May 21, 2013 at 09:44 AM

    Hello @Jane25,

    Try injecting this CSS code to change the background of the form itself.

     

    .form-all {
    background: url(enter the url of the image you want) no-repeat top left;
    }

     

    You can change the value of "top left" to your desired position. For Example you wanted to make it centered, instead of using "top left" use "center". If you want to make it tile, just remove "no-repeat" on the code.

    If you wanted to change the background of the form, use this code instead.

    body, html {
    background: url(enter the url of the image) no-repeat top left fixed #f0e9d6;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    }

    If you want the image to move along with the form you can simply remove "fixed". But when the "fixed" code is there it will stay in place as you move the form accross the page. You can change the color and margin. But basically this is the code.

    Here's the instruction on how to inject the codes in your form.
    1. Go to edit mode of the specified form. And click Preference.
    2. Click Form Styles
    3. At the bottom of Form Styles Page Click to edit and put the CSS codes there and click Close settings after doing so. 
    You will now see the form with new background image.
    Feel free to let us know if you need further clarification regarding the inquiry.
    Best Regards,
    Ysel
  • Profile Image

    Answered by sidharth_kch on May 21, 2013 at 10:11 AM

    @Jayne25

    Please inject the following css to add image to your form's background:

    .form-all {

    background: url(IMAGE URL) no-repeat;

    }

    Please check this guide about How to Inject Custom CSS

    Thanks,

    Sidharth