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.

Hello. Thank you for your support. I got a little confused so please allow me to ask some questions.

1. So I need to create the section with a frame first?
2. Then insert the embed function and set my Jotform URL?
3. What are settings for the mobile?

If you could guide me once again would be very much appreciated thanks!

Tyler

Hi Tyler,

You will use the Embed element in Framer and instead of selecting HTML in its Embed settings, you will select URL and paste the direct link to your form as you see in the screenshot below:

The same settings should work as it supposed to on mobile devices. Take a look at the screenshot below to see my results:

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

Hello. Ok, So I don't need to insert a frame, instead just create the layout with the embed insert?

When I see on mobile, the bottom part of the form is cut off.. can you guide me on the settings so mobile works as well 🫶

Oh sorry, my mistake on the mobile. the bottom part was the t&c agreement. please disregard

Hi acsupportbiz, 

I cloned your form and tested it to see if I could replicate the issue, but everything was working properly. Check out the screenshot below to see my results:

Please share a screenshot of what you see on your end with the device details you are using to view the form and we'll do a more in-depth investigation and work on finding a solution.

Once we hear back from you, we'll be able to move forward with a solution.

Ok I think I am good thanks!

btw, how do I remove the Jotform brand at the end of my form? Thanks

Hi acsupportbiz,

Our system indicates that the "Show Jotform Branding" has already been disabled on your account. When I checked your website, I couldn't seem to see your form. In any case, I've gone ahead and cleared your form's cache which should help enforce your Jotform Branding settings. If it is showing again, let us know together with the direct link to your website where the form is embedded so we can check it out and see what's going on further.

Let us know if you need any help.