Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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

Link to comment

I just created a demo, you try checking https://blank-test.squarespace.com/click-image-send-to-email?noredirect

Pass: abc

When select an image >> it will add a red dot

image.thumb.png.f1b3ae8827988c4ab81bf89b872e31e1.png

then customers need enter their email

image.thumb.png.0e8bb2ed8aac09331c31e6eb1ce7a7b9.png

It will send

image.png.2ac39fd7af32fc1f0526004d6d0ae2bf.png

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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


  

Link to comment

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.