I set this example up to paint the picture of what I am trying to achieve. I have an embed Hubspot form and I want to trigger an action on submit of the form. For this example if you could have it click the ‘change color’ button once the form is submitted, I can translate that to my actual use case inside of webflow.
I would love to share the actual link to the project but can’t with this client.
Here is the link to the page that you can use to create a solution: Static Template
Please please please let this be possible… Thank you to anyone that helps!
typically something like this would work but I think since it is an embed, it cant identify the button by it’s class. I just tried that code and it didn’t work. This one is really making me scratch my head…
Yea weird I’m actually seeing the same thing now. Sometimes my query selectors will return the expected result but sometimes they don’t.
I tried const b = document.querySelector('[data-reactid=".hbspt-forms-0.5.1.0"]') and it worked the first time. Refreshed the page and tried again and it was undefined.
I think it has to do with how the page is embedding… we are querying from document object but it looks like there may be more than one document actually…
Shifted from jQuery to javascript just because. Looks like we have to query the iframe first. In this case, there are two iframes on the page (open in sandbox on bottom) so I just got them both and then access the one from Hubspot by calling frames[0]. Now we can query that embed by accessing the contentDocument.
The code could probably be improved by…
Access the Hubspot from by id which is “hs-form-iframe-0” something like document.querySelector(“#hs-form-iframe-0”).contentDocument.querySelector(‘.hs-button’)
Wrap everything in a ‘DOMContentLoaded’ event listener to make sure the iframes have loaded up everything.
This worked great! Thank you.
Only thing I had to change to get it to work in Webflow was change
document.addEventListener('load', () => {
to
window.addEventListener('load', function () {
Once I did that, it worked perfectly. The only thing I need to change now is having the event trigger on the form actually submitting and not just the click of the button.
This is the current code I have now but it doesnt validate if the form is actually submitted. Like if the field has an error and the form doesnt submit, it will still trigger it.
BTW, I’ll definitely subscribe and mark as the solution. You need one of those “buy me a coffee” links in your bio. Ill definitely buy you one for your help!
Could you use the JavaScript constraint validation API to add a conditional statement within the submit event to check if the form is valid and then only run the click function?
Or could you get rid of browser validation altogether by adding the novalidate attribute to the form? (Mentioned in the link above)