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

    I would like for the form to display different images when loaded on mobile. Is this possible?

    Asked by art_crate on July 07, 2016 at 02:49 AM
    That is correct, I would like for the form to display different images when loaded on mobile. Is this possible?
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 07, 2016 at 03:13 AM

    Please follow the guide below to set it up:

    1. First you will need to identify the ID of the image that you want to replace for mobile. You can do so by using the Inspect Element feature of your browser. If you are using Chrome, hit CTRL+SHIFT+I on your keyboard to open the inspect element.

     

    2. Now once it is opened, click on the arrow icon on the top left. Then select the image that you want to modify. You will see the ID of the field above the 

     

    3. Now that you have the ID, you can now add the alternate image using custom css. In the example above, the ID of the field is #_d2, so we will use that in our code below:

    #_d2{

     background: url(http://i1048.photobucket.com/image.jpg) !important;

    }

    The yellow highlighted text will be the link to your alternate image. The green is the id of the field.

     

    4. Now to make sure that this css is only applied on mobile, we will insert the code above inside the @media query. You can see the example below:

    @media screen and (max-width: 480px){

    #_d2{

     background: url(http://i1048.photobucket.com/image.jpg) !important;

    }

    }                                            

    The blue highlighted text is the @media query, and the css for the image is inserted inside this query.

     

    5. Follow the steps 2 to 4 for the rest of the images that you want to replace in mobile, and your code should look like the one below, if not more.

    @media screen and (max-width: 480px){

    #_d0{

     background: url(http://i1048.photobucket.com/image.jpg)!important;

    }

    #_d1{

     background: url(http://i1048.photobucket.com/image.jpg)!important;

    }

    #_d2{

     background: url(http://i1048.photobucket.com/image.jpg)!important;

    }

    #_d3{

     background: url(http://i1048.photobucket.com/image.jpg)!important;

    }

    }                                         

     

    6. Now that you have the final code, we will need to inject this code into the custom css tab of your widget.

    Once you have updated the wizard, the image should now change when you view the form on mobile.
    Regards.

  • Profile Image

    Answered by art_crate on July 07, 2016 at 10:02 PM

    Chriistian Thank you so much for the detailed explanation! 

    I will let you know how it goes once I get it completed! 

     

    Thanks!