Jump to content

Adding an image to a form

Recommended Posts

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.

Screen Shot 2021-02-27 at 9.41.36 AM.png

colors-1.jpg

Link to comment
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;
}

image.thumb.png.e125d58fe8c806d0465c737a1762a2e9.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

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:

902897556_ScreenShot2021-03-06at8_53_10AM.png.a05728809ed0094c0f0fb63051e89641.png

 

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?

Link to comment

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. 

 

950394077_ScreenShot2021-03-07at12_34_45PM.png.0e2b00bf88c2577b376f32f97c57320d.png

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?

Edited by InstantMonsters
Link to comment
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!

Screen Shot 2021-03-07 at 12.49.23 PM.png

You cna upload file here for easier manager

Using the CSS Editor – Squarespace Help

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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!

Screen Shot 2021-03-07 at 12.49.23 PM.png

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

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 year later...

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 

Link to comment

 

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

Link to comment
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?

accesspasssword.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

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;
}

 

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
  • 4 months later...

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.

Edited by SoniaBarron
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.