Styling a Thank You Message in WordPress in an Embedded Form

SOLVE
CWBourque
Contributor | Partner

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. 

2 Accepted solutions

Accepted Solutions
michaelb23
Solution
Participant

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!

View solution in original post

brnsjms
Solution
Member

I couldn't quite get the suggested workaround to work for me due to the styling I wanted to acheive, so another option is to set your thank you message as a bullet point(s). Once you've done that - if you're able to edit the templates that you're using - you can use a bit of selective editing to apply specific styling to bullet points that appear on forms:

 

1. Edit your template to add a css class to the block that contains your form, e.g.

 

.form-thankyou-wrapper

 

2. Add styles in your stylesheet to control the output:

 

.form-thankyou-wrapper ul {

list-style-type: none;

}

.form-thankyou-wrapper ul li {

font-size: 2em;

font-color: #ffffff;

}

 

... and  so on.

 

Hope that helps somebody else! 😄

View solution in original post

22 Replies 22
jennysowyrda
Community Manager

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

teller
Participant

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)

Appster
Member

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.

jkutchinsky
Participant

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.

AzizN
Member

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?

 

 

ryan_ross
Participant

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

mgarrett13
Participant

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

 

AzizN
Member

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.

 

 

seleleospencer
Participant

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 

DannyH
Participant

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.

mherzog
HubSpot Product Team

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.

copyjosh
Participant

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

michaelb23
Solution
Participant

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!

View solution in original post

Catherine4
Member

Thank you Michael - very helpful!

0 Upvotes
seleleospencer
Participant

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

0 Upvotes
DamonK
Member

michaelb23 's solution of pasting in:

cssRequired: ".submitted-message { color: #ffffff; }"

worked perfectly to make the thank-you message text white, but it ALSO created a thin white border around each submission field. Any thoughts  on how to resolve? Is ".submitted-message" including those feilds? 

 

Interestingly, when I change  the color to something  OTHER than white (for the Thank You message font color) the feild hairline boxes REMAIN white. 

 

Note: I'm in Wordpress/Divi Theme, not using Hubspot Builder/CMSScreen Shot 2020-11-06 at 7.54.18 PM.jpg

 

PaulN
Participant

We have exactly the same problem with the white hairlines.  Additinally a lot of other formatting disappears - for example withoug the fix first name and last name appear side by side as set in the form editor, but with the fix above they drop down one under the other

 

0 Upvotes
CWBourque
Contributor | Partner

@DamonK I haven't done more elaborate CSS like Michael did, but I'd think getting rid of the white borders might just require a bit more CSS. 

cssRequired: ".submitted-message { color: #ffffff; } .FORM-ELEMENT-CLASS-NAME {border: none;}" 

Where .FORM-ELEMENT-CLASS-NAME is a common class assigned to the form elements on the page. 

NOTE, I haven't tried this, but this might work.

DamonK
Member

Hmm... didn't actually make any change, but I appreciate the lean in!

I connected with a dev' friend, and he mentioned that it SEEMS like the browser styling defaults are getting activated (which may also be why changing the font color doesn't change the hairline color. We tried some added code: ".form-columns-2 {border:0;}" but it didn't do anything either. Still cracking on it...

0 Upvotes
ml3peter
Member

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 Upvotes
brnsjms
Solution
Member

I couldn't quite get the suggested workaround to work for me due to the styling I wanted to acheive, so another option is to set your thank you message as a bullet point(s). Once you've done that - if you're able to edit the templates that you're using - you can use a bit of selective editing to apply specific styling to bullet points that appear on forms:

 

1. Edit your template to add a css class to the block that contains your form, e.g.

 

.form-thankyou-wrapper

 

2. Add styles in your stylesheet to control the output:

 

.form-thankyou-wrapper ul {

list-style-type: none;

}

.form-thankyou-wrapper ul li {

font-size: 2em;

font-color: #ffffff;

}

 

... and  so on.

 

Hope that helps somebody else! 😄

View solution in original post

ClassicNiall
Member

Hi

Could anyone help me implement these solutions?  I haven't a clue as to where the code needs to be entered.
All I want to do is make the thank you message white in font colour.

0 Upvotes