GalleryGrid to Form

Description

• click enquire now on Gallery Image will prefill caption/small image to Form
• view demo – password: abc
• my friend did this, buy her a coffee

#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

#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>