Reformatting a checklist in forms

[mkarsten]

I have a request to create a form using our Interests checkbox property, but they don't want it in list format. I know how to hide the label and use a rich text area above the question, but how do I break the options into side by side boxes with the text inside? I'm embedding the screen shot that was shared with me. This example was part of one form with multiple questions and one submission button. Is there a way to accomplish this in the HubSpot form tool?

I can work with html/css, but shy away from java because of the issue with it not be friendly in all browsers.:)

So far, all I could think of is a rich text area with images that somehow trigger a workflow, that would update the appropriate interest option in the property. Haven't had time to dig to see if there's an event option that could be used as a link on an image that could then trigger the workflow??? And how do I use a link on the image without leaving or refreshing the page the form is on, but still apply the event?

Any ideas or direction is greatly appreciated!

[Anton]

Hi @mkarsten, 

the easiest way(and already working in HubSpot) would be to place images into the label-fields of the property and style them via CSS

best, 

Anton

[mkarsten]

I'd love to try that. What would you use for an image link or how would you add an action to that image to make it clickable (without leaving the page or causing the page to refresh) so the system knows which option(s) they chose for the multi-checkbox options in the property your populating?

[Anton · Accepted solution]

You should upload all images in the file-manager into a decicated folder. Something like images/checkbox-images/... (completly up to you)

The image should be clickable without any further customization since it's included in the "checkbox/radio" elements. 
The rendered layout looks something like this

<form>
<ul>
<li>
<input type="checkbox">
<img src="" class="">
<span class="">Lorem</span>
</input>
</li>
</ul>
</form>

Pro tipp: Name each image according to the option and don't use namings like "image-134.png". If you do so, your life will be easier since you can paste the same link into the src and just rename the last bit and the Label

The part that populate the property is the Value column. This means: The label contains the image and the value just the word(s) that are corresponding. 

For instance:
<img src="DOMAIN.com/hubfs/images/checkbox-images/gaming.png" alt="Gaming icon" class="checkboxIcon"><span class="checkboxIconLabel">Gaming</span>

After submitting the property is set to the (internal) value: "Gaming"

best, 

Anton

[mkarsten]

Worked like a charm! The images are showing up for the options, but I must be missing something. They're listed vertically, one option under the other, and I'd like them horizontal. Is there CSS I need to add to the land page template for this?

[mkarsten]

Thanks for all the details!!! I have a short day today, but definitely going to try this out next week. I'll reply back when I know how it goes. Have a fantastic weekend!:)

[mkarsten]

 Oops, replied to myself.:(

[jolle]

Learned something new today! Thanks, @Anton!!!

[jolle]

Hey @mkarsten, thanks for reaching out!

I believe this is beyond the capabilities of the native HubSpot form tool, but you could likely accomplish this with an integrated form tool.

I know that Typeform has the ability to set images as multi-select options (more info in this Typeform support article), and there's a pretty solid Typeform-HubSpot integration that would allow you to easily map your Typeform data into HubSpot. 

I would explore form tools that integrate with HubSpot to see if one will meet your needs before trying to create something custom. 

Hope this helps!!

[mkarsten]

Thanks for the suggestion! I'll give Typeform a look.

[MiaSrebrnjak]

Hi @mkarsten,

Thank you for reaching out to the Community!

I wanted to ask a couple of subject matter experts for advice: 

Hi @Anton, @jonchim, @Phil_Vallender, do you have any tips for @mkarsten? Thank you!

Cheers
Mia, Community Team