Lead Capture Tools

CWBourque
Contributeur | Partenaire solutions
Contributeur | Partenaire solutions

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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 Solutions acceptées
michaelb23
Solution
Participant

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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!

Voir la solution dans l'envoi d'origine

brnsjms
Solution
Membre

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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

Voir la solution dans l'envoi d'origine

25 Réponses
ClassicNiall
Membre

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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 Votes
brnsjms
Solution
Membre

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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

ml3peter
Membre

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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 Votes
michaelb23
Solution
Participant

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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!

JOlive5
Participant

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

So, I tried this and it didn't work 😞 #hbspt-form-18909ade-1f2a-4631-9c45-e411e82cfa42 .submitted-message {color: #ffffff; } any ideas?

0 Votes
JOlive5
Participant

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

THanks for this, but I used shortcode to embed my form. I can't get it to work 😞 I'm using guten I think

0 Votes
BérangèreL
Gestionnaire de communauté
Gestionnaire de communauté

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

Hi @JOlive5,

Thank you for reaching out to the Community!

On this post "embed form styling in wordpress site" the solutions from @stefen and @ndwilliams3 might help you.

Thanks and have a lovely day!

Best,
Bérangère


Saviez-vous que la Communauté est disponible en Français ?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings!


DamonK
Membre

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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

 

CWBourque
Contributeur | Partenaire solutions
Contributeur | Partenaire solutions

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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 Votes
PaulN
Participant

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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 Votes
seleleospencer
Participant

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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

0 Votes
Catherine4
Membre

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

Thank you Michael - very helpful!

0 Votes
mherzog
Équipe de développement de HubSpot
Équipe de développement de HubSpot

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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

seleleospencer
Participant

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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
Contributeur

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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.

ryan_ross
Participant

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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

 

AzizN
Membre

Styling a Thank You Message in WordPress in an Embedded Form

Résolue

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.