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

    Need help making header image mobile responsive

    Asked by glennmark_ph on May 02, 2016 at 11:02 AM

    Is there something specific to set up with the mobile responsive widget. I installed it and could not get it to work with our header image.

    Page URL:
    https://form.jotform.me/61222760483452 

    Mobile mobile responsive style size font
  • Profile Image
    JotForm Support

    Answered by Charlie on May 02, 2016 at 12:46 PM

    Could you check if this cloned form that I have has the mobile responsiveness that you like: https://form.jotform.com/61224586592966. You can clone my form to have a version of it in your account. Here's how you can clone it: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    If that's correct, this is how I did it:

    1. In the "Form Cover" section in your Form Designer Tool, make sure to set the width to the same size of your form, in your case, it should be 690px. After that, make sure that the position and top position is set to center.

     

    2. After that, paste this custom CSS code in your form:

    .form-all:before {

        content : "" !important;

        background-image : url("https://www.jotform.com/uploads/glennmark_ph/form_files/SubscriptionPageHeader.png") !important;

        display : inline-block !important;

        height : 132px !important;

        position : absolute !important;

        background-size : 100% 100% !important;

        background-repeat : no-repeat !important;

        width : 100% !important;

    }

     

    Let us know if that works.

  • Profile Image

    Answered by GraceMarComm on May 02, 2016 at 04:12 PM

    It does decrease the size when adjusting window width but the image gets distorted. Doesn't maintain its proportions.

     

  • Profile Image

    Answered by victor on May 02, 2016 at 06:28 PM

    Since you are using the form cover for the image header:

    You require to add the CSS code provided by my colleague in the CSS tab

    When reviewing the form, I was not able to locate this code.