GlenwoodMedia

Site URL: https://kwmulticultural.ca/interpreters

I have an embedded jotform in a lightbox - when users click submit, there is a custom thank you message - however users have to scroll up to see it.

What coding I can put into the button so that it scrolls to to the top when users hit "submit"

TIA!

JotForm's embedded lightbox works in 7.1 but the button is ugly...and won't match your site styles.

To make it match, replace btn in the last part of the embedded JotForm Code Block
<a class="btn lightbox- 123456789012345 " >
Button Name
</a>
with sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element

It should look like this:

<a class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element lightbox-123456789012345" >
Button Name
</a>

And to center the button, put <center> on Line 1 of the code block and </center> on the last line.

@WHOisDANEI've been looking for a solution to get the cta button in the header navigation to trigger a pop-up.  Your site has that with that "1" button on 

How did you do it?

28 minutes ago, bangank36 said:

There is a plugin called

Squarespace Lightbox Anything Plugin - SQSPTHEMES.COM

Thank you.  I'll check that out.  It's an external page that will pop up - so wasn't sure if that plug-in would work, but from their website it appears as if it will.

Site URL: https://newkwmc.squarespace.com/

The CTA button in the navigation in this 7.1 site - "Donate" - opens in a new page.  I'd like to open it as a pop-up window.
Any suggestions on how to do this?

Sharing this - hopefully it saves someone some time.

Here's a code block to create a button that opens an external website as a pop-up - just replace cnn.com with the site you want to appear in the pop-up.

<center>
  <div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">

 <div class="sqs-block-button-container--center preFlex flexIn" data-animation-role="button" data-alignment="center" data-button-size="medium" style="transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-duration: 0.65s;">
    <a href="https://cnn.com" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true"
  target="popup" 
  onclick="window.open('https://www.cnn.com','popup','width=600,height=600,scrollbars=no,resizable=no'); return false;"> 
    This is CNN
</a>
</div>
</center>

On 7/9/2021 at 11:34 PM, tuanphan said:

Hi. The code worked, however header overlaps Google Translate button.

Don't remove above code & add this to Design > Custom CSS

header#header:not(.shrink) {
    top: 41px;
}

 

Thank you so much!  Works perfectly now.

Posting a solution to an issue I had...hopefully it saves someone an entire day of searching online for an answer.

JotForm's embedded lightbox works in 7.1 but the button is ugly...and won't match your site styles.

To make it match, replace btn in the last part of the embedded JotForm Code Block
      <a class="btn lightbox- 123456789012345 " >
        Button Name
      </a>
with sqs-block-button-element--medium sqs-block-button-element

It should look like this:

      <a class="sqs-block-button-element--medium sqs-block-button-element lightbox-123456789012345" >
        Button Name
      </a>

And to center the button, put <center> on Line 1 of the code block and  </center> on the last line.

Site URL: https://newkwmc.squarespace.com

I'm migrating/rebuilding a site from 7.0 to 7.1

In the 7.0 version of the site, this code in the header works perfectly:

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

In the 7.1 version of this site newkwmc.squarespace.com, this script seems to do nothing.  No widget is visible.

Any suggestions?