Creating Rails API integration with HubSpot forms while capturing user image selections

I’m developing a feature for a client’s website where users can select images and submit forms through HubSpot. The basic HubSpot form embedding works fine for regular pages, but I need to connect the selected image data with the form submission.

The challenge is linking the image selection with HubSpot’s form data collection. Here’s the HubSpot integration code I’m working with:

<!--[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 image selections, I’m using this jQuery approach:

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

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

I need to either modify the embedded HubSpot code to include the selected image data, or create a Rails API that sends this information directly to HubSpot. What’s the best approach for this integration?

just use the onFormSubmit callback in HubSpot - it’ll grab the selected image data right b4 the form submits. add the callback to your hbspt.forms.create and set the image class/src as a hidden field value. way easier than building a new Rails API.