Squarespace: Why the Embedded Jotfrom is being truncated?

  • Profile Image
    kinarchitects
    Asked on September 12, 2017 at 03:16 AM

    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 Jotform 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.

  • Profile Image
    Charlie
    Answered on September 12, 2017 at 03:34 AM

    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.

  • Profile Image
    kinarchitects
    Answered on September 13, 2017 at 02:45 PM

    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?

  • Profile Image
    Nik_C
    Answered on September 13, 2017 at 05:10 PM

    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?

     

  • Profile Image
    kinarchitects
    Answered on September 13, 2017 at 06:05 PM

    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:

     

  • Profile Image
    Jim_R
    Answered on September 13, 2017 at 08:09 PM

    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.

  • Profile Image
    kinarchitects
    Answered on September 14, 2017 at 08:34 AM

    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?

  • Profile Image
    kinarchitects
    Answered on September 17, 2017 at 07:45 AM

    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.

  • Profile Image
    Mike
    Answered on September 17, 2017 at 11:35 AM

    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.

  • Profile Image
    kinarchitects
    Answered on September 18, 2017 at 04:39 PM

    Mike,

     

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

  • Profile Image
    Mike
    Answered on September 18, 2017 at 04:53 PM

    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! :)