Using stars (or other graphics) rather than radio buttons

[robert1]

Hello everyone!

We are trying to create a customer feedback page here:

https://hubspot-webdev.digitalsamba.com/guest-thank-you-for-attending-stars

Rather than radio buttons, we want the customers to pick from a star rating. We have not been able to get that working since we dont know if or where we can add code to the hubspot form. We are working with a standard hubspot form inside the hubspot CMS.

At the top of the example page you can see what we would like it to look like (the stars arranged horizontally, and the ability to click the stars to rate the software).

In the form section, on the left side of the page, you can see how far we got before getting stuck. We managed to change the radio buttons to stars, but thats about it. We can't get them to select the way the ones at the top do, nor can we arrange or resize them as we like.

Has anyone else managed to use graphics rather than radio buttons? Do you have any script examples of how this can be achieved?

Best,

Robert

[Stephanie-OG]

Hi Robert,

I tried out the following and I think it should work: 

ul.inputs-list {
  direction: rtl;
}

.hs-form-radio {
  direction: ltr;
  display: inline-block;
}

.hs-form-radio:hover label, .hs-form-radio:hover ~ .hs-form-radio label {
  color: purple;
}

The first command reverses the order (otherwise the stars were filling right to left) so you'll want to reverse the order of the inputs on your form. The inline-block display sets them horizontally and the final command fills out any stars before the one you're hovering over (I set it to purple for testing).

Bear in mind that the CSS selectors above target all radio buttons on all forms so you'll probably want to set this specific to the style of this pageor form or give your form a class or ID to add to the selectors. 

I hope that helps!

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[robert1]

@Stephanie-OG - thanks for getting back to me and even adding the little video, this looks promising and we will definitely try it.

Since you mention adding a particular class or ID, how can we add this class/ID to the form if we cannot edit the form code itself?

Best,

Robert

[Stephanie-OG]

Hi Robert, 

No problem at all!

I spend too much time in the Design Manager so I didn't notice that neither the Forms tool or the form on the Landing Page itself has an option to add a CSS class or ID (you can do so at the template level but this doesn't help if multiple pages use it). 

If there's only one form on that page, I'd say the simplest solution would be to go to Settings > Advanced Options > Head HTML and, in there, paste the code surrounded by style tags like this: 

<style>
ul.inputs-list {
  direction: rtl;
}

.hs-form-radio {
  direction: ltr;
  display: inline-block;
}

.hs-form-radio:hover label, .hs-form-radio:hover ~ .hs-form-radio label {
  color: purple;
}
</style>

That way it'll only apply to forms on this page. Also, this applies to all radio type options so if there are more form fields we may need to update the selectors to make them more specific. 

Stephanie

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[jennysowyrda]

Hi @robert1,

I want to pull some subject matter experts into the conversation: @AntonB and @Stephanie-OG do you have any suggestions for @robert1?

Thanks,
Jenny