Display image in a Form onClick of a Radio button

dzoladz · January 21, 2023, 3:17pm

Hello, I’ve been task with displaying a “circled-check” image inside a HubSpot form next to the the custom contact property once one of it’s radio buttons has been clicked. Since it isn’t possible to add an image to the left or right of a property in a HubSpot form, I added it above in a rich text area and attaching it to contact property below it. Using CSS I formatted the image to show up next to the property. Its id is currently displayed as none in CSS.

The radio-select contact property has a class of .Question-1

The images id is #img_radio_1

The radio buttons are in a div, class of .input

Inside the .input div the ul class is .inputs-list

Inside the ul’s the li have a class of .hs-form-radio

inside the li’s the input’s have a class of .hs-input.

Since the forms are native in HubSpot, the actual html isn’t accessible to add any id’s or script tags to the individual elements. What would be an example of a script (JQuery or JS) that when any radio buttons are checked within the custom contact property, the image is displayed? Any help would be greatly appreciated. Thanks.

MBERARD · January 23, 2023, 1:22pm

Hi @dzoladz ,

First I’ll wait till the form is rendered by HubSpot. Then I’ll listen to changes on the input. Then I’ll add a class to the li that contains the input.

Can you try and adapt the following code?

let currentForm;
window.addEventListener('message', event => {
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
		currentForm = document.getElementById(event.data.id);
		// target the input
		const questionInput = currentForm.querySelector('.Question-1');
		if (questionInput) {
			// listen to changes
			questionInput.addEventListener('change', () => {
				if (questionInput.checked) {
					// then add class on li that contains the image
					questionInput.closest('li').classList.add('hs-form-radio--checked-image');
				}
			}, {once: true})
		}
	}
});

Bests,

Matthieu BERARD

matthieu.berard@markentive.com

dzoladz · January 23, 2023, 11:39pm

Hello @MBERARD , thank you for the assistance and feedback. Unfortunately, I was unsuccessful applying the code you provided above. Below is the test html I’m working with. In the css I currently have the .img_check, which contains the image, set to display: none. Eventually the form will have multiple questions. Any addtional help would be great. Thank you again.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<form>

<div>

<img id=“img_radio_1”

src=“https://22460962.fs1.hubspotusercontent-na1.net/hubfs/22460962/check_red.svg”

alt=“check_red” width=“22” height=“22” loading=“lazy”>

</span>

</div>

<div

class=“hs_we_generally_mesh_well_on_basic_values_and_goals_in_life hs-we_generally_mesh_well_on_basic_values_and_goals_in_life hs-fieldtype-radio field hs-form-field”>

<label

id=“label-we_generally_mesh_well_on_basic_values_and_goals_in_life-4ae9831d-93e1-48c5-b27a-708552a3ff45_7980”

class=“” placeholder=“Enter your We generally mesh well on basic values and goals in life”

for=“we_generally_mesh_well_on_basic_values_and_goals_in_life-4ae9831d-93e1-48c5-b27a-708552a3ff45_7980”><span>We

generally mesh well on basic values and goals in life</span><span

class=“hs-form-required”>*</span></label>

<li class=“hs-form-radio” role=“radio”><label

for=“we_generally_mesh_well_on_basic_values_and_goals_in_life0-4ae9831d-93e1-48c5-b27a-708552a3ff45_7980”

class=“hs-form-radio-display”><input

id=“we_generally_mesh_well_on_basic_values_and_goals_in_life0-4ae9831d-93e1-48c5-b27a-708552a3ff45_7980”

class=“hs-input” type=“radio”

name=“we_generally_mesh_well_on_basic_values_and_goals_in_life”

value=“Yes”><span>Yes</span></label></li>

<li class=“hs-form-radio” role=“radio”><label

for=“we_generally_mesh_well_on_basic_values_and_goals_in_life1-4ae9831d-93e1-48c5-b27a-708552a3ff45_7980”

class=“hs-form-radio-display”><input

id=“we_generally_mesh_well_on_basic_values_and_goals_in_life1-4ae9831d-93e1-48c5-b27a-708552a3ff45_7980”

