Payment Form > Embed option: Image preview is not displayed correctly

  • Profile Image
    Angie Reisch
    Asked on October 28, 2020 at 03:07 PM

    Hello,

    I have a product form created through Jotform that displays product images properly when just using the Jotform link: www.mvpoftheyear.org/merch), the image box spans the whole page and you have to scroll down super far to see the image and the other images included in the carousel.

    This is the embed code that I've used. I removed the Javascript and just included the iframe code because I've had problems with competing scripts when embedding jot forms onto Squarespace.

      <iframe

       id="JotFormIFrame-203004345639147"

       title="MVP EXCLUSIVE MERCH PRE-ORDER"

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

       allowtransparency="true"

       allowfullscreen="true"

       allow="geolocation; microphone; camera"

          src="https://form.jotform.com/203004345639147"

       frameborder="0"

       style="

       min-width: 100%;

       height:3700px;

       border:none;"

       scrolling="no"

      >

      </iframe>


    Please advise.

    Thanks,

    Angie

    angie@tiedinmedia.com

    (214) 842-0557

  • Profile Image
    VincentJay
    Answered on October 28, 2020 at 05:45 PM

    Please try removing the code and use this guide on how to add the form to your Squarespace: https://www.jotform.com/help/37-adding-a-form-to-squarespace

    Please try it and let us know how it goes. Thank you!

  • Profile Image
    pinktie1000
    Answered on October 29, 2020 at 08:28 AM
    Hi I already followed this instruction sheet. The issue is still happening.
    ...
  • Profile Image
    Bojan_J
    Answered on October 29, 2020 at 08:46 AM

    Greetings.

    Please allow us some time to find the solution for you. As soon as we have more information, we will let you know.

    Thank you for your patience.

  • Profile Image
    Bojan_J
    Answered on October 29, 2020 at 09:04 AM

    This problem is happening because the form is displayed as a whole in the iFrame. To resolve this problem, you can update the height of the iFrame, however, this will add another scroll bar to your page. Please try to use the following iFrame code:

    <iframe
       id="JotFormIFrame-203004345639147"
       title="MVP EXCLUSIVE MERCH PRE-ORDER"
       onload="window.parent.scrollTo(0,0)"
       allowtransparency="true"
       allowfullscreen="true"
       allow="geolocation; microphone; camera"
       src="https://form.jotform.com/203004345639147"
       frameborder="0"
       style="
       min-width: 100%;
       height:3700px;
    max-height: 400px;
       border:none;"
       scrolling="yes"
      >
      </iframe>

    I've updated the scrolling option to yes and added max-height property, which you can adjust.

    I will also forward this problem to our Developers, and as soon as we hear back from them, we will let you know.

  • Profile Image
    pinktie1000
    Answered on October 29, 2020 at 09:28 AM
    Thanks for the update! I’ve added iFrame code that you’ve sent. This is a good temporary solution, but the additional scroll bar is a bit awkward to navigate. I will keep an eye out for an update to this from your developers. Thank you.
    ...