Form - Add "Total" which changes based on selected form options

Develop, Build & Integrate CMS Development
,
1

Hi,

I’m a developer but new to using Hubspot.

I wanted to use JS to manipulate the HS embedded form after it loads, To add a data-attribute=“PRICE” to each option in a select dropdown on a form. When the option is selected then I update a #subtotal text value with an updated price.

Seems like my JS won’t affect the embedded HS form or even listen to the select dropdown change. I then tried putting my JS in the onFormReady callback and still not working.

Any feedback is appreciated,

thanks!

2

Hi @Senor and welcome to the Community, we are delighted to have you here!
Thanks for reaching out to us!
Could you please share the code you are using and the URL of the webpage where the form is, please?
The more info, screenshots (without sensitive/confidential information), and details you can provide, the better the Community can assist.

I’d love to put you in touch with some of our Top Experts:
Hi @Syeda_Fatima, @alyssamwilie and @miljkovicmisa do you have tips to help @Senor, please?
Thanks so much and have a nice day!
Best,
Bérangère

3

Hi @BérangèreL @GRajput !

Heres the URL: https://tune-website.webflow.io/testing

Heres the code I’m using:

<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/embed/v2.js”></script>

<script>

hbspt.forms.create({

region: “na1”,

portalId: “removed-id”,

formId: “removed-id”,

onFormReady: function($form) {

document.addEventListener(‘DOMContentLoaded’, function() {

const selectElement = document.getElementById(‘truck_make__test_-e771fcd3-d729-4d6e-8047-84c6f5ed1d1e’);

selectElement.addEventListener(‘change’, function(event) {

console.log(event.target.value);

console.log(“hello world”);

});

});

}

});

</script>

4

Hi @Senor, thank you for sharing the code with the Community!
I’d like to share these threads that might point you in the right direction:
- How do add new data in option select property use to api?
- Custom dropdown-element for forms prepopulated with data
Also, I’d like to invite our Top Experts and Community Members to join this conversation: Hi @Mike_Eastwood, @GRajput, @byersoy, @Roja, @DiogoMC, @Falke, @Kevin-C, @louischausse and @jonchim do you have suggestions to help @Senor, please?
Have a lovely day and thanks so much!
Best,
Bérangère

5

Hi @Senor

Can you please share your code snippet where you are using the call back and when you do please make sure to remove the values of portal ID and form ID.

Thanks!