CaityBoBatey Posted June 28 Share Posted June 28 I'm trying to figure out a way to make a survey for a website so that customers can fill out as much information about the custom cabinet they would like to order ahead of time. However, it doesn't seem like there's an option to add images into the survey form. My ideal situation would be to have the radio question button list a variety of color and style options with the image of each option above. Is this possible? You can see from the attachment what my draft of the survey would look like. The page hasn't been published yet since we're still working on it. Thank you! Link to comment
creedon Posted June 30 Share Posted June 30 Are you wanting to add images next to Inset and Full overlay near those options so that customers can visualize the options? Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us. A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/. Please set up a site-wide password, if your site is not public and you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the site-wide password and how to share a link documentation to understand how they work. You may find How to post a forum question post useful. We can then take a look at your issue. paul2009 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
CaityBoBatey Posted July 1 Author Share Posted July 1 Yes, that's correct. The site is active but the page was not enabled, so I went ahead and enabled it and made it password protected. You can find the page here: Harris Timberworks - Custom Cabinets, Bathroom Vanities and Furniture (squarespace.com) Pass: Timber2o24!Works Thank you Link to comment
creedon Posted July 1 Share Posted July 1 Add the following to Website > Pages > Website Tools > Custom CSS. /* begin add images to radio options */ .form-wrapper .field-list #radio-b612f0aa-e153-4acd-b9bb-c48e5ed368e6 { --image-size : 100px; } .form-wrapper .field-list #radio-b612f0aa-e153-4acd-b9bb-c48e5ed368e6 .option { display : flex; } .form-wrapper .field-list #radio-b612f0aa-e153-4acd-b9bb-c48e5ed368e6 .option::after { background-repeat : no-repeat; background-size : contain; content : ''; height : var( --image-size ); margin-left : 20px; width : var( --image-size ); } .form-wrapper .field-list #radio-b612f0aa-e153-4acd-b9bb-c48e5ed368e6 label { width : 10em; } .form-wrapper .field-list #radio-b612f0aa-e153-4acd-b9bb-c48e5ed368e6 .option:nth-of-type( 1 )::after { background-image : url( https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1614237468914-9J9S7KYGEQ7NXTLBXRPT/dogs_gas_masks+%2811%29.jpg ); } .form-wrapper .field-list #radio-b612f0aa-e153-4acd-b9bb-c48e5ed368e6 .option:nth-of-type( 2 )::after { background-image : url( https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1614237468914-9J9S7KYGEQ7NXTLBXRPT/dogs_gas_masks+%2811%29.jpg ); } /* end add images to radio options */ This is for v7.0 using the Brine template family. You may need to fiddle with the width : 10em; declaration which controls the width of the radio option text width. You will of course want to replace the images URLs with your own product images. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
CaityBoBatey Posted July 1 Author Share Posted July 1 Thank you! I'm a novice with CSS though, and I didn't see any image pop up when I copy and pasted the text into the Custom CSS box. Can you give me a more detailed step by step? I'm guessing I missed something somewhere. Apologies for the hassle! Link to comment
creedon Posted July 2 Share Posted July 2 It appears the code is working to me. You'll of course want to use your own image URLs. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
CaityBoBatey Posted July 2 Author Share Posted July 2 Ah, that's fantastic! Thank you! So, if I wanted to add images to other radio options, how would I do that? I will need to have images on multiple questions. Link to comment
creedon Posted July 2 Share Posted July 2 (edited) Quote if I wanted to add images to other radio options, how would I do that? To add for the same radio option you can duplicate the following ruleset and change the nth-child number and the URL. .form-wrapper .field-list #radio-b612f0aa-e153-4acd-b9bb-c48e5ed368e6 .option:nth-of-type( 1 )::after { background-image : url( https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1614237468914-9J9S7KYGEQ7NXTLBXRPT/dogs_gas_masks+%2811%29.jpg ); } Quote I will need to have images on multiple questions. Unfortunately the code I wrote was to solve your original specific issue. It uses IDs that you can't see unless you know how to use your browser's inspector. I can't teach that to you in a few sentences. It might be possible to come up with new code that is more generalized but I don't have such code. Edited July 2 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
CaityBoBatey Posted July 2 Author Share Posted July 2 Sure, if you could give me a step by step I'd like to try it out. I will need a different photo for each option and will have multiple questions in the form that use the radio selection in this way. Thanks! Link to comment
creedon Posted July 2 Share Posted July 2 If you are not seeing the images in the editor try using private browsing. Quote if you could give me a step by step I'd like to try it out. The level of complexity is much higher when you have the number of radio field options I suspect you want to attach images. Writing a step by step would take a fair amount of my time which I don't have. Here is some starter code that uses LESS. /* begin add images to radio options, uses LESS */ #block-yui_3_17_2_1_1718304689466_5409 { --image-size : 100px; .form-wrapper .react-form-contents .field-list { fieldset { &:nth-child( 6 ), // nth field &:nth-child( 7 ), // nth field x-twc-selector /* dummy selector so that each selector line above can end with a comma */ { background-color : red; label { width : 10em; } .option { display : flex; &::after { background-repeat : no-repeat; background-size : contain; content : ''; height : var( --image-size ); margin-left : 20px; width : var( --image-size ); } } } /* begin radio option images */ &:nth-child( 6 ) .option // nth field { &:nth-of-type( 1 )::after { // nth field option background-image : url( https://images.squarespace-cdn.com/content/60374efe93a6cb725a5c6856/1659588818334-KETUCATH0D9ZIUNAJ2JZ/download%2B%25287%2529.jpeg ); } &:nth-of-type( 2 )::after { // nth field option background-image : url( https://images.squarespace-cdn.com/content/60374efe93a6cb725a5c6856/1659588849315-U24N3KGC40HMK15CLOSY/download%2B%25284%2529.jpeg ); } } &:nth-child( 7 ) .option // nth field { // nth field option &:nth-of-type( 1 )::after { background-image : url( https://images.squarespace-cdn.com/content/60374efe93a6cb725a5c6856/1659588855732-G9G9FC5HWMZTU3IC1L2K/download%2B%25281%2529.jpeg ); } // nth field option &:nth-of-type( 2 )::after { background-image : url( https://images.squarespace-cdn.com/content/60374efe93a6cb725a5c6856/1659588838475-DOX2RZFS6Y4A04K26LFV/download%2B%25285%2529.jpeg ); } } /* end radio option images */ } } } /* end add images to radio options */ I can highlight some of the critical bits. The block id near the top of the file can be found using Heather Tovey's most excellent looking Squarespace ID Finder. I've already put your block id in the code. The &:nth-child( 6 ), // nth field lines also near the top of the code tell the code which number fields you want to apply the image effect to. In this example code I've done two. You can add more or less. The first half of the code is common CSS that all the fields will need for the effect. The second half applies the images to the specific nth fields and their nth options. Here is an example of just one field and it's options. &:nth-child( 6 ) .option // nth field { &:nth-of-type( 1 )::after { // nth field option background-image : url( https://images.squarespace-cdn.com/content/60374efe93a6cb725a5c6856/1659588818334-KETUCATH0D9ZIUNAJ2JZ/download%2B%25287%2529.jpeg ); } &:nth-of-type( 2 )::after { // nth field option background-image : url( https://images.squarespace-cdn.com/content/60374efe93a6cb725a5c6856/1659588849315-U24N3KGC40HMK15CLOSY/download%2B%25284%2529.jpeg ); } } You would replicate this bit for as many fields where you want to apply the effect changing the numbers as needed. In the example code you'll see I've done it for fields 6 and 7. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment