Hi all,
I took a crack at this over the last hour and I’ve come up with a solution for this issue that I’ve tested and it works great. One thing to note, however, is that it only works when using the embedded code version of a hubspot form. I haven’t attempted a solution via php or shortcode, so I wouldn’t be able to workshop that, but with general HTML and JS, here ya go!
Depending on the step you’re on, and it seems like in this case this is for the confirmation step, you’ll want to use the onFormSubmitted method and then create some variables for targetting. Here’s an example of my implementation:
onFormSubmitted: function($form, data) {
// setup targets for the iframe doc
const iBody = $form[0].closest("body");
const iDoc = iBody.parentNode.parentNode;
// Create style element to be added
let formStyles = iDoc.createElement("style");
let styles = `.submitted-message p { color: red; }`;
formStyles.appendChild(iDoc.createTextNode(styles));
iDoc.head.appendChild(formStyles);
}
The key thing to note is that when creating your elements and modifying them via injection, you need to use your iDoc constant, otherwise this all gets applied to the overall document, not within your form’s iframe, and then you won’t see any changes.
I was initially looking into this topic because I wanted to add extra content here outside of text, so while I haven’t tested this immediately, I’m sure the injection method would work similarly if appending your .submitted-message div with whatever HTML elements you want.
Hopefully this helps some people since it seems like this solution hasn’t been ironed out yet by HubSpot officially.