Code in form builder to embed in website: followup FYI

[CnP.Support.AM]

Good day @pflagpdx

Sorry for the inconvenience. We understand your situation about the iFrame height adjustment based on the page resizing but as of now we don't have any auto adjustment of iFrame height for embedded code.

We are working hard to make this forms more stable and customizable and hopefully in future releases we will have the feature you are looking for.

[pflagpdx]

https://develop.pflagpdx.org/donate

this is a site finishing up development so there may be some tweaking going on. I have copied over the above "production" page to develop.pflagpdx.org/donate-copy and created a couple of test cases that more clearly showed the behavior: these have a 2-column layout in which the form is (case 1) in the right hand column, and (case 2) the form is in the left hand column. The production page has a single column format which behaves reasonably.

Testing with donation-copy does not exhibit the problem I initially had with the 2 column format; in that situation, the left hand column (filled with text) dominated the page responsive behavior whereas the form shrunk down to zero width quickly. Currently, the test page scales relatively easily...BUT, has the annoying behavior of not being able to vertically resize the page as the column narrows, throwing a scroll bar into the column. This I suspect comes from the nature of the form content not being fully visible to the code controlling page and column responsive behavior. In any case, I found that there are two places that needed changing the height parameter, not one.

[CnP.Support.AM]

Good day @pflagpdx

Would you please share the site URL where you have embed the code so that we can review it?

[pflagpdx]

A further note on this: if you study the generated code and the examples above, you will notice that the embed-container embed {} class contains a height:auto specification as well. I observe that in your old code, this was height:2000px. So there are a couple of places at least in this code that will determine whether or not the form scrolls. Note also that if you insert this form in a responsive webpage as one column of a multicolumn layout, and the page gets too narrow, the form may disappear! (This is with a Beaver Builder page builder). It's best to have the form be the sole element of the page.

[CnP.Support.AM]

Great to hear that that it works fine!

[briegull]

The other day in the call-in Kami brought in a programmer to help us figure out a problem with the height of the embedded iframe form from a campaign form copied into a Wordpress page. I had copied the code from the form builder. Changing the height of the container worked. Today I had to make some changes to the text of the form, and to save it to a different campaign, so I copied the new form code over to my web page, fortunately also saving the old code which was working but pointing to the wrong C&P iframe source. And the height was truncated. So I compared the older code to the newer code and found the problem, which I share with you below. Replacing the newer code with the older code, just changing the C&P iframe source, works.

The problem seems to be in the highlighted phrase: (note I had to change the height to 2000px but otherwise this is copied directly from the Connect formbuilder)

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 2000px; overflow: auto; -webkit-overflow-scrolling:touch; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 2000px; }</style><div class="embed-container"><iframe SRC="https://connect.clickandpledge.com/w/Form/692d1a36-edff-4411-8b04-e29f69eefe0c" width="100%" height="2000" frameborder="0" scrolling="auto" allowfullscreen="allowfullscreen"></iframe></div>

For reference, this is the older code, which worked after the height was changed:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 2000px; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 2000px; }</style> <div class="embed-container"><iframe src="https://connect.clickandpledge.com/w/Form/4d2ba37f-7bc8-43c2-bb2d-c7d7eceefa05" width="300" height="2000" frameborder="0" scrolling="auto" allowfullscreen="allowfullscreen"></iframe></div>

SO it works, and I'm happy, this is just an FYI.