Integrating Rails with HubSpot Forms API for dynamic image selection functionality

Other Questions HubSpot
1

I’m developing a client’s website where they recently migrated to HubSpot for form handling. While basic form embedding works fine, I have a specific challenge with one page.

The functionality involves users clicking on different images to make selections, then filling out a form where the chosen image data needs to be included in the submission. HubSpot handles the form data collection, but I need to connect the selected image information to the form submission.

Here’s the basic HubSpot embedded form structure 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 image selection tracking, I’m using this jQuery approach:

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

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

My main question is whether I can modify the embedded form code to capture the selected image data. If that’s not possible, what would be the best approach to create a Rails API integration with HubSpot? I haven’t built API connections before, so guidance would be really helpful.

2

I tackled something similar last year and found the cleanest solution was tweaking the embedded form creation. You can pass extra data straight through hbspt.forms.create() using the onFormReady callback. Once the form loads, just add a hidden input field and fill it with your image selection data. The key is using the onFormSubmit callback to grab that data before it goes to HubSpot. This keeps things simple - no messy API calls, and your client still gets the embedded form they want. Your Rails backend can handle the image selection and pass everything to the frontend JavaScript managing the HubSpot integration.

3

just grab the image data using data-* attributes and store it in a variable when someone clicks. then use hubspot’s onBeforeFormSubmit callback to inject that data into the form submission. no need for complex api stuff if the embedded form’s working fine.

4

I encountered a similar issue with HubSpot recently. The key is to realize that the embedded form cannot directly capture external data like image selections. Instead, you should use HubSpot’s Forms API. Start by creating a hidden input in your HubSpot form to hold the selected image information. Then, instead of using the embedded form code, create a custom form that submits directly to the HubSpot API endpoint: https://api.hsforms.com/submissions/v3/integration/submit/[portal-id]/[form-id]. Store the selected image data in a JavaScript variable when an image is clicked and send it along with the other form data as a JSON object in a POST request. It’s more secure to handle this on the server side with Rails, where you can manage data submissions more effectively and implement better error handling.

5

Building the Rails API integration is pretty straightforward once you get the structure down. You’ll capture the image selection data in your Rails controller, then send it to HubSpot through their API. Set up a custom form handler in Rails that grabs both the form data and selected image info. Use the httparty gem for the API call to HubSpot’s submissions endpoint. The key part is proper error handling - HubSpot’s picky about data formatting. Make sure your Rails route accepts the image data as a parameter, validates it, then includes it in the HubSpot payload. This way you get more control over submissions and can handle Rails-specific logic before sending data to HubSpot. Their API docs are decent enough to get started, just watch the required field formats.

6

drop a hidden field in ur form and update it with js when someone clicks an image. hubspot’s editor lets ya add hidden fields easily. then just use $('#hiddenfield').val(selectedImageData) on click. way easier than dealing with APIs unless u absolutely need them.