Embedded Form: The form is stretched after selecting additional fields

Hello

I am embedding an iframe to a framer.com website but encounter some issues where when the form is stretched after selecting additional fields, it does not contain within the frame.

Thanks

Hi acsupportbiz, 

Thanks for reaching out to Jotform Support. Can you share with us the URL of your website where you embedded your form so that we can check the issue?

As for your other concern, I've moved that to a new thread. You can check that out here.

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

Hello

Thank you for your reply.

Here is the website

https://www.acct-support.biz/application

Hi acsupportbiz, 

Thanks for getting back to us. I understand the issue, but I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

In the meantime, let us know if you have any other questions.

Hi acsupportbiz,

Thanks for your patience and understanding, we appreciate it. When I cloned and tested your form, the same thing happened for me when I embedded it on my test website using the iframe embed codes. After investigating a bit, I found that the issue is with the fixed height of the div element where your form is embedded under like you see in the screenshot below:

Iframes would just take up the space of its parent element. So, on a test website here, I was able to fix the issue by adjusting the height of the div element to 100% in the CSS codes like you see in the screenshot below:

Can you try what I did and see how it goes? If you run into the same issue again, let us know, and we'll do some more testing to see what's going on.

Keep us updated and let us know if you need any more help.

Hello

Thank you for looking into this. Is there a way I can edit the settings in Jotform? *See screenshot

Because I dont have access to the code from the framer interface.

I also want to make sure the code works for desktop and mobile within framer..

Hi acsupportbiz,

Thanks for getting back to us. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Thanks for your patience.

Thank you. Waiting for your reply

Hi acsupportbiz,

We really appreciate your patience and understanding while we look into this. I was able to replicate the issue on your site. However, when I embedded the form on a test site using WordPress, I couldn't replicate the problem. The iframe embed code is responsive and will automatically adapt based on the form size. Check out the screencast below to see my results:

To troubleshoot more, could you please try re-embedding the form using the iframe embed code without any modifications? If the issue persists even after re-embedding without modification, please let us know, and we'll investigate this matter further.

Keep us updated and let us know if you need any more help.

Hello. Yes I tried multiple methods but could not find a solution.

Please try with a free framer.com system, and advise how I can adjust it so that the iframe adjusts within the framer "frame" section.

Think what is needed is that the top side of the form is pinned in the fixed position, then when the form is expanded when user opens a hidded, the form expands and the frame fits the additional height.

This is just my thought, but please advise any other possible methods..

Thank you.

Hi acsupportbiz,

Thanks for getting back to us. Thanks for getting back to us. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Thanks for your patience.

Hi acsupportbiz,

Thanks for your patience. I tested your form through framer and was able to replicate the issue. If we use the "auto" on the height parameter, it works initially, but it seems that the website does not respond dynamically based on the form's changes.

The only solution I found is setting the parent element height to a fixed height and set it to a higher number, 7500 for example, and that will give enough space for the form to expand as needed.

If you'd like to set it dynamically, I recommend reaching out to Framer support team as the "auto" option for the height doesn't seem to be responding correctly.

Reach out again if you need any help.

Hi acsupportbiz,

Thanks for using Jotform. I have found a workaround when I tried embedding a clone of your form to Framer. Instead of using your form's embed codes, use its direct link like you see in the screenshot below:

Next, set the size of the section where your form is embedded as you see in the screenshot below:

Then, set the parent's height to Auto and Fit:

Check out the screenshot below to see the result:

The trick is to set the minimum and maximum height of the form in the section. To avoid showing double scrollbars, one for the form and another for the page itself, we hide the form's scrollbar by adjusting the width of the section to more than 100%.

You can find my test Framer website here. You can test it first to see if that would work for you.

Give it a try and reach out again if you have any other questions.