-
hanfuAsked on December 21, 2015 at 8:24 AM
The background image is showing when i draft the form, but after i publish the background pic disappear.
-
beril JotForm UI DeveloperReplied on December 21, 2015 at 9:20 AM
I've checked your form which is http://www.jotform.me/form/53533582420451 I am not able to reproduced same issue that you are having.
As far as I understand from your thread, you embedded your form to your website. Could you please indicate the URL of your page? This will help us better analyze the problem.
In addition to that, can you try to embed the form using the iFrame embed code?
http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code
I hope it helps.
If this does not resolve the issue, please let us know. We will try another solution.
-
hanfuReplied on December 21, 2015 at 9:09 PM
hmm... I try it at home, it look fine, should because of my company firewall.
Another issue is my custom CSS is not working. -
Chriistian Jotform SupportReplied on December 21, 2015 at 11:00 PM
Hi,
I checked your form and noticed that there were additional css added to the form that is not seen on the screenshot you have provided. I assume you wanted the .form-html img tag to align to the center of the form. You can try removing the text-align:center code and replace it with the following code:
display: block;
margin-left: auto;
margin-right: autoThis code should be inside the .form-html img tag, and will look like this:
.form-html img{
display: block;
margin-left: auto;
margin-right: auto;
}Do inform us if you need further assistance,
Regards. -
hanfuReplied on December 22, 2015 at 12:33 AM
OK, successfully move the border to the middle.
But background image (the big black chinese word"漢") is not appealing in live form... in the preview, i can see the big black chinese word.
-
CharlieReplied on December 22, 2015 at 1:59 AM
If you are referring to the background image in your "Text" field?
The reason why it is not showing in live preview is because the image is using HTTP in its link http://gdurl.com/h2Lj. Please note that when you are viewing your form's direct link it is using HTTPS protocol or SSL enabled.
Your form direct link:
https://form.jotform.me/53533582420451 - this is using SSL or secure link (HTTPS)
Your image URL:
http://gdurl.com/h2Lj - this is using HTTP which is unsecure
The form will not load the image because it is unsecure. To fix this, you'll need to host the image on an HTTPS protocol. Or you can follow the steps below:
1. Add an "Image" field and select "Upload Image File" in your form.
2. Make sure you have downloaded the image logo in your local storage then upload it here.
3. Now view the form in a new tab.
4. In the live preview, right click on the image and select "Copy image address". We will get the link of it.
5. In your CSS code, replace the image link using the one we have copied.
.form-html {
background-image : url('paste the copied image address here') !important;
background-repeat : no-repeat !important;
background-position : center !important;
}
.form-html img {
display : block !important;
margin-left : auto !important;
margin-right : auto !important;
}
6. You can now then remove the image file in your form by clicking the delete button or the "x" icon.
You can see how cloned form looks like after that change: https://form.jotform.com/53550776408966. The image is uploaded in our servers that uses HTTPS so it matches the form's HTTPS protocol. For other images, you can repeat the process.
Let us know if that works.