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

    Forward slashes breaking CSS

    Asked by hudsonwellness on May 27, 2016 at 01:21 PM

    Hi in our form we have a custom background; I used the following code to set the image:

    .myclass {background:URL('http://myimage.com/myimage.jpg'); }

    But when I look at the preview, the above url gets confverted to just 2 forward slashes. This breaks the form an the image is not displayed. Can you assist?

    Our form: https://form.jotform.com/61435837474160
    As you can see the .form-section class has a background set, but the the missing 'http:' is breaking it. How do we stop the removal when publishing?

    Page URL:
    https://form.jotform.com/61435837474160

    forward slashes JotForm jpg preview not displayed
  • Profile Image

    Answered by Ben on May 27, 2016 at 02:14 PM

    Could you please give us the exact code that you are adding to your form?

    The following for example should work:

    html.supernova {
        background-image: url("https://cdn.jotfor.ms//images/logo@4x.png?v3/");
    }

    Feel free to try and add that to your form and see if it works for you or not. If not then do let us know.

    In general, what you have described, should be something that works right away and does not get changed.

  • Profile Image

    Answered by hudsonwellness on May 27, 2016 at 03:45 PM

    Here's what happens and the code difference:

    http://i.imgur.com/E8KDPQt.png

  • Profile Image

    Answered by Ben on May 27, 2016 at 04:03 PM

    I took a look at your form and it works for me.

    This is the code that I can see:

    .form-section {
        background-image: url("//i.imgur.com/Os1HGsX.jpg");
    }

    Now, based on the image, I can see that the issue was related to the form opened over HTTPS  was calling image over HTTP.

    Security wise, that is a no-no so some browsers will just block it for you. Some other might show it due to the same being an actual image, even if it is loaded over HTTP.

    In general the current setup that you have above with // would be the best since it would load images over HTTP and over HTTPS depending on the protocol used at that moment.

    Please do let us know of course if you are still experiencing any issues.