class=“hs-input” type=“radio”

name=“we_generally_mesh_well_on_basic_values_and_goals_in_life”

value=“No”><span>No</span></label></li>

</ul>

</div>

<div>

<div class=“hs-richtext hs-main-font-element”><span class=“img_check”><img id=“img_radio_2”

src=“https://22460962.fs1.hubspotusercontent-na1.net/hubfs/22460962/check_red.svg”

alt=“check_red” width=“22” height=“22” loading=“lazy”></span>

</div>

<div

class=“hs_my_partner_appreciates_the_things_i_do_in_this_relationship hs-my_partner_appreciates_the_things_i_do_in_this_relationship hs-fieldtype-radio field hs-form-field”>

<label

id=“label-my_partner_appreciates_the_things_i_do_in_this_relationship-4ae9831d-93e1-48c5-b27a-708552a3ff45_7684”

class=“” placeholder=“Enter your My partner appreciates the things I do in this relationship”

for=“my_partner_appreciates_the_things_i_do_in_this_relationship-4ae9831d-93e1-48c5-b27a-708552a3ff45_7684”><span>My

partner appreciates the things I do in this relationship</span><span

class=“hs-form-required”>*</span></label>

<li class=“hs-form-radio” role=“radio”><label

for=“my_partner_appreciates_the_things_i_do_in_this_relationship0-4ae9831d-93e1-48c5-b27a-708552a3ff45_7684”

class=“hs-form-radio-display”><input

id=“my_partner_appreciates_the_things_i_do_in_this_relationship0-4ae9831d-93e1-48c5-b27a-708552a3ff45_7684”

class=“hs-input” type=“radio”

name=“my_partner_appreciates_the_things_i_do_in_this_relationship”

value=“Yes”><span>Yes</span></label></li>

<li class=“hs-form-radio” role=“radio”><label

for=“my_partner_appreciates_the_things_i_do_in_this_relationship1-4ae9831d-93e1-48c5-b27a-708552a3ff45_7684”

class=“hs-form-radio-display”><input

id=“my_partner_appreciates_the_things_i_do_in_this_relationship1-4ae9831d-93e1-48c5-b27a-708552a3ff45_7684”

class=“hs-input” type=“radio”

name=“my_partner_appreciates_the_things_i_do_in_this_relationship”

value=“No”><span>No</span></label></li>

</ul>

</div>

</form>

</body>

</html>

MBERARD · January 24, 2023, 8:02am

Hi @dzoladz! Thank you for providing your HTML code that help me to understand your current structure I adpated my previous code can you try it?

let currentForm;
window.addEventListener('message', event => {
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
		currentForm = document.getElementById(event.data.id);
		// target the inputs
		const questionInputs = currentForm.querySelectorAll('input[type="radio"]');
		if (questionInputs.length > 0) {
			questionInputs.forEach(questionInput => {
				// Listen to changes of every inputs once
				questionInput.addEventListener('change', () => {
					if (questionInput.checked) {
						const imageCheck = questionInput.closest('.hs-form-field').previousElementSibling.querySelector('.img_check')
						if (imageCheck) {
							// Add class to show check mark
							imageCheck.classList.add('.img_check--visible');
						}
					}
				}, {once: true});
			});
		}
	}
});

Bests!

Matthieu

dzoladz · January 24, 2023, 2:53pm

Hi @MBERARD . Still no luck. Maybe it has something to do with the CSS. There is nothing in the CSS for the .img_check--visible class. The .img_check class is set to display: none. Do you see something in the CSS that could be the issue? Again, I am extremely greatful for the help. Thank you very much.

*,

:after,

:before {

box-sizing: border-box;

}

body {

color: #333;

font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

font-size: 14px;

font-weight: 400;

line-height: 1.4285714;

}

div {

display: block;

}

form {

display: block;

margin-top: 0em;

width: 1000px;

margin: 30px auto;

box-shadow: 2px 2px 8px black;

}

form label {

display: block;

font-size: 16px;

margin-bottom: 0.35rem;

}

label {

cursor: default;

}

