How can I have a form field sit on top of an image?

  • Profile Image
    Asked on January 27, 2016 at 11:28 PM

    The current paper form has places for notes aligned with the image (see attached).  Is there a way to replicate this in JF?


    Thanks in advance.



  • Profile Image
    Answered on January 28, 2016 at 06:14 AM

    I'm afraid that your attached image didn't get successfully attached to your forum post, Rob, so I couldn't check on your exact requirement. However, I understand that you would like to have a form input field just above an image.

    You can achieve that by first adding a desired form field, such as Text Box for example, and then add an Image field underneath.

    In case that you want these fields not to take the full width of your form, you can use the Shrink option to narrow them down, and also use the Move to a new line option on the Image field to move it underneath the Text Box:

    This would result in the field appearing just above the image, as in the following screenshot:

    If you were asking for something else, could you please try re-uploading your image again by following these steps, and we will be happy to look for possible solutions.

  • Profile Image
    Answered on February 17, 2016 at 04:22 PM

    I have attached the image of the form again.  What I am trying to achieve is an image sitting as the background to 3 fields.  I dont want the image to be beside the field.  Make sense?


  • Profile Image
    Answered on February 17, 2016 at 11:27 PM

    I'm not sure if I understood your request, but I made a sample form using an image as background of a field, take a look on it by clicking on this link:

    Do let us know if it's what you are trying to achieve, if it is, we will provide you the code to implement it in your form.

  • Profile Image
    Answered on February 18, 2016 at 10:45 PM

    it does seem like your image is positioned below the field and not as the background.  We have sorted out a work around.  Thanks

  • Profile Image
    Answered on February 19, 2016 at 04:54 AM

    As far as I understand you want to use that image as a background image for three fields.

    We are glad to hear that the issue has been resolved for you.

    In addition to that, you can try the code for adding text over am image.


    #input_54 {

        position : relative;

        left : 100px;

        top : -504px;

        margin-bottom : 84px;


    I've also align the row and column on your cloned form.

    Here is the result:

    You can check the cloned form and make the same arrangements for your other fields.

    If you have any question or issues, please let us know. We will be happy to assist you.