HubSpot Ideas

mrspabs

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.

37 Replies
DaveTwichell
Member

@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 🙂

Crossroads-Comm
Member

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?

 

jujubee
Participant

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!

linusgrundstrom
Member

Still no updates on this matter?

KakarottoXR
Member

@JoeMayall it's been 6-months now, is the feature STILL being reviewed for that long?

 

It's such a basic request, it's hard to believe Hubspot hasn't already solved this problem let alone is spending 6-months to review it...

 

 

GGonzales
Member

No news?

emilysarra
Member

Why is this still being reviewed? There are more options for styling text in your Community Forum than on our public-facing form confirmations.

DSinay
Member

Crazy that i got this feature to write this post and not to greet our possible customers...

KristieA
HubSpot Employee

Upvoting for my customer!

dreweastmead
Contributor

this should have been addressed 5-7 years ago. cannot stand Hubspot forms and how limited they are.

MusicMarketer78
Contributor

Any updates on this feature? 

JohnDaltrey
Participant

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!! 

OHED
Member

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? 

Thank you!

justin-ingo
Member

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.

Anonymous
Not applicable

Dev experience has been one of the worst products I've wrangled in. Documentation is a mess. Found the right solution in the legacy API docs. Heavy eye roll.

 

Here's what worked for me:

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.

 

No promises that this will work tomorrow.

CDarné
Member

We also need to add a button to our Thank You messages for people to downlaod files / lead magnets.

Very frustrating.

justin-ingo
Member

@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);
}