Styling a Thank You Message in WordPress in an Embedded Form

解決
Highlighted
常連投稿者

I can center the Thank You Message from the Form > Options tab, but I don't have other style controls for that message like I do in the Style & Preview tab where I can set the font family, color, and font size for the form labels and buttons. How do we style the inline Thank You Message text that appears after submission? 

Note, that because it's an embedded form on a WordPress page, there's lots of other content on the page that I'd prefer to keep without sending to a different page. I suppose I could create a duplicate page with just a thank you message instead of the form, but that seems overkill to load a new page in this instance. What would be nice is an easy way to style that Thank You Message like I can the rest of the Embedded Form elements. 

1件の承認済みベストアンサー

受理された解決策
Highlighted
一般投稿者

Thought I'd answer, as I found a solution for this. You just have to add the extra styling direction into the embed script. 

 

For example, I wanted to change our "thank you message" to white font. So I added the bold, highlighted string below, to the normal embed code. The "cssRequired" JS prefix is the tag you need to use, along with the ".submitted-message" css selector ... 

 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "523181",
formId: "1b320783-cfcb-414d-8969-669bae914460",
cssRequired: ".submitted-message { color: #ffffff; }"
});
</script>

 

 

Of course, put your own preferred CSS directives instead of mine: 

 

cssRequired: ".submitted-message { putyourownCSShere; }"

 

ONE MORE TIP: Make sure to add a comma after the default "formID" line ... before you add your cssRequired line ... otherwise you'll break the script.

 

Hope this helps!

16件の返信
コミュニティーマネージャー

Hi @CWBourque,

 

Do you have a link to the page we can look at? What troubleshooting have you tried thus far? 

 

The more information, screenshots and details you can provide the better the Community can assist.

 

Thank you,

Jenny


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !
Highlighted
新規投稿者

Similar question here. Embedded form on site, form looks fine but Thank you page is completely unstyled.

 

You can see it when you fill out the form at https://wp-staging.applift.com/contact

 

I know that the workaround is to embed RAW form and style it with CSS on the site but I was hoping to not ask our dev to go through that task.

 

Bonus question: How do I get the page to jump to top after form is submitted so that the "Thank you" message would be visible?

 

 

Screenshot 2019-02-22 at 12.54.05.png

 

 

Thanks! 

Siim (n00b Hubspotter)

Highlighted
新メンバー

I'm looking for a solution here too. 

 

I've tried styling from my page but this doesn't work due to CORS issues i.e. you can't tell another webpage what to do in terms of styling or javascript. Browsers block this for security reasons.

 

It does seem a massive oversight to have such piddling styling options for the thank you message.

Highlighted
新規投稿者

I have the same issue. Basically, my webpage has a dark background, but the thank you message has black text, and there is no way to change the color of the message. CSS is not possible because it is an iframe.

Highlighted
新規投稿者

I have the same issue with the thank you text. My background is dark and i want to make the font white but i cannot seem to make that change. Did you guys get this sorted?

 

 

Highlighted
新規投稿者

We just ran into this issue this morning — the client's site background is black and the Thank You message font output is black only. I found that I wasn't able to simply edit the color of the message like I could edit color for other elements of the form.

 

 @teller mentioned wanting to avoid using the Unstyled form option (screenshot below) under the Options tab when editing your form as you have to edit the HTML or task it to a developer — and I agree. Why tie up an additional resource to make an edit for such a small but important element.

 

I was, fortunately, able to have a developer reformat the whole form including the color of the thank you text but it would be much better if those like myself who don't know how to edit HTML to be able to make this change right from the editor.

 

I did find that this idea was submitted at least once here on the ideas forum: More formatting needed on inline thank you message 

 

I upvoted the idea. Hopefully, all of you and others will as well.

 

check-unstyled-form.png

Highlighted
一般投稿者

rather illogical that this is not available.  Marketo can do it no problem!

 

Highlighted
新規投稿者

Exactly! The option should be included by default. How can they not know!

 

I had to create a thank you page just so to overcome this issue.

 

Hubspot please add the option to style the thank you text/color in your future releases.

 

 

Highlighted
一般投稿者

Spent way too long today on trying to style the thank you message to my website's design and have the file, that I'm offering for data, open in seperate tab.

 

Had one of those "AGGGHHHH!!!" moments I haven't had since I used to use Microsoft products!

 

It makes my website look poor, lack credibilty and as it's such a horrible user experince for my customers I've built the form from scratch on the site and will now have to manually input data into the CRM

 

This should be such a quick fix Hubspot and make a big difference 

Highlighted
一般投稿者

I'm having the exact same issue. More HubSpot forms like the popup are also notorious for having background and formfield color issues. I really do think it's an easy fix. I'm getting frustrated with the lack of response from the community representatives.

Highlighted
HubSpot製品開発チーム

Hey everyone, happy to add some context here. This is certainly on the team's radar, but is not current functionality of our embedded forms styling (as you've all figured out by now). Want to give this idea an upvote, and continue the discussion there? Would probably give it some more traction.

Highlighted
新規投稿者

As a software engineer, I have to say the fact that this unstyled thank you text hasn't been resolved by an intern in less than a day of it being reported as an issue should be an embarassment to HubSpot. Ridiculous...

Highlighted
一般投稿者

Thought I'd answer, as I found a solution for this. You just have to add the extra styling direction into the embed script. 

 

For example, I wanted to change our "thank you message" to white font. So I added the bold, highlighted string below, to the normal embed code. The "cssRequired" JS prefix is the tag you need to use, along with the ".submitted-message" css selector ... 

 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "523181",
formId: "1b320783-cfcb-414d-8969-669bae914460",
cssRequired: ".submitted-message { color: #ffffff; }"
});
</script>

 

 

Of course, put your own preferred CSS directives instead of mine: 

 

cssRequired: ".submitted-message { putyourownCSShere; }"

 

ONE MORE TIP: Make sure to add a comma after the default "formID" line ... before you add your cssRequired line ... otherwise you'll break the script.

 

Hope this helps!

Highlighted
新規投稿者

Thank you Michael - very helpful!

返信
0 いいね!
Highlighted
一般投稿者

Nice work Michael! - I'll try it out on my next site.

返信
0 いいね!
Highlighted
新メンバー

So a terrible but perhaps acceptable solution for anyone really in a bind here...make all of the thank you message text a link. To do so, in the Hubspot builder, just highlight all of the text and click the link icon. It will look ugly (text will appear in the basic hyperlink blue and be underlined) but atleast it will be visible...

返信
0 いいね!