-
Vicki247Asked 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?
-
CharlieReplied 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.
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.
-
Vicki247Replied on August 24, 2015 at 5:45 AMThank 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 :)
... -
CharlieReplied 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.
-
Vicki247Replied on August 24, 2015 at 9:46 AMI 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 !
... -
CharlieReplied 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.
-
Vicki247Replied on August 25, 2015 at 1:45 AMI 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 SupportReplied 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!
-
Vicki247Replied on August 25, 2015 at 5:45 AMI dont think Weebly replied, but they usually do. Maybe it didn't show up in my email
... -
NJFallenReplied 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/
-
CharlieReplied 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.
-
Vicki247Replied on August 25, 2015 at 10:45 AMYes, 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
... -
CharlieReplied 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.
-
Vicki247Replied on August 25, 2015 at 2:45 PMI did what you said. Now there is no background
... -
David JotForm SupportReplied 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
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.
-
Vicki247Replied on August 25, 2015 at 6:45 PMI dont understand what you are saying. Were yiu giving me instructions to correct it, if so, i need deeper steps to follow
... -
Vicki247Replied on August 25, 2015 at 6:45 PMI used the url for the background image same as what I was given in last email
... -
Elton Support Team LeadReplied 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" 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.
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!
-
Ashwin JotForm SupportReplied 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!
-
Vicki247Replied on August 26, 2015 at 8:45 PMthank 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
... -
Vicki247Replied on August 26, 2015 at 9:45 PMOk, thank you :)
... -
Ashwin JotForm SupportReplied 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!
-
Vicki247Replied on August 27, 2015 at 8:45 AMYou guys are great and the product is sturdy, reliable, and beautiful looking!
... -
David JotForm SupportReplied 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.