Make the form responsive on iPhone 6 Plus

killmeal

Asked on September 17, 2015 at 7:02 AM

but it can not responsive form in all smart phone.

Can you help me? thanks again!
Jan

Replied on September 17, 2015 at 7:16 AM

I checked your webpage (http://www.mykillmeal.com/form/game.html) and the direct form (http://form.jotform.me/form/52590950729464) and I can see that the form is responsive.

We have a guide on how to make your form mobile responsive if you need one.
2maxsing

Replied on September 17, 2015 at 10:43 PM

Hi ,thank you very much, but I can't see the responsive form under my webpage,

I will show the screen capture for you by iphone 6 plus, it is not a responsive form

(http://www.mykillmeal.com/form/game.html):
2maxsing

Replied on September 17, 2015 at 10:49 PM

And i will show the direct form (http://form.jotform.me/form/52590950729464) on iphone 6 plus, it is a responsive form

I hope I can show the form on my webpage like as direct form, thanks a lot!
beril JotForm UI Developer

Replied on September 18, 2015 at 3:50 AM

Hi,

Can you copy and paste the code below to your CSS from Designer?

/*-----------RESPONSIVE LAYOUT-----------*/

.form-line.form-line-column {

width: 100% !important;

margin-left:0

}

.form-line{

width: 100%;

}

.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-buttons-wrapper{

margin-left:0 !important;

}

.form-input {

width: 100% !important;

}

.form-all{

width: 75% !important;

}

.form-sub-label-container {

width: 100% !important;

display: block !important;

}

Here is how to do this:

1) Click on Setup & Embed.

2) Click on Designer.

3) Click on CSS.

4) Copy & paste the code above to CSS.

5) Click on save button.

Here is how it works:

Let us know, If it works properly or not. We will be glad to assist you. I am waiting your response.
killmeal

Replied on September 20, 2015 at 10:24 PM

HI, thank you for your reply, I have followed the step.

However, I happen that:

1. It also can't show the responsive form in iphone6.

2. It can show the responsive form in android system, but it can't scroll to the bottom, you can see a picture as below where i can scroll, thanks a lot!
Ben

Replied on September 21, 2015 at 9:20 AM

Please note that the form is responsive - just as you have mentioned it yourself above:

And i will show the direct form (http://form.jotform.me/form/52590950729464) on iphone 6 plus, it is a responsive form

What this means is that the form is responsive, but your website - or at least the part where the form is embedded in - is not.

Now there are 2 things that I would suggest to do, both are about changes on your own website.

The first is to add the following CSS:

@media screen and (min-width:768px) {
#JotFormIFrame {
    min-height: 3600px;
}
}
@media screen and (max-width:360px) {
#JotFormIFrame {
    min-height: 4200px;
}
}
@media screen and (max-width:320px) {
#JotFormIFrame {
    min-height: 4110px;
}
}

You should add it in the <head> part of your website. What we do with it is to set the various heights that the form needs to be fully shown on your website.

Now the second code is this:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

With it we are setting both html and body elements of your website to take the full size of the page available, which will in turn set the maximum size of the elements holding the form as well.

Once you add the code above, it should look properly - it looks OK for me while testing it out, but do let us know if it does not look good for you and if so a screenshot, as above, would be great to be able to see the same what you see.