The iFrame widget is not responsive in the Form

I am trying to create a menu form that allow the user to pick which form they are using. If you look at the forms I build it is called "inspection forms".

I am using radio buttons that direct the user to the correct Iframe widget that contains the URL for the correct form (using conditional logic)

The problem is that the form in the IFRAME widget does not show up correctly on the screen when in preview mode. For example, when view on a phone, the right side of the form is cut off. 

Can you help?

Please try the CSS code below:

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

iframe#customFieldFrame_8{

max-width:256px !important;

}

iframe{

max-width:256px !important;

}

canvas.jSignature{

max-width:256px !important;

}

div.form-all{

margin-left: 1px !important;

}

}

That did not work. Please see attached screen shot.

I have injected the following code in your embedded Form:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
.jotform-form {
 width: 100%;
}
}

Let us know how it goes.

Thanks.

Hello @Wolmestam

You can change the height of the iframe to 3700px to contain the full form.

Please replace the iframe code with the following:

<iframe id="JotFormIFrame-210422424136341" title="PICKUP/DROP OFF" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/210422424136341" frameborder="0" style=" min-width: 100%; height:3700px; border:none;" scrolling="no" > </iframe>

Notice however that the height is not responsive, so you'll need to add some CSS to your website page to fit smaller screen sizes.

You can use the following CSS code:

@media(max-width:768px) {iframe#JotFormIFrame-210422424136341 :height: 6750px;}

I hope that was helpful. Let us know if you need any further assistance.