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

    How can I make a graphic that is inserted at the top of the form in your design mode resize to different sizes based on the viewport width?

    Asked by yajohnson37068 on January 29, 2016 at 01:10 PM

    When I look at the Reeves Contact Form on a desktop, the image is fine. It is way too large on a cell phone.

    The website address is supplied below. The form is linked to by the email graphic:

    <a target="_blank" href="https://form.jotform.com/60146429307150" rel="nofollow" title="Click to Send Email"><img src="images/email-address.jpg" style="width: 85%; border:none; margin:0;"></a>

    Page URL:
    http://reeveswildliferemoval.com

    Screenshot
    top top of the form header Text image background image image header
  • Profile Image
    JotForm Support

    Answered by Mike_G on January 29, 2016 at 04:55 PM

    I have made a clone version of your form and went to its designer page. I can see that you have set the image as a background image which made it appear on the background of the form. 

    If you want to have it as a header, I would suggest you try this:

    First, remove the image you set as a background image of the form.

    Then, since you have the link to the image when you first uploaded it as a background of your form. https://files.jotform.com/jufs/yajohnson37068/form_files/header-reeves.jpg

    You can use that link to insert the image as the header of your form. Here's how:

     

    Above you will notice that I have used 378 as the width of the header, it is because your form's with is 450. Then, the padding of your fields for both sides totals to 72(36 each side). So that would be 450 - 72 = 378.

    Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by yajohnson37068 on January 29, 2016 at 06:04 PM

    Mike,

    This gets me closer, but your size for the graphic 378 x 210 is out of proportion when I do it. If I leave the width blank and check constrain it look correct. But the graphic is too wide when viewed on an iPhone 6. It does not appear to be adjusting to the size of the view port at all even though I have selected responsive in the Preferences.

  • Profile Image
    JotForm Support

    Answered by Mike_G on January 29, 2016 at 09:31 PM

    To fix that, we need the help of CSS codes which you can inject to your form. 

    Click this link to know how you can inject Custom CSS to your forms.

    Here are the CSS codes that you need to inject to your from:

    @media only screen

    and (min-device-width : 375px)

    and (max-device-width : 667px) {

    #id_10{

    padding-left: 0px !important;

    padding-right: 0px !important;

    }

    #id_10 img{

    width: 370px !important;

    }

    }

    Here's how it should look like on an iPhone 6.