Adding Image Choice to HubSpot Form

[IvanFilipov]

Hello all

I'm trying to explore if it's possible to add an image choice in HubSpot form - in other words, I need to allow visitors to choose a certain image from a list of images - like I was doing the same in TypeForm

Just trying to see if this can be done in HS Form.

Thanks!!!

[karanjalendere]

https://formmaker.co.in/hubspot-multi-step-form-demos-with-choice-image-icon 

have a look this formmaker form builder example you can easily achieve this image choice and lot more

watch the video for more info

https://www.youtube.com/watch?v=s1fDvrcNJks

[Ian_Matt]

Hi @IvanFilipov , Glad it helps! The internal values don't necessarily need to be the URL. I just put the labels in so they were automatically copied to the internal values but these would definitely be set to something else. 🙂 

[IvanFilipov]

Thanks @Ian_Matt - one last question - what is the purpose of inserting the HTML into Internal Value field? I see that the visual side of things is only controlled by the values in LABEL field?

Thanks !!!

[Ian_Matt]

Hey @IvanFilipov, the pictures would have to be hosted somewhere else (Could be as simple as uploading the images to your File Manager first) and then you would reference where they are through the URL rather than uploading them directly to the form.

But yes you could do the same thing with radio select instead. 🙂 

[Ian_Matt · Accepted solution]

Hi @IvanFilipov ,

Yes this is possible! If you create a contact property with the options set to a link to the image referenced in HTML like this: <img src="https://IMAGEURL.jpg">

Then the images will appear when used in a form. 

You'll see an example of the options above used on this form.

As you'll see from my example, where the pictures are different sizes it's important to ensure that images are the same size. You can do this by using HTML as found here.

I hope this helps!

[KSmithIllumine8]

I just experimented a little bit with this and wanted to add a couple important notes: 

• Sometimes the image didn't work and other times it did. I couldn't figure out why it sometimes worked and sometimes didn't, although it seemed like doing this with radio select fields sometimes didn't work and same for using a "Standalone page" form versus an "Embedded form", with the Embedded form type seeming to work more consistently.
• When it does work, any editing of the image code in the field label editor will cause the label to be treated as text and the image code itself will be displayed rather than the image. Even just clicking "Edit label" in the field editor will remove the image code, leaving you with a blank field label, and adding the image code back into the label field will just display the image code itself rather than the image.
  • Therefore, you have to set the image code correctly and with the sizing you want when the form field is created, then never touch it again.

I believe this same thing can be accomplished in a less fragile way with javascript using the options below, but I have not tested them yet.

• targeting a form field option and replacing any code inside the field <label> tag with the image code 
• targeting a form field option and adding a class to the field <label> tag, which can then be targeted with css to add a background image to the label's :before element

[JLo]

It doesn't work 😞 

[IvanFilipov]

Hello @Ian_Matt and thank you for your speedy answer. It looks promising - I assume I can use images uploaded to HS Form too - I mean, the images can be hosted together with the form? Also assuming these choices can be radio buttons and not checkboxes?