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

    Setup different background images depending on what device the form is being viewed

    Asked by ipbr21054 on April 06, 2016 at 08:34 AM

    Here is the form 60705884010349

    Currently on the pc you will see this background applied  http://form.jotformeu.com/form/60705884010349

    But i would like the same form to show the background below on the ipad and not the one shown as on pc

    http://www.theremotedoctor.co.uk/jot-form-background/background.jpg

     

    Please advise if possible.

     

    Thanks

    different background
  • Profile Image
    JotForm Support

    Answered by Charlie on April 06, 2016 at 09:54 AM

    This should be possible by setting up the @media rule in your CSS code.

    I've cloned your form and added my own CSS code. Here it is: https://form.jotform.com/60963575263968. You can clone it to have a copy of it in your account.

    Here's the CSS code that I used:

    .supernova {

        height: 100%;

        background-image: url("https://shots.jotform.com/charlie/wsm-1.jpg");

        background-repeat: no-repeat;

        background-attachment: fixed;

        background-position: center top;

        background-size: 100% 100%;

        

    }

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

         .supernova {

            height: 100%;

            background-image: url("https://shots.jotform.com/charlie/background.jpg") !important;

            background-repeat: no-repeat !important;

            background-attachment: fixed !important;

            background-position: center top !important;

            background-size: 100% 100% !important;

        }

    }

     

     

    The background image URLs on my CSS code are hosted in my server. You need to get your own background image URL. 

    1st block of code: It sets the default background image on the desktop version.

    2nd block of code: It changes the background image when the form is viewed on a mobile device.

     

    Let us know if you need more help on this. 

  • Profile Image
    JotForm Support

    Answered by Charlie on April 06, 2016 at 10:14 AM

    I forgot to mention, to clone my form, you can follow this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

  • Profile Image

    Answered by ipbr21054 on April 07, 2016 at 06:31 AM

    Hi,

    I have added the code and entered my images for the background.

    The image shown on the ipad is still showing the same as on the pc.

    Pc should be image of a pier where ipad should be image of clouds.

    Iphone does not matter as form takes up most of the screen anyway.

  • Profile Image
    JotForm Support

    Answered by Charlie on April 07, 2016 at 09:36 AM

    I presume it's happening on iPad Pro? 

    Could you try this one instead:

    .supernova {

        height : 100%;

        background-image : url("https://shots.jotform.com/charlie/wsm-1.jpg");

        background-repeat : no-repeat;

        background-attachment : fixed;

        background-position : center top;

        background-size : 100% 100%;

    }

    @media screen and (max-width: 480px), only screen and (max-device-width: 1024px) and (orientation: portrait), only screen and (max-device-width: 1024px) and (orientation: landscape){

        .supernova {

            height : 100%;

            background-image : url("https://shots.jotform.com/charlie/background.jpg") !important;

            background-repeat : no-repeat !important;

            background-attachment : fixed !important;

            background-position : center top !important;

            background-size : 100% 100% !important;

        }

    }

     

    I have adjusted the max-device-width to 1024px and added a "only screen" on the code to be specific on mobile devices. 

    Here's my cloned form: https://form.jotform.com/60963575263968. Here's what it looks like in iPad Pro:

     

    Make sure to update the image links and remove the previous code or the ones that will conflict, to avoid problems. You can also just clone my form and edit the code there. Let us know if that one works.

  • Profile Image

    Answered by ipbr21054 on April 07, 2016 at 10:17 AM

    Hi,

    That has no affect on the ipad for me.

    I have ipad 1 & ipad 3 and both show pier.

    I have even looked online for ipad simulater and that also shows the pier ?

  • Profile Image

    Answered by ipbr21054 on April 07, 2016 at 10:21 AM

    Please edit my form using the background i require.

    Here is the code to use.

    http://www.theremotedoctor.co.uk/jot-form-background/background.jpg

     

    Also when i click the link for your cloned form i also see piere not cloud background.

    I have cleared cache etc ??

  • Profile Image

    Answered by Ipbr21054 on April 07, 2016 at 10:30 AM

    please wait a moment

     

  • Profile Image

    Answered by Ian  on April 07, 2016 at 10:46 AM

    seems ok now. 

    I do notice sometimes a white banner going left to right say in the lower half of the screen. 

    I need to tutu iPad to portrait then back to landscape for it to go before all looks fine. 

  • Profile Image

    Answered by Ipbr21054 on April 07, 2016 at 10:49 AM

    looks ok now so maybe a slight cache glitch. 

    I sometimes notice a white banner going across the page. 

    I need to turn portrait then back to landscape Before it looks ok ?

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 07, 2016 at 12:20 PM

    Glad to know that it is working now. 

    Regarding on the white banner, can you please provide a screenshot so we can further check? I don't see such issue on iPad 1 and 3 Emulators.

  • Profile Image

    Answered by ipbr21054 on April 08, 2016 at 10:40 AM

    I have viewed my forms all morning to see what happens and i can only see this white banner appear on this form 60854960060354 and only on ipad.

    Doesnt happen all the times but as you can see it does appear on the page

    Screenshot supplied.

  • Profile Image
    JotForm Support

    Answered by Charlie on April 08, 2016 at 12:20 PM

    The image links for your backgrounds are using non-HTTPS protocol, if you'll use the default form URL like this one: https://form.jotformeu.com/60854960060354. They won't appear. Unless you change the protocol for your form URL to HTTP only. I guess that's one thing we need to consider. Also, is the form embedded on a website? What exact URL you are visiting?

     

    In my case, I checked its form URL which is this one: http://form.jotformeu.com/60854960060354 (non-HTTPs). Here are the devices:

    iPad Pro:

    iPad 2:

     

    iPad 3:

     

    iPad Mini

     

    iPad Mini 2:

     

    I'm still unable to replicate the problem. Could you please provide us more specific details of the device you are using? What iPad device, version and browser you are using? If the problem doesn't show up on other devices and only specific on that iPad, then it might be more related to the browser or the device itself.

  • Profile Image

    Answered by Ipbr21054  on April 08, 2016 at 03:09 PM

    Hmmm

    strange because my other forms are ok. 

    Go here https://www.ebay.co.uk/ulk/itm/111941217940

    click on item description. 

    You then select office email to then be taken to the form. 

  • Profile Image

    Answered by Huberson on April 08, 2016 at 04:39 PM

    I have previewed the form from the provided link and could not replicate your issue either. I go to the address -  https://www.ebay.co.uk/ulk/itm/111941217940 and click the 'Office Email' link. See bellow 

    Can you confirm for us if you still experiencing this on your side.

  • Profile Image

    Answered by ipbr21054 on April 09, 2016 at 05:47 AM

    Hi,

    Today this problem has now gone.

    Glitch maybe ??

     

    Thanks for the help.

  • Profile Image
    JotForm Support

    Answered by Jan on April 09, 2016 at 07:44 AM

    Glad to hear the the problem is now gone. If you're still experiencing this problem on your end, let us know so that we can further investigate about the issue. Thank you.