Hi. Why are the sides of my form getting cut off when I apply the code in Squarespace? Thanks!

Hi. Why are the sides of my form getting cut off when I apply the code in Squarespace? Thanks!

https://therichardhill.com/mothers-and-their-children-08102020

Thanks,

Richard

Hello Richard,

Kindly try to re-embed the form using this iFrame code:

 <iframe

      id="JotFormIFrame-202227226058954"

      title="Clone of MothersChildren.08.010.2020"

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

      allowtransparency="true"

      allowfullscreen="true"

      allow="geolocation; microphone; camera"

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

      frameborder="0"

      style="

      min-width: 100%;

      height:539px;

      border:none;"

      scrolling="no"

    >

    </iframe> 

It could be that the script codes added along with the iFrame codes are having conflict with the script code on your website and causes the image to be cut off. 

Please do get back to us if the issue persists. 

This fix didn't make a difference.

My apologies.

It seems that you would need to increase the iFrame's width:

Kindly try to re-embed the form using these codes:

<iframe

      id="JotFormIFrame-202225332544142"

      title="MothersChildren.08.010.2020"

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

      allowtransparency="true"

      allowfullscreen="true"

      allow="geolocation; microphone; camera"

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

      frameborder="0"

      style="

      width: 180%;

      height:2472px;

      border:none;"

      scrolling="no"

    >

    </iframe>

This should cover the full width of the form, let us know how it goes.

Thanks but everything is skewed to the right:

Greetings Richard.

After inspecting your website's source code, it looks like you have a div container with the ID of page, which prevents the form from showing in full width, since the max-width property. If this property is disabled, the form is shown in full width:

To resolve this problem, you could try to add the following CSS directly to the iFrame, however, it could break the page flow, so please make sure you test it after you apply it:

width: 100vw;
position: relative;
left: calc(-50vw + 50%);

Your iFrame code should look like this:

<iframe
      id="JotFormIFrame-202225332544142"
      title="MothersChildren.08.010.2020"
      onDISABLEDload="window.parent.scrollTo(0,0)"
      allowtransparency="true"
      allowfullscreen="true"
      allow="geolocation; microphone; camera"
      src="https://form.jotform.com/202225332544142"
      frameborder="0"
      style="
      width: 180%;
      height:2472px;
      border:none;
      width: 100vw; 
      position: relative; 
      left: calc(-50vw + 50%);"
      scrolling="no"
    >
</iframe>

Let us know if this resolved your problem.