Squarespace Form Block: Useful Code

Some useful code when you work with Form Block in Squarespace

Caption Text Size

Add to Design > Custom CSS

/* 
- Increase caption text size (under form fields)
*/
/* text field - email field.. */
span.caption-text {
    font-size: 20px;
}
/* text area field */
.description {
    font-size: 16px !important;
}
/* checkbox field */
.option label {
    font-size: 16px;
}

Autofill with Page URL

First, add a Hidden Field with Label: Page URL

Next, add this code to Settings > Advanced > Code Injection > Footer

<script>
document.addEventListener('DOMContentLoaded', function() {
  	if (document.querySelector('[name="SQF_PAGE_URL"]')) {
    document.querySelector('[name="SQF_PAGE_URL"]').value = location.pathname;
  }
});
</script>

Tips: You can use this way to add Enquire Button on All Products.

  • More specifically, you insert Form Block (turn on Lightbox mode) into Footer, use the above code to create Autofill Field. Next, use JavaScript code to move the button from the Footer to the Product Page, under (or to the right) Add to Cart Button.
  • If you don’t know JavaScript, you can post on Squarespace Forum or send me an email (with link to your site). I will check & give the code