Jump to content

How to add an image into a form

Recommended Posts

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!

Screenshot 2024-06-28 152212.png

Link to comment

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.

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

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

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! 

Screenshot 2024-07-01 164203.png

Link to comment
Posted (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 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

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

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.