gcart Posted January 4, 2023 Posted January 4, 2023 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
tuanphan Posted January 5, 2023 Posted January 5, 2023 What is site url? 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!)
gcart Posted January 6, 2023 Author Posted January 6, 2023 https://alligator-rabbit-wxxn.squarespace.com/ This is the page I'm working one:https://alligator-rabbit-wxxn.squarespace.com/totem-forms Thanks Tuan
tuanphan Posted January 8, 2023 Posted January 8, 2023 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 then customers need enter their email It will send 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!)
gcart Posted January 8, 2023 Author Posted January 8, 2023 Dear Tuan, That is so cool. How do I make it happen? Thanks, George
Solution tuanphan Posted January 8, 2023 Solution Posted January 8, 2023 First, I added Gallery Section with 6 images, enter caption Next, add a Form Block with Email Field + 6 Hidden Fields Label: Image 1, Image 2,... Value: leave default 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 When clicking on image 1, code will change default value of Image 1 to Yes. I am interested Similar for image 2, 3, 4 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. gcart 1 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!)
gcart Posted January 8, 2023 Author Posted January 8, 2023 That's fabulous. Let me see if I can make it work. I think I can and I'll get back to you. Thanks Tuan, George
gcart Posted January 9, 2023 Author Posted January 9, 2023 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
gcart Posted January 10, 2023 Author Posted January 10, 2023 I understand now. Big deal. Thanks Tuan. George
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment