Announcement

Collapse
No announcement yet.

Code in form builder to embed in website: followup FYI

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Code in form builder to embed in website: followup FYI

    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.




  • #2
    Great to hear that that it works fine!
    Regards,
    Click & Pledge Support Department

    On Salesforce? Help us by rating our app: Click & Pledge Donor Management on AppExchange

    Join us @ the educational webinars: https://clickandpledge.com/webinars/
    Live Support available Join between 3:00 - 3:30 p.m. ET Monday - Thursday: https://clickandpledge.com/webinars/
    Are you on Salesforce? Join us at the Power of Us Hub: https://powerofus.force.com/0F980000000CjpC

    Comment


    • #3
      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.

      Comment


      • #4
        Good day @pflagpdx

        Would you please share the site URL where you have embed the code so that we can review it?
        Regards,
        Click & Pledge Support Department

        On Salesforce? Help us by rating our app: Click & Pledge Donor Management on AppExchange

        Join us @ the educational webinars: https://clickandpledge.com/webinars/
        Live Support available Join between 3:00 - 3:30 p.m. ET Monday - Thursday: https://clickandpledge.com/webinars/
        Are you on Salesforce? Join us at the Power of Us Hub: https://powerofus.force.com/0F980000000CjpC

        Comment


        • #5
          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.

          Comment


          • #6
            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.
            Regards,
            Click & Pledge Support Department

            On Salesforce? Help us by rating our app: Click & Pledge Donor Management on AppExchange

            Join us @ the educational webinars: https://clickandpledge.com/webinars/
            Live Support available Join between 3:00 - 3:30 p.m. ET Monday - Thursday: https://clickandpledge.com/webinars/
            Are you on Salesforce? Join us at the Power of Us Hub: https://powerofus.force.com/0F980000000CjpC

            Comment

            Working...
            X