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

    The background image is not displaying

    Asked by hanfu on December 21, 2015 at 08:24 AM

    The background image is showing when i draft the form, but after i publish the background pic disappear.

    Page URL:
    http://www.jotform.com//?formID=53533582420451

    Screenshot
    background image displaying publish draft after
  • Profile Image
    JotForm Support

    Answered by beril on December 21, 2015 at 09: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.

  • Profile Image

    Answered by hanfu on December 21, 2015 at 09: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.

     

  • Profile Image
    JotForm Support

    Answered by Chriistian 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: auto

    This 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.

  • Profile Image

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

  • Profile Image
    JotForm Support

    Answered by Charlie on December 22, 2015 at 01: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.