How to build Restful API, from Rails, to Hubspot Forms API and/or altering embedded code?

Question

So I'm working on a clients database and they switched to Hubspot for forms. In most cases I can just embed the form code at the end of the page no problem. However in this one particular page they are allowing users to click on an image, enter information into a form, collect the data, and then send the image as whatever item they selected.

Hubspot takes care of the collecting the data in the form. The issue is connecting the image that the user is clicking on with the form. Here is in a nutshell what the embedded code looks like from Hubspot.

<!--[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: 'numbers',
    formId: 'form numbers and letters',
    sfdcCampaignId: 'campaign letters and numbers'
  });
</script>

For the selecting the images I'm using the below to indicate the images have been clicked:

<script>
  var $link = $('.img-container1');

  $('.img-group').on("click", '.img-container1', function() {
    $link.removeClass('active');
    $(this).addClass('active');
  });
</script>

So my question is, how do I, if I can, input into the embed code to hit the items being marked? If I can't, any idea how to build out the API to hit Hubspot using Rails? I've honestly never done that so any help is appreciated.

Answer 1

This can actually be resolved through the embedded code using JavScript. Altered the embedded form using:

hbspt.forms.create({
 portalId: numbers,
 formId: numbers and letters,
 sfdcCampaignId: numbers and letters,
 target: '#hubspot-form-target'});

Then applying to the onclick:

$('input[name="image"]').val(this.getAttribute('image-var')).change();

Hopefully this helps someone else along the way.