How to embed jotform over background image in Weebly?

  • Vicki247
    Asked on August 23, 2015 at 9:12 PM

    I made the image large so it will be background image

     

    I used Jotform embed code- but it creates the transparent form either above or below the image- not on top of the image where it should be

     

    How do i do that in Weebly?

  • Charlie
    Replied on August 24, 2015 at 3:25 AM

    Hi,

    This is actually the design you made in your Weebly website. You can either change the position of your background image to place at the back of the form.

    You'll see here that the div element holding the form is separate from the div element holding your image, that is why it shows either at the top or at the bottom.

    How to embed jotform over background image in Weebly? Image 1 Screenshot 30

     

    I'm not that familiar with Weebly, but you could try placing the background image in the form itself.

    I cloned your form for testing purposes, this is how it looks like: http://form.jotformpro.com/form/52352128729962. You can change the background image using the Form Designer Tool.

    How to embed jotform over background image in Weebly? Image 2 Screenshot 41

    I would also recommend that you embed your form using the iFrame embed code.

    Let us know if that works.

  • Vicki247
    Replied on August 24, 2015 at 5:45 AM
    Thank you for your detailed response.  Weebly is a drag and drop site. First i drage "image" onto the page. I  resized it to fill entire page.Then,  I dragged "embed" to the page and then placed the embed code from Jotform into it.  When I  did that the image went small and the 2 seperated to top and bottom. Its 2am, butI will try to drag image to see if it goes into form.I  guess you meant use the embed option that you gave 'iframe' when creating the code?Thanks :)
    ...
  • Charlie
    Replied on August 24, 2015 at 9:13 AM

    Yes, please do try using the iFrame embed option instead, that should prevent any code conflict between your website and the form. But if it's possible, you can contact the support in Weebly to check how you can add a background image on a specific element. In this case, the form and the image you have are of a different element. But if there's an option to add a CSS code in your website, we can also try that. But my best recommendation for this is to add the background image to the form itself. 

    Do let us know if you need more assistance on this.

  • Vicki247
    Replied on August 24, 2015 at 9:46 AM
    I  did ask weebly, waiting on them. I  will ask your question.  We can add css code. The Jotform is good looking, durable , easy platform with excellent support !
    ...
  • Charlie
    Replied on August 24, 2015 at 11:16 AM

    Glad to hear that. We'll wait for the Weebly support. But please also do try changing the background image of the form itself, I believe it should better match that page that you have. You can do that by following the steps I mentioned in my earlier post.

    Thank you.

  • Vicki247
    Replied on August 25, 2015 at 1:45 AM
    I had to use the Popup embed because the others would show very enlarged
    background image.
    Thank you very much
    Community Coupons
    Webzenz.com *It Just Makes Cents to Use Webzenz *!
    Release-the-pain.com
    www.fixmyheart.co
    225 30th Street Sacramento, CA. 95816
    mobile: (916) 613-7099
    [image: https://www.linkedin.com/pub/vicki-mah/43/b96/301]

    Skype: vicki.mah
    ...
  • Ashwin JotForm Support
    Replied on August 25, 2015 at 4:04 AM

    Hello Vicki247,

    On behalf of my colleague, you are welcome. BTW, did you get any response from Weebly support? 

    Thank you!

  • Vicki247
    Replied on August 25, 2015 at 5:45 AM
    I  dont think Weebly replied,  but they usually do. Maybe it didn't show up in my email 
    ...
  • NJFallen
    Replied on August 25, 2015 at 8:28 AM

    Vicki247

    Here's one way to accomplish what you may be looking for in Weebly.

    First - in the Weebly Editor click Design, select "Supports Backgrounds" then select a theme such as the "Make a Splash" theme - this theme allows you to have a different background image for each page if you wish...

    Here's an example of that theme using a Jotform with a transparent background placed on a page with your image as the background... you can see that each page has a different background. Easily done with no CSS...the form was embedded using iframe...   Hope this helps!!

    http://testjotform.weebly.com/

  • Charlie
    Replied on August 25, 2015 at 9:36 AM

    @Vicki247

    Thank you for updating us, I checked your website and did see that you used the pop-up window instead.

    If you needed any assistance again on this, please let us know.

    Thank you.

  • Vicki247
    Replied on August 25, 2015 at 10:45 AM
    Yes, for some reason embed and iframe showed a hugely magnified background image.....do you know why?  It would be nice not to have to use  popup
    ...
  • Charlie
    Replied on August 25, 2015 at 12:28 PM

    Hi,

    I'm checking your website and I see you are still using the pop-up, could you add it again there so that we can check it? However, please try using this custom CSS code instead:

    .supernova {  

        background-image: url(http://www.jotform.com/uploads/Vicki247/form_files/Dollarphotoclub_69509809.jpg);

        background-size: 100% auto !important;

        background-repeat: no-repeat !important;

        background-attachment: fixed !important;

    }

    Add it in your Form Designer, then try re-embedding using the iFrame or the default embed code. If the problem persists, please let us know and we will check your website to see what's the problem.

    How to embed jotform over background image in Weebly? Image 1 Screenshot 30

     

    Please note that when you used the custom CSS code, remove the background image in this option:

    How to embed jotform over background image in Weebly? Image 2 Screenshot 41

     

    We'll wait for your response.

  • Vicki247
    Replied on August 25, 2015 at 2:45 PM
    I  did what you  said. Now there is no background 
    ...
  • David JotForm Support
    Replied on August 25, 2015 at 5:32 PM

    I checked the form and it looks like the background image was set to a file that did not exist:

    http://www.release-the-stress.com/client-information.html/uploads/4/4/6/3/4463463/6457736_orig.jpg

    How to embed jotform over background image in Weebly? Image 1 Screenshot 20

    When I removed the background image link and added the CSS suggested by my colleague, this is the resulting form:

    http://support.jotform.com/form/52366320158957

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    It should embed properly in an iFrame.

  • Vicki247
    Replied on August 25, 2015 at 6:45 PM
    I dont understand what you are saying. Were yiu giving me instructions to correct it, if so, i need deeper steps to follow
    ...
  • Vicki247
    Replied on August 25, 2015 at 6:45 PM
    I  used the url for the background image same as what I  was given in last email
    ...
  • Elton Support Team Lead
    Replied on August 25, 2015 at 11:12 PM

    @Vicki247 

    I have fixed the background image on your form. Your CSS codes was lacking dot prefix on the supernova class selector.

    How to embed jotform over background image in Weebly? Image 1 Screenshot 60

     

    Now, since the form is embedded as iframe, you have 4 options on how the image background to appear on your page. It's either,

    1. Limit your iframe height and make the form scrollable so the image background fits perfectly on the page. This one I'd recommend.

    How to embed jotform over background image in Weebly? Image 2 Screenshot 71

    If you want, use this iframe embed code.

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/52339060448152" frameborder="0" style="width:100%; height: 600px;max-height:600px;border:none;" scrolling="yes"></iframe>

     

    2. Make the background 100% full height which would give you magnified image background since the image dimensions would resize according to the iframe height.

    How to embed jotform over background image in Weebly? Image 3 Screenshot 82

    3. Repeated background images

    How to embed jotform over background image in Weebly? Image 4 Screenshot 93

    4. Fixed image background positioned on top of the form (current style)

    How to embed jotform over background image in Weebly? Image 5 Screenshot 104

    Unfortunately, unlike the stand alone form, it is scrollable that's why it fits perfectly on the browser window just like option no. 1.

    Let us know if you have further questions. Thanks!

  • Ashwin JotForm Support
    Replied on August 26, 2015 at 8:28 PM

    Hello,

    On behalf of my colleague, you are welcome.

    If you need the image background to perfectly fit on full page, you will have to retain the scroll bar of your form.

    Thank you!

  • Vicki247
    Replied on August 26, 2015 at 8:45 PM
    thank you for hanging in there with me. I wish there wasnt a scroll bar on
    the side, but I guess we have no choice. Thanks again
    http://www.release-the-stress.com/client-information.html
    Community Coupons
    Webzenz.com *It Just Makes Cents to Use Webzenz *!
    Release-the-pain.com
    www.fixmyheart.co
    225 30th Street Sacramento, CA. 95816
    mobile: (916) 613-7099
    [image: https://www.linkedin.com/pub/vicki-mah/43/b96/301]

    Skype: vicki.mah
    ...
  • Vicki247
    Replied on August 26, 2015 at 9:45 PM
    Ok, thank you :)
    ...
  • Ashwin JotForm Support
    Replied on August 27, 2015 at 5:10 AM

    Hello,

    On behalf of all my colleagues, you are welcome.

    Do get back to us if you have any questions.

    Thank you!

  • Vicki247
    Replied on August 27, 2015 at 8:45 AM
    You guys are great and the product is sturdy, reliable,  and beautiful looking! 
    ...
  • David JotForm Support
    Replied on August 27, 2015 at 9:49 AM

    Thank you for the kind words!  If there is anything else we can assist you with, let us know and will be happy to help.