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

    How to embed jotform over background image in Weebly?

    Asked by Vicki247 on August 23, 2015 at 09: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?

    Page URL:
    http://www.release-the-stress.com/client-information.html

    weebly iframe background
  • Profile Image
    JotForm Support

    Answered by Charlie on August 24, 2015 at 03: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.

     

    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.

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

    Let us know if that works.

  • Profile Image

    Answered by Vicki247 on August 24, 2015 at 05: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 :)
    ...
  • Profile Image
    JotForm Support

    Answered by Charlie on August 24, 2015 at 09: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.

  • Profile Image

    Answered by Vicki247 on August 24, 2015 at 09: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 !
    ...
  • Profile Image
    JotForm Support

    Answered by Charlie 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.

  • Profile Image

    Answered by Vicki247 on August 25, 2015 at 01: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
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 25, 2015 at 04:04 AM

    Hello Vicki247,

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

    Thank you!

  • Profile Image

    Answered by Vicki247 on August 25, 2015 at 05:45 AM
    I  dont think Weebly replied,  but they usually do. Maybe it didn't show up in my email 
    ...
  • Profile Image

    Answered by msimpy on August 25, 2015 at 08: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/

  • Profile Image
    JotForm Support

    Answered by Charlie on August 25, 2015 at 09: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.

  • Profile Image

    Answered by Vicki247 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
    ...
  • Profile Image
    JotForm Support

    Answered by Charlie 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.

     

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

     

    We'll wait for your response.

  • Profile Image

    Answered by Vicki247 on August 25, 2015 at 02:45 PM
    I  did what you  said. Now there is no background 
    ...
  • Profile Image
    JotForm Support

    Answered by david on August 25, 2015 at 05: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

    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.

  • Profile Image

    Answered by Vicki247 on August 25, 2015 at 06: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
    ...
  • Profile Image

    Answered by Vicki247 on August 25, 2015 at 06:45 PM
    I  used the url for the background image same as what I  was given in last email
    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris 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.

     

    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.

    If you want, use this iframe embed code.

    <iframe id="JotFormIFrame" onload="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.

    3. Repeated background images

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

    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!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 26, 2015 at 08: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!

  • Profile Image

    Answered by Vicki247 on August 26, 2015 at 08: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
    ...
  • Profile Image

    Answered by Vicki247 on August 26, 2015 at 09:45 PM
    Ok, thank you :)
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 27, 2015 at 05:10 AM

    Hello,

    On behalf of all my colleagues, you are welcome.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by Vicki247 on August 27, 2015 at 08:45 AM
    You guys are great and the product is sturdy, reliable,  and beautiful looking! 
    ...
  • Profile Image
    JotForm Support

    Answered by david on August 27, 2015 at 09: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.