Jump to content

How to enable customers to select multiple items and send to client

Go to solution Solved by tuanphan,

Recommended Posts

Posted

I am searching for a way to let customers choose multiple items and communicate that to my client. The items are only examples of the work; five or six must be selected and sent to my client to establish a starting point for a commission.
These selected items are not to be purchased; they are just examples. But I need this information/choices to go to my client in one email. And there are numerous possibilities (20) for someone to select.

Password:

frogfish2

 

Big Fat Thanks,

George Cartwright

  • Solution
Posted

First, I added Gallery Section with 6 images, enter caption

Next, add a Form Block with Email Field + 6 Hidden Fields

image.png.3a4360ec99af17bdb4b7c266d7f5aeb0.png

Label: Image 1, Image 2,...

Value: leave default

image.png.40750762e278535a4c360b36d2924818.png

then I added this code to Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('figure').click(function(){
        $(this).addClass('red-dot');
    })
    $('figure:nth-child(1)').click(function(){
        $('[name="SQF_IMAGE_1"]').attr('value','Yes. I am interested');
    })
     $('figure:nth-child(2)').click(function(){
        $('[name="SQF_IMAGE_2"]').attr('value','Yes. I am interested');
    })
     $('figure:nth-child(3)').click(function(){
        $('[name="SQF_IMAGE_3"]').attr('value','Yes. I am interested');
    })
     $('figure:nth-child(4)').click(function(){
        $('[name="SQF_IMAGE_4"]').attr('value','Yes. I am interested');
    })
     $('figure:nth-child(5)').click(function(){
        $('[name="SQF_IMAGE_5"]').attr('value','Yes. I am interested');
    })
     $('figure:nth-child(6)').click(function(){
        $('[name="SQF_IMAGE_6"]').attr('value','Yes. I am interested');
    })
});
</script>
<style>
.gallery-grid:before {
    margin-bottom: 40px;
    content: "Click on each image. It will add to form. Then enter your email and click Submit";
    display: block;
}
  .red-dot:before {
    content: "";
    background-color: red;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 99999;
}
figure {
    position: relative;
}
</style>

This code will add red dot

image.png.74f7ecee11defa5499cd8d179d38c70a.png

image.png.21512775db2ff88240c7425d27ec9ef2.png

When clicking on image 1, code will change default value of Image 1 to Yes. I am interested

image.png.7cfb13fc26d3a14d020c6d924da2aec0.png

Similar for image 2, 3, 4

image.thumb.png.cbe45b5ce4e0a6ecdfd4139bb3a4c327.png

This is quite manual, I believe there is a better way with someone good at JavaScript. It can be just a Hidden Field or a single Text/Textarea Field, when someone clicks on the image, the code will add the caption of that image to the Hidden/Text Field. Clicking on the second image will add a second caption, separated by commas and so on.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

1. Ok, I put the code in the Advanced >Code Injection Header.

It that right?
 

2. And I don't understand what this is. I'm assuming it's the name of the image file?

name="SQF_IMAGE_1"

I've tried various names but can't quite get it right.


3. And do I need to install the form block?

As always, thank you for your help.

 

George


  

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.