Gallery Grid to Form (Prefill Caption) in Squarespace

[tuanphan]

Description

• click enquire now on Gallery Image will prefill caption/small image to Form

• view demo – password: abc

#1. Install Code

If you use Personal/Basic and your plan doesn’t support Injection, you can see step #2.2

#1.1. First, you need to add a Gallery Grid (section with (i) icon)

#1.2 Make sure you choose Grid: Simple and enable Captions

#1.3 Next, add a Form Block under Gallery Grid

#1.4. You can add your desired fields, but FIRST FIELD should be Textarea field

add your desired info, you can use info like this.

#1.5. Hover on page where you added Gallery Grid/Form > Click Gear icon

Click Advanced > Paste this code

<!-- 04.26c10v3 Grid to Form -->
<script>
window.enquireConfig = {
  figureSelector: 'figure.gallery-grid-item',
  captionSelector: '.gallery-caption-content',
  enquireText: 'Enquire Now',
  enquireFontSize: '12px',
  previewWidth: '80px',
  previewHeight: '60px',
  previewBorderRadius: '4px'
};
</script>
<script src="https://code.beaverhero.com/gallerysgrid/0426c10v3gridtoform.js"></script>

#2. Customize

Here is all basic style. If you need to customize more, you can comment below, I will check.

Or you can use this AI tool, it is designed to support customization for Squarespace sites.

#2.1. You can see all options here

<script>
window.enquireConfig = {
  figureSelector: 'figure.gallery-grid-item',
  captionSelector: '.gallery-caption-content',
  enquireText: 'Enquire Now',
  enquireFontSize: '12px',
  previewWidth: '80px',
  previewHeight: '60px',
  previewBorderRadius: '4px'
};
</script>

#2.2. If you use Personal/Basic and your plan doesn’t support Injection, you can do these.

First, add a Markdown Block under Form Block

Paste this code into Markdown Block

<script>
window.enquireConfig = {
  figureSelector: 'figure.gallery-grid-item',
  captionSelector: '.gallery-caption-content',
  enquireText: 'Enquire Now',
  enquireFontSize: '12px',
  previewWidth: '80px',
  previewHeight: '60px',
  previewBorderRadius: '4px'
};
</script>
<script src="https://code.beaverhero.com/gallerysgrid/0426c10v3gridtoform.js"></script>