How can I make my form responsive

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?

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.

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?

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.

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

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!

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

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.

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;

}}

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!

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...

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.

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

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.

Thank you, now it works! :)

Hello askmeabout,

On behalf of my colleague, you are welcome.

Do get back to us if you have any questions.

Thank you!