Embedded form not looking good in mobile

I have another question for you.

When I use the Iframe for the form to be inserted in my website, it looks okay in the desktop but when I have a look at it in a cellphone, it looks bad, is there any way it could look fine in mobile devices as well?

Keep in mind that I don't have any knowledge of CSS code.

Looking forward to your comments.

Thank you!

Hi Gabriela, 

Thanks for reaching out to Jotform Support. Can you take a screenshot of what’s happening and send it to us? This guide will show you how to do that. If you can also send us the URL of your site so we can check it on our end. Also, have you tried the script type embed? Let me show you how:

• In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
• In the menu on the left side of the page, click on Embed.
• Now, click on the Embed option, and copy the code.
• That's it. Embed your link on your webpage and you're done.

Give it a try and let us know if you have any other questions.

Hi Mikhail.

Thank you for reaching out to me.

Yes the option you showed me is the one I used to insert it in my website.

It looks really good, not a problem.

but when you look at it via mobile... it looks like this:

Everything is out of proportion.

Thank you

Hi Gabriela,

Thanks for getting back to us. I’m sorry you're having difficulties with this. I’ll do my best to help you. I checked your website here but I can't seem to find your embedded form. Can you give us the link to a page on your website where we can find your embedded form? I only found a button that redirects to your form URL here.

Can you tell us if the issue in your screenshots happens to every mobile device and browser you tried your embedded form on? What devices and browsers have you tried to test the issue? Is it only happening when using a specific device? For example, is it happening on an iPhone but not on an Android? In other web browsers, but not on Google Chrome?

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

As the form in mobile device (iPhone and Android) didn't display properly, I decided to link the button to the form since the embedded version didn't look okay and the site is live.

But at the very beginning I tried with the code, and even though in the desktop/browsers it displays perfect, when you look it up in a cellphone the result is not good at all.

Thank you,

Gabriela

Hi Gabriela,

Thanks for getting back to us. I checked the form using the BOOK HAVaNA button on your webpage and everything worked fine the way it was supposed to. Take a look at the screenshot below to see my result:

Is it okay with you to add the form to your webpage this way or do you want it to be embedded on your webpage? If the latter, I suggest embedding the form again so that we can further check the issue and provide you with a custom CSS code that will resolve the issue. Also please try to embed the form using the code below to see if that would make any difference:

  <iframe

id="JotFormIFrame-241024780785156"

title="Reservacion de Vuelo MIA-HAV-MIA"

onload="window.parent.scrollTo(0,0)"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://form.jotform.com/241024780785156"

frameborder="0"

style="min-width:100%;max-width:100%;height:539px;border:none;"

scrolling="no"

>

</iframe>

Give it a try and let us know how it goes.