More formatting needed on inline thank you message
For embedded forms, we need more formatting on the inline thank you message. It would be great to be able to have access to a HTML source button where we could drop in embed codes or format colors of the text.
@JoeMayall That's great. While you're looking into it, it would be awesome to be able to change the spacing between the form fields, GDPR, and submit button. I have a bunch of forms where the button is way low almost departed from the rest of the form and there's no way to configure it without getting into CSS and I'm not a coder 🙂
I hope the status of this request changes from 'Being Reviewed' to 'Fully Implemented' soon. Other form builders allow you to customize, why not Hubspot?
Thanks @JoeMayall... that's really good to hear. I can't wait! I've held off using the contact form for this reason as well as the plain jane (also not formattable) auto-response email that gets generated. It doesn't even allow for a logo. I'm working to talk my nonprofit director into my eigning up for the Marketing Starter Hub (we'd love to do pro, but our marketing budget is tiny), or switch to a different CRM altogether. As a designer, the tools feel really constricting as they currently exist. Please keep us posted. Thanks!
Still waiting for more flexibility on form thank you messages 4 years on!
All points above are valid but specifically being able to access the HTML of the thank you message would give considerably more flexibility. Speficically I wanted to embed a video in the thank you message which isn't posssilbe because of this. Seem unnecessarily restrictive when these sort of formatting options exists across Hubspot for other content.
Its even more annoying when the options to style THIS very message (including accessing the HTML!) is FAR superior!!
Hey there - just found this on my search for a solution for embedding a Calendly link in to the thank you message. Very surprised to see that this has been requested for such a long time. It seems so simple to solve. What is the plan here?
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.
Set form to Thank You message. Fill Thank You message Rich Text Field with a few
Navigate from Edit tab to Options tab. Click Advanced. Edit the Footer field with the following Script —
<script>
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
let el = document.querySelector('.submitted-message');
let newHTML = "<div>Your HTML here</div>";
el.innerHTML = newHTML;
}
});
</script>
Your content editor won't be happy, but this opens up possibilites. For us, we needed a Kiosk mode form that had a query parameter refresh link. I was able to inject such a button with the above script.
@CDarné - you can tweak my solution above to create a button within the thank you message. You'd just use basic JavaScript to add your elements and styles.
As a reminder, you need to use the embedded code version of your hubspot form within your site, and then the onFormSubmitted attribute to generate your callback function. This documentation goes into more depth on it: https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options
onFormSubmitted: function($form, data) {
// setup targets for iframe doc
const iBody = $form[0].closest("body");
const iDoc = iBody.parentNode.parentNode;
// Generate a button for whatever you want
let formStyles = iDoc.createElement("style");
let homeButton = iDoc.createElement("a");
let message = iDoc.querySelector('.hbspt-form > .submitted-message');
let styles = `
.btn {
color: #fff;
display: block;
text-align: center;
margin: 10px auto;
padding: 10px 16px;
width: fit-content;
background: #f08605;
text-decoration: none;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
`;
homeButton.setAttribute('href', 'https://www.google.com/');
homeButton.classList.add('btn');
homeButton.innerText = "Return to Google";
formStyles.appendChild(iDoc.createTextNode(styles));
iDoc.head.appendChild(formStyles);
iDoc.body.appendChild(homeButton);
}
Debe ser un usuario registrado para añadir un comentario aquí. Si ya está registrado, inicie sesión. Si todavía no está registrado, hágalo e inicie sesión.
