How to add a background image to a form?

  • odofertas
    Answered on November 29, 2013 03:00 PM

    as I can I can add a background image?, eg a png file on a phone and on this image, a text field

  • Mike_T Jotform Support
    Answered on November 29, 2013 03:47 PM

    Thank you for contacting us.

    We can style the form with custom CSS. In order to add the image background you can inject the following CSS to your form:

    .form-all {
    background: url('http://your-image.com/here.png')
    no-repeat top left;
    } 

    Where http://your-image.com/here.png  should be replaced with your image URL. Also, if you add the form to httpS site, please make sure to use httpS path to your image.

    How to add a background image to a form? Image 1 Screenshot 20

    Form example:

    http://form.jotformpro.com/form/33326512260949

    Please feel free to contact us if you need any further assistance.

  • talents
    Answered on September 30, 2014 05:53 AM

    hello

    this process made the actual form turn into a background

    what I need is the page background (wallpaper) to be set , not the form background

    thank you

  • omer Jotform Support
    Answered on September 30, 2014 07:24 AM

    Hi talents,

    Can you try to inject this CSS line?

    html {

    background: url('http://your-image.com/here.png') no-repeat top left;

    } 

    Have a good day.

  • RightClickMedia
    Answered on October 14, 2014 09:08 AM

    i have an image, can i know how to convert it to CSS File to use as my form backgroud?

  • Ashwin JotForm Support
    Answered on October 14, 2014 10:39 AM

    Hello RightClickMedia,

    You want to use your image as form background. Is that correct?

    You need to first upload the image to any web server and then grab the URL. You can upload it in JotForm as well. Here are the steps you should follow:

    1. Add the "Image" field in your form:

    How to add a background image to a form? Image 1 Screenshot 50

    2.  Choose "Upload Image File" option in the Image Wizard and then click Next:

    How to add a background image to a form? Image 2 Screenshot 61

    3.  Browse to the image file in your computer which you want to upload and then click "Upload File":

    How to add a background image to a form? Image 3 Screenshot 72

    4.  Select the Image field of your form then click "Image Source" in the toolbar :

    How to add a background image to a form? Image 4 Screenshot 83

    You can then use this image URL in the custom css code to set it as the form back ground.

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • jhcarrjr
    Answered on March 23, 2015 12:39 PM

    I am having trouble getting the 2nd step to appear.  How do I get the Upload File Box to appear?  It just has red text in the lower right section of the 1st box saying "Please select a type first".  There is no where to select a type.
  • Charlie
    Answered on March 23, 2015 01:33 PM

    Hi jhcarrjr,

    To better assist our users, we advise them to open a new thread for each question or concern that they have. I went ahead and opened one for you. Please refer to this link instead: http://www.jotform.com/answers/538768. We will address to it accordingly.

    Kind regards.