Adding an image to a form

Site URL: http://www.instantmonsters.com

On my website I offer the option of pre-painting the prosthetics that customers order. When they add an item to the cart, a form pops up with color choices. Originally I had linked an image from an outside source since I couldn't figure out how to do it within Squarespace. It worked fine for a long while, but now I'm finding that image doesn't display.

Here's the original text I inputted to the form:

Quote

 

If ordering a pre-painted prosthetic, please enter the skin tone you would like from the following options. All other highlights, shadows and detail work will be based on the skin tone chosen.

If ordering an unpainted prosthetic, leave this field blank.

<img src="http://www.chrispaynemakeup.com/colors-1.jpg">

 

It used to display the image just fine, but now it just shows a broken image icon (see attached screenshot). 

How can I fix this? Squarespace offered no help other than a link to this forum. If I have to I can add the same color sample jpg to each product's photo gallery, but I'd rather not have to go that route. Every time I add a new color I'd have to update every item I have in stock.

Hi. Can you share link to product in screenshot?

Almost all of the products use the same form, but the one in the screenshot is here: https://www.instantmonsters.com/shop/p/beaky

On 3/2/2021 at 7:35 PM, InstantMonsters said:

Almost all of the products use the same form, but the one in the screenshot is here: https://www.instantmonsters.com/shop/p/beaky

Add to Design > Custom CSS

/* Beaky lightbox img */
body#item-5f4db8566c67441473286aeb .lightbox-inner .description:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    display: block;
}

Thank you for this! I'm afraid I'm a luddite with CSS, my web knowledge ends at HTML from the mid-2000s. When I entered the code I got this:

Here is the exact text as it appears in the "manage form fields" for the form, cut and pasted:

Quote

If ordering a pre-painted prosthetic, please enter the skin tone you would like from the following options. All other highlights, shadows and detail work will be based on the skin tone chosen.

If ordering an unpainted prosthetic, leave this field blank.

/* Beaky lightbox img */
body#item-5f4db8566c67441473286aeb .lightbox-inner .description:after {
    content: "";
    background-image: url(http://www.chrispaynemakeup.com/colors-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    display: block;
}

I assume I probably have one character out of place or I was meant to change something other than the image URL?

Add to Design > Custom CSS

Gotcha, I figured I was doing something dumb. It works now with your image, but when I replace it with the location for the one I want (http://www.chrispaynemakeup.com/colors-1.jpg) it fails to load, just a blank space. 

Also is there a way to modify this so that it works across all of the products, or do I need to modify and re-enter the code for each one?

Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom CSS required.

Thank you so much for your help!

5 hours ago, InstantMonsters said:

Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom CSS required.

Thank you so much for your help!

You cna upload file here for easier manager

Using the CSS Editor – Squarespace Help

13 hours ago, InstantMonsters said:

Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom CSS required.

Thank you so much for your help!

I see on mobile footer, between videos - gallery links has a spacing. Do you want to reduce it?

Hi there, 

I would love to do the exact same thing to a customisation form on my website. The website isn't live yet but we sell customised homeware and you can choose the colours the your item is made of. 

 We would love for the colours that you can choose from to appear. 

 We've added the swatch images to the FAQ page but can't seem to work out how to add the code so that image appears in the form. 

Anyone know how to do that?

Many thanks 

We attempted this on our site but were struggling to make it show any image in the screen at all. I identified the tag in the InstantMonsters source code where 5f4db8566c67441473286aeb appeared, and replaced that segment with 6230785fc011e37e95725956 but it doesn't seem to load anything. Are you able to direct us to what we're doing wrong so we can replicate it for other use cases that are similar? Our current code going directly into the Home -> Custom CSS section is:

/* Roseworks beaky test */
body#item-6230785fc011e37e95725956 .lightbox-inner .description:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    display: block;
}

The menu it should show up in is https://www.roseworksldn.com/shop/p/completely-customised-and-personalised-terrazzo-tray-1 after clicking a number of letters and "Add to Cart".

If you can help it would be so appreciated!
Thanks,
Rose Works LDN

On 3/17/2022 at 1:49 AM, roseworksldn said:

 

We attempted this on our site but were struggling to make it show any image in the screen at all. I identified the tag in the InstantMonsters source code where 5f4db8566c67441473286aeb appeared, and replaced that segment with 6230785fc011e37e95725956 but it doesn't seem to load anything. Are you able to direct us to what we're doing wrong so we can replicate it for other use cases that are similar? Our current code going directly into the Home -> Custom CSS section is:

/* Roseworks beaky test */
body#item-6230785fc011e37e95725956 .lightbox-inner .description:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    display: block;
}

The menu it should show up in is https://www.roseworksldn.com/shop/p/completely-customised-and-personalised-terrazzo-tray-1 after clicking a number of letters and "Add to Cart".

If you can help it would be so appreciated!
Thanks,
Rose Works LDN

What is password?

On 3/18/2022 at 1:58 PM, tuanphan said:

What is password?

Sent to you via DM 🙂

Use this new code

body.collection-type-products .lightbox-content .field-list:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    right: 20px;
    z-index: 9999;
    top: calc(50% + 100px);
    transform: translateY(-50%);
    width: 200px;
    height: 300px;
    visibility: visible;
    clear: none !important;
}

I think you have to use another application or website to add it. With Google Forms, you can just make it easier. It offers a great experience for creating different types of forms. You can have multiple choice answers, short or long answers, and even selection grids. You can add them to your form as part of your questions or allow users to upload an image as a response. You can even use an image as a header. This is the kind of work I encountered a couple of weeks ago. It worked out without problems; I even sent this image to https://www.frameshop.com.au/canvas-prints for its printing.