Embedded iframe form - Expanding Credit/Debit Card Function cut off

I have a problem with an embedded iFrame form that has clickable Debit/Credit card and PayPal payment options at the bottom.

When selecting Debit/Credit card, the form expands a little to show the card input fields ... but some of the fields are cut off.

I have tried all the suggestions to fix this I could find, including changing the style height parameters in the iframe code, and changing the scrolling code to "yes."

The scrolling code kind of works, but requires the user to click on the form to activate the scrolling, so not an ideal solution.

ALSO — this is definitely some kind of glitch, since if you select "Debit or Credit Card," and get the cut-off form, you can make the cut-off field appear by deselecting the product selection box, then reselecting it.

Also — the card icon shows up on top of the Card number field box for some reason.

If you go to the page linked below, you can see the problem by just clicking on the Debit or Credit Card button at the bottom of the form.

Then click on the "Renew AHSTC Membership" box to de-select it, and reselect it, and you will see the full Debit or Credit Card input fields.

Thanks for your help.

Here is a second screenshot showing how the form SHOULD look when the user selects Debit or Credit Card. (Only without the credit card icon showing up on top of the Card Number field. But I'd be happy just to solve this problem and have the whole form show up when user initially clicks on Debit of Credit Card button.)

Hi Kim,

Thanks for reaching out to Jotform Support. Could you try using the provided Iframe Embed code below?

<iframe

      id="JotFormIFrame-210376539475160"

      title="AHSTC Renewal "

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

      allowtransparency="true"

      allow="geolocation; microphone; camera; fullscreen"

      src="https://formjotform.claystructures.com/210376539475160"

      frameborder="0"

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

      scrolling="no">

</iframe>

<script src='https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js'</script>

<script>

      window.jotformEmbedHandler("iframe[id='JotFormIFrame-210376539475160']","https://formjotform.claystructures.com/");

      window.addEventListener('message', function(e) {

            var args = e.data.split(':');

            var iframe = document.getElementById('JotFormIFrame-210376539475160');

            if(args.length > 1 && args[0] == "setHeight") {

                 var newHeight = parseInt(args[1]) + 100;

iframe.style.height = newHeight + "px";

}

}, false);

</script>

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

Yes! That worked. Thanks very much.

*** Can I use this same code for other embedded iFrame forms on other websites having the same problem? After changing the JotFormIFrame ID number and name, of course.

OR is it just the new script at the bottom that is needed to fix the problem?

Hi Kim,

You can use the same code, but you will have to update the form ID, title, and height used on it as shown in the screenshot.

Let us know if there’s anything else we can help you with.

Great, thanks — Excellent customer service. Really appreciate getting a quick response that fixed the problem.

UPDATE: This fix has worked ... Except it is still happening when SOME people try to use the form on their phones. The bottom of the form is still getting cut off for them

It seems to depend on the phone, however. It looks OK on my iPhone, but I've asked others to check, and have seen it cut off. (Could also be the browser being used on their phone ... I didn't get that deep into it.)

Any suggestions for addressing this issue?

Hi Kim,

I tested your form to see if I could replicate the issue, and I ran into the same issue:

The code shared by colleague increases extra space below the form to make sure the buttons and the payment fields are visible. To fix this issue, you can simply increase the margin below the form, so the payment fields are always visible. To increase the extra space below the form, you can increase the value of 100 in the below line of code:

      var newHeight = parseInt(args[1]) + 100;

You can find it here:

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