I've got a Gatsby site that uses a handful of plugins and third-party components. The component in question is a form built with react-hubspot-form. Hubspot sends raw HTML which I'm able to style with CSS. There are two potential hangups I've got with this, both of which deal with targeting specific elements in that form.
I'm looking to add Google Analytics to the submit button to track clicks. I've thought about wrapping the component and adding an onClick to the parent, but this would track clicks anywhere on the form, not just the submit button. I'm currently trying to incorporate ReactGA.
The second issue is updating state when a user selects a radio button. I need to dynamically update a url based on which radio button the user selects and cannot currently figure out how to do that.
<HubspotForm
portalId='PORTAL_ID'
formId='FORM_ID'
redirectUrl={`URL_WITH_PROPS_TO_DYNAMICALLY_UPDATE_LENDER_CODE=${props.lenderCode}`}
submitButtonClass='loanAppSubmitBtn'
cssClass='program-apply'
onSubmit={()=>{
ReactGA.event({
category: 'Apply Now Button',
action: 'click',
label: 'form submission'
})
console.log("clicked hidden button")
}}
/>
When I tried putting a function for onSubmit, the console said I needed to use jQuery.