How to make an iFrame mobile responsive?

An alum says she has been trying to make a donation and it didn't work.  There wasn't a "Submit" button.  She's using an iPhone 8.  Is this a known issue?  Is there something wrong with our form?

Do you have a website where you can embed the form? You can try embedding the form to your site and add the code below. This will allow you to adjust the form that is loaded in iFrame.

You can check and test my sample site here.

<style type="text/css">

  @media screen and (max-width: 360px)

{

     iframe#JotFormIFrame {

          min-height: 2930px;

     }

}

</style>

<iframe frameborder="0" scrolling="no" style="width:100%; height:2100px; border:none;" src="//form.jotform.com/72915749320157" allowtransparency="true" onDISABLEDload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe><br>

<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

Let us know if you have any questions or if you need further assistance. 

I appreciate your time, but I don't understand.

Apparently this was not an isolated case?  Does the iPhone 8 require that JotForms be in iFrames?

If so, do all of us (JotForm customers) need to insert that code into all of our forms, in order to have them work on the iPhone 8?  That seems like a pretty complicated solution.  Where do we insert it?

Does JotForm have a plan for compatibility with the iPhone 8?  What is the time frame?

Or are you saying that our form already is an iFrame form, and that is the problem?  That might be the case, based on the title that you put on this thread.

I have more questions than I did before!  So please advise.  Thanks!

What URL are you sending your users to fill the form?

Is your form embedded on a website? If yes, can you paste the URL of the website here?

Apparently this was not an isolated case?  Does the iPhone 8 require that JotForms be in iFrames?

iPhone 8 does not determine if the form should be in an iframe or not. If you want to embed your form on a website and not use the standalone URL (https://form.jotform.com/72915749320157), then your form will be injected on that website as an iframe. 

If so, do all of us (JotForm customers) need to insert that code into all of our forms, in order to have them work on the iPhone 8?  That seems like a pretty complicated solution.  Where do we insert it?

Again, that depends. If you need the form to be a part of a website, then you should embed it which means there will be an iframe.

Does JotForm have a plan for compatibility with the iPhone 8?  What is the time frame?

JotForm forms are mobile responsive. iPhone 8 is no exception.

Or are you saying that our form already is an iFrame form, and that is the problem?  That might be the case, based on the title that you put on this thread.

I can see that you have embedded 3 forms in a form. This may be causing the problem that the submit button is not visible. I could not reproduce the issue.

Please try adding this CSS code to the main form and see if the issue persists.

iframe {
    min-height: 2000px;
}

I would recommend redirecting the users to the appropriate form after selecting the option. (How will you support this year's Annual Fund?)

Thanks... Can we start over?  We like the lightbox style.  Also, forcing all the forms to open as iFrames would cause problems with our web site designers, so I'd like to avoid that.

On our main Annual Fund form, when you choose from "How will you support this year's Annual Fund" a new form opens up -- one of the three other Annual Fund forms.  (Of course, the donor doesn't know that it's a new form opening up; it looks like they never left the main form.)

I think I have to lengthen the forms for "Make a one-time gift" and "Divide my gift into several automatic payments."  On some iPhones, the "Submit" button at the bottom is either partially or entirely hidden.  The donor needs to see the "Submit" button and click on it.

Can I make the forms longer without changing them into iFrames?

I've tried to add a harmless image below the "Submit" button, but that didn't seem to help.

Thanks for your help....

If you don't want to load other forms inside a form, you can just use the "Section Collapse" element. 

In your case, you will need to create 3 "Section Collapse" element for:

Make a one-time gift 

Divide my gift into several automatic payments 

Make a pledge

You can then add those fields that you have in your 3 other forms inside each "Section Collapse".

Once all three collapse element has all the fields needed, you can show / hide them base on conditional rule whether which option was selected by the user. Ex. if "Make a one-time gift" is selected > Show Section Collapse # 1. 

Here's a sample screencast https://screencast-o-matic.com/watch/cFnl0uoH8M so you can see and have an idea how it works.

One of the forms uses Authorize.net to collect one-time donations, and another one uses it for "subscriptions".  This is why I use separate forms, not just sections.

How can I make the forms longer so that all mobile devices will see the "Submit" button at the bottom?  (Without changing them into iFrames)

Thanks....

The main form will need to be embedded on your web page, the form should automatically change its height if the default embed code is used, the same will happen if you use the iFrame code and include the JavaScript part. 

Now, as far as I understand you are using the direct link to your form, so it's not embedded anywhere, please do correct me if I'm wrong. If I'm correct then your main form is displaying properly and you need to get rid of the scroll bar on the payment forms that are embedded on the main one. 

If so, then I'm afraid that it will not be possible to achieve, the iFrame embed widget can have a fixed height only and it will always have a scroll bar so the users can scroll over the form to get the entire content. 

Just an update.  I edited the forms so that the Submit button comes into view on the iPhone 8, but so far, not on the iPhone 5S.

By "edited the forms" I mean that I spread one multiple-choice question across two columns, and I decreased the height of the Comments box.

Out of all iPhone users, market share for the 5S is probably about 12% percent, and shrinking.  So at least I have that going for me!  ;-)