Creating Rails API connection to HubSpot Forms with dynamic image selection integration

Other Questions HubSpot
1

I’m working on a project where my client moved to HubSpot for their form handling. Most of the time I can just drop their form code into pages without issues. But there’s this one specific page where users need to click on images, fill out a form, and then the system needs to connect which image they picked with their form submission.

HubSpot handles the form data collection part fine. The tricky part is linking the selected image with the form data. Here’s what the HubSpot embed code looks like:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

<script>
  hbspt.forms.create({
    portalId: 'portal_id_here',
    formId: 'form_id_value',
    sfdcCampaignId: 'campaign_id_value'
  });
</script>

For tracking which images get clicked, I’m using this JavaScript:

<script>
  var $selectedImage = $('.image-wrapper');

  $('.image-gallery').on("click", '.image-wrapper', function() {
    $selectedImage.removeClass('selected');
    $(this).addClass('selected');
  });
</script>

Can I modify the HubSpot embed code to capture the selected image data? If that’s not possible, what would be the best way to create a Rails API that connects to HubSpot directly? I haven’t built APIs like this before so any guidance would be helpful.

2

I just dealt with this same issue. HubSpot’s form events API worked great - use the onFormSubmit event to inject your image data before it submits. Add an onFormSubmit callback to your hbspt.forms.create config that grabs the selected image class or data attribute. Something like: onFormSubmit: function($form) { var selectedImg = $(‘.image-wrapper.selected’).attr(‘data-image-id’); $form.find(‘input[name=“selected_image”]’).val(selectedImg); }. This keeps everything client-side but gives you way more control than just hidden fields. Just remember to add the hidden field to your HubSpot form first.

3

I’ve done tons of HubSpot integrations and here’s what actually works in production: use a hybrid approach with sessionStorage. When someone clicks an image, store it in sessionStorage. Then use HubSpot’s form events to grab it on submission. The big win? sessionStorage sticks around even if users leave and come back to finish the form later. Just add sessionStorage.setItem(‘selectedImage’, imageId) in your click handler, then use onFormReady to populate a hidden field with sessionStorage.getItem(‘selectedImage’). Way more reliable than DOM manipulation and you don’t need backend changes. I’ve watched too many setups fall apart when users disable JavaScript or have crappy connections that kill the submission.

4

I’ve hit this same HubSpot integration issue before. The hidden field trick works, but I’d go with the HubSpot Forms API instead - way more reliable. Just capture the image selection in your Rails backend, then push everything to HubSpot programmatically. You get much better control over data flow and error handling. In your Rails controller, POST to HubSpot’s forms endpoint with your form data plus the image identifier. The API docs are pretty clear once you’ve got your API key sorted. Plus you can validate everything before it hits HubSpot - saved me tons of headaches with broken submissions.

5

for sure! just add a hidden field in ur hubspot form, call it ‘selected_image’. when a user clicks an image, use js to set that value before the form submits. way simpler than setting up a whole api!

6

honestly the rails api route isn’t that bad if you want full control. just use the hubspot ruby gem, capture image selection on your end first, then send everything together in one api call. way cleaner than trying to hack the embed code imo