Form cropped off on squarespace

  • Profile Image
    illustickers
    Asked on August 15, 2016 at 07:47 AM

    Any idea why my contact form is being cropped off on my squarespace website?

    Troubleshooting info

    1. I followed the squarespace platform embed instructions to a T and the cropping occurred.

    2. Next I tried using the "embed" function where it uses the little line of javascript, but then the form wouldn't show on the page on first load. You'd have to refresh the page to get it to show up.

    3. Then I tried embedding the entire source code which worked the best but is not very smooth when it comes to actually submitting the form.

    I'd prefer to use the official squarespace platform embed (which is currently in use) but obviously need it to not crop it off! Any help would be great.

  • Profile Image
    jonathan
    Answered on August 15, 2016 at 09:59 AM

    Please try first increasing the height of the iframe of your form iframe embed code to 764px.

     

    Example: 

     

    <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

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

          frameborder="0"

          style="width:100%;

          height:764px;

          border:none;"

          scrolling="no">

        </iframe>

    --

    This should make the full form height occupy the iframe. You can do the change by re-embedding the form on your website page and save.

    Let us know if this still did not resolve the issue.

    Thanks.

     

     

  • Profile Image
    illustickers
    Answered on August 15, 2016 at 10:07 AM

    Do I change this on the jotform side of things or within the code block on squarespace?

  • Profile Image
    beril
    Answered on August 15, 2016 at 11:17 AM

    You need to re-embed your form  as my college was provided you above. Yo can copy the code above and paste it to your website after deleting the previous IFrame code. If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image
    illustickers
    Answered on August 15, 2016 at 05:36 PM

    Nice! This is shaping up. A few more questions

    1. There is some white space on the bottom now. How do I remove that? See attached image.

    2. How did you generate that code?

    P.S. Sorry if you get two responses. First one didn't seem to work.

  • Profile Image
    BDAVID
    Answered on August 15, 2016 at 08:11 PM

    Please inject the following code to remove the blank space: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .supernova{

        background: transparent !important;

    }

    Let us know if you need more help.

  • Profile Image
    illustickers
    Answered on August 15, 2016 at 09:15 PM

    Fixed! Just had to turn the box shadow off and now we're all good! Thank you!!!

  • Profile Image
    jonathan
    Answered on August 15, 2016 at 10:20 PM

    Thank you for taking the time updating us on the status and letting us know all fixed. :-)

    Contact us anytime should you require assistance again on JotForm.

    Regards