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

    Embed forms with background picture

    Asked by adrianhornqvist on January 29, 2015 at 05:50 AM

    Hello,

     

    When im trying to embed a form to my wordpress site the background picture dosent stay the same as in the building program. When I start the form i my site the picture is 10 times bigger and not "fixed" in size as it is in the buildning program. Is this possbile to solve?

     

    Best regards Adrian

    Page URL:
    http://cykelgymnasiet.se/test/

    picture size background photo photo size
  • Profile Image
    JotForm Support

    Answered by Welvin on January 29, 2015 at 10:20 AM

    Hi Adrian,

    You should add the background in the Background Image section while in the form designer:

    You should also select "Fixed" in the position checkboxes options. Kindly try it again. Also, if you can share to us the image then we would be happy to help you apply it to your form.

    Thanks

  • Profile Image

    Answered by adrianhornqvist on February 02, 2015 at 05:13 AM

    Hey again,

    The problem is that when I add the background picture in the program and looks on it in the preview set everything looks perfect. But when i embed it in my website it dosent look so good anymore.. First printscreen is fro preview in the builder program an second if from my website. I guess its not possible to have the backgroound fixed and the form rolling over it? In this case it seems like the background picture I use adapt too how long the forms is.. (It works if I have a very short form)

    Regards Adrian

      

  • Profile Image

    Answered by Ben on February 02, 2015 at 09:57 AM

    The reason why it is shown like that is because your jotform is very high - very long.

    Now the photo tries to accommodate the entire length of the jotform, stretching it out and showing you the horizon in the photo as if it is a background itself.

    To see what I mean, we can make it follow the width, instead of the height and to do that, you should add these CSS codes to your jotform:

    html.supernova {
        background-size: 100% auto;
    }

    Now, what I would suggest would be to:

    1. give the link to your jotform and have it filled out directly, instead of on your website
    2. add pages to your jotform having each page using as much space as needed to stay within the background photo.

    I think that option 2 is best since it will allow you to have the jotform on your website and your visitors in the familiar area.

    Now adding page breaks is easy and you can see how easy by checking this guide: How to Create Multi Page Forms

  • Profile Image

    Answered by adrianhornqvist on February 03, 2015 at 04:56 AM

    Hey,

    Thank you! I added pages in the forms and everything looks great:)

     

    Btw, I'm starting to like you program more and more, I guess I'm not the only one that switched form Adobe Forms too Jotform, and now after a few days I give you guys tumbs up! Nice job!

     

    Regards Adrian

  • Profile Image

    Answered by Ben on February 03, 2015 at 08:43 AM

    Thank you Adrian. That is great to hear.

    I would just like to mention that you can transfer your forms and data from Adobe to our system as well, if you are looking to do something like that, so just let us know and we will help you set that up as well :)