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

    From Field in front of large picture

    Asked by tristansmith on September 30, 2014 at 11:45 AM



    Is there a way to place a form on top of a picture, layered or other. thx

  • Profile Image

    Answered by charmiequino on September 30, 2014 at 12:11 PM

    Hi tristansmith,

    The screenshot that you have provided seems broken, I can't see it on my end.

    Regarding your concern, this tutorial might be helpful "CSS Custom Codes". If you want to customize your form to have a picture on the background, or in what you have stated placing the form in front of the picture, injecting CSS codes might be helpful for you. 

    This is the same code in the tutorial link:

    .form-all {

    **You might need to add this just in case, so the background image won't be covered up by the field background**

    .form-line {

    background: none;

    Let us know if this works for you. Thanks.
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 30, 2014 at 01:44 PM

    Hello tristansmith,

    If I understand your question correctly, you want to display your form fields on top of an image. Is that correct?

    To achieve your requirement, you will have use your image as the background of your form. Please inject the following custom css code in your form and that should set your image as an background image:

    html {

    background: url('YOUR_IMAGE_URL_GOES_HERE') no-repeat top;


    The following guide should help you inject the custom css code:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!