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

    Auto-fit form to width of any device (inject CSS?)

    Asked by GCfacilityops on January 06, 2014 at 03:16 AM

    Does anyone know if this is possible? I have found this line but I don't know if/how it works in jotform..

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user- scalable=0" />

    inject CSS JotForm meta style size name
  • Profile Image
    JotForm Support

    Answered by EltonCris on January 06, 2014 at 09:32 AM

    Hi,

    That code is added on every forms when you use your stand alone form. You can check that on your form source code, e.g. http://www.jotform.co/form/33635714840859

    ---

    If you'd like to auto-fit the form width (and input width) to any device including desktop, you can use the following CSS codes and inject it to your form.

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-label-left, .form-label-right{

    width: auto !important;

    }

    .form-input {

    width: 100% !important;

    }

    .form-all{

    width: 95% !important;

    }

    .form-sub-label-container {

    width: 100% !important;

    }

    If you want to exclude desktop device, you can use specific media queries for mobiles. Just let us know if this is what you want.

    Thanks!

  • Profile Image

    Answered by GCfacilityops on January 06, 2014 at 04:48 PM

    Thanks EltonCris. I have noticed that the form fields auto-fit to device screens but the only issue I have is getting an image to auto-fit with the rest of the form. And it doesn't help that I am not very experienced with coding.

    What I would like is to have the image/form width defined at 600 when opened on a computer, and for it to auto-fit on any other device. 

    Is this possible?

    I tried injecting the code you provided but the image still did not auto-fit.

  • Profile Image
    JotForm Support

    Answered by Mike_T on January 06, 2014 at 05:22 PM

    I have cloned your form and added the following CSS:

    @media only screen and (max-device-width: 550px) {
    .form-image {
    width: 100%;
    }
    }

    It seems to be working as expected:

    http://form.jotformpro.com/form/40056442791958

    Thank you.

  • Profile Image

    Answered by GCfacilityops on January 06, 2014 at 10:24 PM

    Thanks Mike, really thank you.

    Last question, can I now define the height of the image on devices in hopes to maintain the aspect ratio of the image I'm using as a header? Alternatively, can we scale the image size to auto-fit instead of only shrinking the width?

  • Profile Image
    JotForm Support

    Answered by Welvin on January 07, 2014 at 01:57 AM

    Hi,

    Instead of the codes given by my colleague above, use this one:

    @media only screen and (max-device-width: 550px) {

    .form-image {

    width: auto;

    height: auto

    }

    }

    Let us know here for the results. The above codes should auto fit the image.

    Thanks

  • Profile Image

    Answered by GCfacilityops on January 07, 2014 at 02:28 AM

    Thanks Welvin. Your code is exactly what I was after, except I used "width: 100%; height: auto".

    For anyone else who wants to get an image to auto-fit to any device smaller than your form's static width, follow the instructions in this thread.

    Can I add a string for user scalable?

  • Profile Image
    JotForm Support

    Answered by Welvin on January 07, 2014 at 03:59 AM

    You are welcome. Both should work best for your requirements.

    User scalable is already added to our form. If you need that to your website, then I think you can go ahead and add that.

    Thanks