.hs-fieldtype-radio>label {

padding-left: 30px;

}

.hs-form-field>label,

.hs_cos_wrapper_type_email_simple_subscription h1,

form a,

form h1,

form h2,

form h3,

form h4,

form h5,

form h6,

form label,

form p,

form#email-prefs-form .page-header,

form#email-prefs-form span {

color: #000;

}

.hs-fieldtype-radio {

align-items: center;

background-color: #fff;

border-radius: 6px;

display: flex;

justify-content: space-evenly;

margin: 30px auto;

max-width: 90%;

min-height: 70px;

}

form .hs-fieldtype-radio .inputs-list {

display: inline-flex;

list-style: none;

margin: 0;

padding: 0 30px 0 0;

}

ul {

display: block;

list-style-type: disc;

margin-block-start: 1em;

margin-block-end: 1em;

margin-inline-start: 0px;

margin-inline-end: 0px;

padding-inline-start: 40px;

}

form .inputs-list>li {

display: block;

margin: 0.7rem 0;

}

form .hs-fieldtype-radio .inputs-list input {

opacity: 0;

}

form input[type=checkbox],

form input[type=radio] {

cursor: pointer;

margin-right: 0.35rem;

}

form .inputs-list input,

form .inputs-list span {

vertical-align: middle;

}

[type=checkbox],

[type=radio] {

box-sizing: border-box;

padding: 0;

}

button,

input {

overflow: visible;

}

button,

input,

optgroup,

select,

textarea {

font-family: inherit;

font-size: 100%;

line-height: 1.15;

margin: 0;

}

form .hs-fieldtype-radio .inputs-list span {

background-color: #f4f4f4;

border-radius: 20px;

color: transparent;

color: #000;

display: inline-block;

height: 40px;

margin: 0 20px;

padding-top: 8px;

text-align: center;

transition: .5s;

width: 80px;

}

form .inputs-list input,

form .inputs-list span {

vertical-align: middle;

}

form .hs-fieldtype-radio .inputs-list input:checked~span {

background-color: #e56055;

color: #fff;

}

.img_check {

height: auto;

max-width: 22px;

width: 22px;

float: left;

margin: 22px 0px 0px 30px;

display: none;

}

MBERARD · January 25, 2023, 7:34am

Hi @dzoladz
No worry that’s normal if my solution seems to doesn’t work, you need to add the class I provide you in the JavaScript to your CSS file
At the end of your CSS file could you add the following code :

.img_check--visible {
 display: block;
}

Best!

Matthieu

dzoladz · January 25, 2023, 2:21pm

Hi @MBERARD , thank you again. I added the css code as instructed but the image still doesn’t appear. What element will the JS add the class .img_check--visible to? I ran the page in live server, clicked on the radio inputs and reviewed the html. I don’t see the .img_check--visible class added to any of the elements. Since the .img_check element’s display is set to display:none, Wouldn’t that function just need to change .img_check style to “block” ?

Sorry for my ignorance. Your code is brilliant. I just can’t figure out what I’m missing. Thank you again for all your help.

dzoladz · January 25, 2023, 5:17pm

@MBERARD Success! I added I modified it a little and it work properly in VS.

Thank you again Matthieu for the assistance!

MBERARD · January 26, 2023, 10:09am

Hi @dzoladz,

Happy to read that, great job!
But your update is bothering me because you removed the original class and by so you’re removing thethe check mark’s style (size, position…). Normally, if the .img_check--visible class is positioned after .img_check class that should work when you update the class with the JS. But if you find your way around and you manage get the results you wanted that’s great

Best!

Matthieu

Topic		Replies	Views
add images to form properties CMS Development forms	2	2633	July 5, 2023
Checkbox styling in forms CMS Development	3	8110	November 11, 2022
Using custom forms / editing hubspot form Lead Capture Tools forms	3	1415	February 20, 2023
Adding Image Choice to HubSpot Form Lead Capture Tools forms	9	8849	December 17, 2024
Font Awesome icons not displaying CMS Development	8	6394	July 15, 2022

Display image in a Form onClick of a Radio button

Related topics