Squarespace: Why the Embedded Jotfrom is being truncated?

Hi,

I've set up a website on SquareSpace (using their Basil template, if that is relevant).

One of the pages (URL below) integrates a Squarespace form, using Jotfroms own embedding code (from the Plublish tab of the editor).

Form URL: https://kin-cohousing.squarespace.com/join

In the SquareSpace editor loads perfectly. However, when I visit the site as a visitor the page with the form on doesn't extend to fit the whole form in - it just cuts form off a little way from the top.

SquareSpace have said they cannot help as it is someone else's custom code.

Can you provide a solution for this?

Thanks.

Hi,

I checked your form and viewed it on my end, so far I'm unable to see any cutoff, here's a screencast of it:

May I know if you have followed this guide: https://www.jotform.com/help/37-Adding-a-form-to-Squarespace?

You might also need to adjust the height of the parent element that holds the JotForm embed code. If the issue happens on a mobile device, then you might need to check your website's template/theme and see if it is mobile responsive and how the parent element handles the height in mobile view. 

Let us know if that works.

Thanks for the quick reply.

Thanks also for the how-to link.  This is what I followed and the code I used. :)

Ok... this is very strange.

If I navigate directly to the /join page then the form shows up fine.  However, if I land on the home page and then navigate to the /join page by clicking on of the buttons on the site, I get a truncated form.

Do you get the same behaviour?

I wasn't able to replicate that issue, I'm seeing the same page, nothing is cut off.

And I'm on this URL both times: https://kin-cohousing.squarespace.com/join/ I assume you're as well?

In which Browser did you test?

I am using Chrome (Version 60.0.3112.101 (Official Build) (64-bit))

To get the error I seem to need to load the page by navigating to the home page first (https://kin-cohousing.squarespace.com/).  Then click a link through to the form and the form truncates.

If I go to the form directly first (ie typing https://kin-cohousing.squarespace.com/join/ into my address bar) I can navigate back and forth between form and home page as much as I want and the form appears fine.

Very strange.

Following that first route above, can you recreate the error?

Here is what I see if I just go to the home page and then click through to the form:

I see the problem here when I follow your instructions:

1. I go to your website's home page first https://kin-cohousing.squarespace.com/

2. I click the JOIN button at the top right

3. And your embedded form looks like this:

Can you try removing the script part of the embed codes to see if that will help?

Edit your current embed codes in Squarespace and only include the ones highlighted in yellow above (don't include the script part).

If the height is too short, you can adjust the height value in px (change it from 539px to something you prefer). Also, change scrolling="no" to scrolling="yes" on the iframe codes.

Kindly give those a try and let us know if the issue persists.

Ok, I've chopped out everything after the I-frame in the code, as you suggested.  You can see this on the live page now.

I can change the height, but given than each page of the form is a different height, it means I have huge amounts of blank space under the form on certain pages, which is not good from a usability point of view.

Do you have a solution that maintains the automatically adjusting page height?

UPDATE: I have found a work around.

1. I have reverted to the full SquareSpace publish script from Jotform.

2. I have changed the links to the form (eg: the buttons) from internal/relative URLs to external/full/absolute URLs.

This seems to trigger the script to run properly and set the correct page length for the form pages.

It's not ideal from a site maintenance point of view and it may well mess with our Google Analytics (going to have to cross that bridge when we come to it).

I think this is something it is worth Jotform sorting out as it appears to be an issue with the how the script is called.  Ie: it is only called when the page the form is embedded in is called using a full URL.

I'd love to be able to switch back to relative URLs if there is a fix.

In case you have not tried our standard JS embed code, you may check it to see if that makes any difference.

When I tried a relative link to the page with embedded form it worked fine on my end. Although, that was not a Squarespace website.

The issue might be also related to the way how the scripts are being processed by the Squarespace website/template.

Mike,

As noted above, I have tried both standard script and the Square Space specific script.  Both seem to give the same behaviour.

It seems to be isolated case then. We will try to investigate this further if we receive any more similar reports.

I have to say, your form looks beautiful! :)