Feb 1, 201911:56 AM - edited Feb 1, 201911:56 AM
Contributor | Partner
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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.
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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 ...
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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:
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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.
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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:
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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...
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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 ...
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/CMS
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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...
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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.
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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...
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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.
May 21, 201911:20 AM - edited May 21, 201911:22 AM
Participant
Styling a Thank You Message in WordPress in an Embedded Form
SOLVE
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.