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 my form responsive

    Asked by askmeabout on March 09, 2015 at 12:23 PM

    We want to make input fields height and fonts of our forms to be flexible depending on the rezolution of the monitor. How can we do it?

    height input fields fields height mobile responsive
  • Profile Image
    JotForm Support

    Answered by david on March 09, 2015 at 01:20 PM

    Hi,

    Your form should automatically resize to fit your screen size.  If it does not, enabling mobile responsiveness should allow for more responsive formatting:

    http://www.jotform.com/help/311-How-to-make-forms-Mobile-Responsive

    If this still doesn't allow your form to respond to screen size, let us know the form you are working on and we will be happy to help you get things adjusted.

  • Profile Image

    Answered by askmeabout on March 10, 2015 at 06:51 AM

    We enabled "responsive form" but it doesn't work.

    We work with form ID=42601818104143. We are trying to make input fields height different on 1366px width resolution and 1920px width resolution.

    We tried to use @media (max-width: 1366px) {} styles, but it didn't work.

    Which way we can make it?

  • Profile Image

    Answered by Ben on March 10, 2015 at 11:29 AM

    I will give you the media queries that you should use for resolutions up to the specified widths:

    Styling browser internal resolutions up to 1920px in width
    @media screen and (max-width: 1920px)
    {
       .classGoesHere {}
    }

    Styling browser internal resolutions up to 1366px in width
    @media screen and (max-width: 1366px)
    {
       .classGoesHere {}
    }

    Please note that this is the size of the browser. Since you say that you want to based these on the resolution, you might want to set them based on the actual monitor resolutions (I would suggest using the above instead)

    Styling resolutions up to 1920px in width
    @media screen and (max-device-width: 1920px)
    {
       .classGoesHere {}
    }

    Styling resolutions up to 1366px in width
    @media screen and (max-device-width: 1366px)
    {
       .classGoesHere {}
    }

    Do let us know if you have any further questions.

    Also, in regards to the mobile responsive feature, please note that you must turn both options on, just like shown in the guide, turning only one of them will provide you with different results - so you can check them as well.

  • Profile Image

    Answered by askmeabout on March 11, 2015 at 04:23 AM

    Thank you. But we still have problem.

    We turned both options on.

    Our css code

    ----------------------------------

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

        .form-textbox {

            height : 35px;

            border-radius : 6px;

            background : #fff;

            padding-left : 15px;

        }

     

    }

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

        .form-textbox {

            height : 30px;

            border-radius : 6px;

            background : #fff;

            padding-left : 15px;

        } 

    }

     

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

        .form-textbox {

            height : 25px;

            border-radius : 6px;

            background : #fff;

            padding-left : 15px;

        }

    }

    ------------------------------

    As a result for any screen width we've got height 25px as it was 1024 or less width.

    Here is the page http://new.queens.by/new1.php

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 11, 2015 at 09:32 AM

    Hello askmeabout,

    Please use the following custom css code in your form and see if that helps you:

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

        .form-textbox {

            height : 35px !important;

            border-radius : 6px !important;

            background : #fff !important;

            padding-left : 15px !important;

        }

    }

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

        .form-textbox {

            height : 30px !important;

            border-radius : 6px !important;

            background : #fff !important;

            padding-left : 15px !important;

        } 

    }

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

        .form-textbox {

            height : 25px !important;

            border-radius : 6px !important;

            background : #fff !important;

            padding-left : 15px !important;

        }

    }

    Do try it out and get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by askmeabout on March 12, 2015 at 01:29 AM

    The issue persists. We've tried your code, no changes.

  • Profile Image

    Answered by Ben on March 12, 2015 at 01:35 PM

    I believe that the issue is caused by having a lot of code for the same thing:

    From your Forms style as it happens from top to bottom:

    .form-textbox {
      height : 35px;
      border-radius : 6px;
      background : #fff;
      padding-left : 15px;
    }

    ....

    .form-textbox {
      height : 35px;
      border-radius : 6px;
      background : #fff;
      padding-left : 15px;
    }

    ....

    .form-textbox {
      height : 35px;
      border-radius : 6px;
      background : #fff;
      padding-left : 15px;
    }@media screen and (max-device-width: 1920px){
      .form-textbox {
        height : 35px !important;
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }}@media screen and (max-width: 1920px){
      .form-textbox {
        height : 35px !important;
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }}@media screen and (max-device-width: 1366px){
      .form-textbox {
        height : 30px !important;
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }}@media screen and (max-width: 1366px){
      .form-textbox {
        height : 30px !important;
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }}@media screen and (max-device-width: 1024px){
      .form-textbox {
        height : 25px !important;
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }}@media screen and (max-width: 1024px){
      .form-textbox {
        height : 25px !important;
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }}

    What I would do is next:

    1. remove all max-device-width as mentioned in my first reply I would suggest using the first option only (max-width) option.

    The first few options will be seen as defaults (the one without @media) so you should remove them completely - based on what I think you are trying to achieve.

  • Profile Image

    Answered by askmeabout on March 13, 2015 at 04:52 AM

    We still have the same problem after changes that you adviced. Here is the last version of our css code

     

    .form-textbox {

      height : 35px;

      border-radius : 6px;

      background : #fff;

      padding-left : 15px;

    }

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

      .form-textbox {

        height : 25px !important;

        border-radius : 6px;

        background : #fff;

        padding-left : 15px;

    }}

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

      .form-textbox {

        height : 30px !important;

        border-radius : 6px;

        background : #fff;

        padding-left : 15px;

    }}

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

      .form-textbox {

        height : 35px !important;

        border-radius : 6px;

        background : #fff;

        padding-left : 15px;

    }}

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 13, 2015 at 08:10 AM

    Hello askmeabout,

    Can you please share a screenshot of how you see the form fields in your mobile device? The following guide should help you on how to add image in forum post:  http://www.jotform.com/answers/277033 

    Are you actually checking your form/webpage in mobile device or you are just changing the resolution in your monitor?

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by askmeabout on March 13, 2015 at 10:37 AM

    We are just trying the form to have the same proportions with different width of browser, but not in mobile devices.

    we are trying to use different text input field height with 1024/1366/1920 px width of browser (you can see it in our code)

    But as a result for all of these browser width sizes we have the same height, the one that is described the last in css.

    You can see the result on this page http://new.queens.by/new1.php

    It would be great to contact with you somehow online (skype or any other chat) as our discussion lasts almost a week already...

  • Profile Image

    Answered by Ben on March 13, 2015 at 12:04 PM

    Could you please confirm if the resolutions are depending on the width and height, or only on the width of the browser screen?

    When I was looking at the page, it seems that it will change depending on both.

    If that is the case I presume that these are the resolutions you are looking to build your page for?

    1024 * 768
    1366 * 768
    1920 * 1080
    1920 * 1200 ( or maybe this one? )

    If so these are the screenshots of each:

    1024*768

    1366*768

    1920*1080

    The form changes as the page changes, but the text fields seem to be always of the same height.

    The reason for this is the order of the rules.

    Please note that I have added the rules from the biggest resolution at the top to the lowest at the bottom and without any !important tags.

    Since you have set them the other way around, the maximum resolution will take precedence as it matches and is the last one in - the CSS could be said is read from the bottom to the top since it sees the last rule as more important than the previous rule.

    Please try removing it and add this instead:

    @media screen and (max-width: 1920px){
      .form-textbox {
        height : 35px !important;
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }}@media screen and (max-width: 1366px){
      .form-textbox {
        height : 30px !important;
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }}@media screen and (max-width: 1024px){
      .form-textbox {
        height : 25px !important;
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }}

    This should work, but in case it does not do let us know.

    It would be great to contact with you somehow online (skype or any other chat) as our discussion lasts almost a week already...

    Unfortunately our chat is not available at this time, but we are working on having it running as much as possible while the Skype support is not offered at all (at this time).

    The best way to resolve this is however over forum since it allows us to see what was done and to best understand what you are after and we would be happy to further assist you with this if so is needed.

  • Profile Image

    Answered by askmeabout on March 16, 2015 at 08:03 AM

    Thank you, but it doesn't work. Now we have the last rule  height : 25px working for all the resolutions.

  • Profile Image

    Answered by Ben on March 16, 2015 at 09:32 AM

    Oh OK, I see that there is !important in my CSS above, not sure how that got there.

    Form page: http://new.queens.by/new1.php

    Now thinking about it, we have been concentrating on the screen resolution, which is why it is not working. We should have been concentrated on the actual width that the form gets on these sizes and from what I can see the only difference in the form size is for the resolution up to 1920 and after

    .form-textbox {
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }
    @media screen and (min-width: 450px){
      .form-textbox {
        height : 35px;
    }}@media screen and (min-width: 313px) and (max-width: 449px) {
      .form-textbox {
        height : 30px;
    }}

    I have also modified the CSS code slightly as to make sure that it would not affect the other code.

    If you want to style the form for 1366px width resolution, you would first need to make some changes in the width of the iframe - which you can do with some CSS on your website.

    For example:
    <style type="text/css">
      @media screen and (max-width: 1366px){
        #JotFormIFrame.m_frame {
          width: 350px;
      }}
    </style>

    This would allow you to add a form rule as well such as this one:

    @media screen and (min-width: 350px) and (max-width: 449px) {
      .form-textbox {
        height : 30px;
    }}

    and change the ones above so that total CSS would be:

    .form-textbox {
        border-radius : 6px;
        background : #fff;
        padding-left : 15px;
    }
    @media screen and (min-width: 450px){
      .form-textbox {
        height : 35px;
    }}
    @media screen and (min-width: 350px) and (max-width: 449px) {
      .form-textbox {
        height : 30px;
    }}
    @media screen and (min-width: 313px) and (max-width: 349px) {
      .form-textbox {
        height : 25px;
    }}

    Do let us know how it goes.

  • Profile Image

    Answered by askmeabout on March 19, 2015 at 04:19 AM

    Thank you, now it works! :)

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 19, 2015 at 08:29 AM

    Hello askmeabout,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!