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

  • Profile Image
    Jayne25
    Asked 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.

  • Profile Image
    pinoytech
    Answered 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
    yselboller
    Answered 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
    sidharth_kch
    Answered 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