Embed forms with background picture

  • adrianhornqvist
    Asked on January 29, 2015 at 5: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

  • Welvin Support Team Lead
    Replied 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:

    Embed forms with background picture Image 1 Screenshot 20

    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

  • adrianhornqvist
    Replied on February 2, 2015 at 5: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

    Embed forms with background picture Image 1 Screenshot 30Embed forms with background picture Image 2 Screenshot 41   

  • Ben
    Replied on February 2, 2015 at 9: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

  • adrianhornqvist
    Replied on February 3, 2015 at 4: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

  • Ben
    Replied on February 3, 2015 at 8: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 :)