Lead Capture Tools

CWBourque
Contributor | Partner
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. 

2 Accepted solutions
michaelb23
Solution
Participant

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

 

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

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:

 

.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

25 Replies 25
AzizN
Member

Styling a Thank You Message in WordPress in an Embedded Form

SOLVE

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?

 

 

jkutchinsky
Participant

Styling a Thank You Message in WordPress in an Embedded Form

SOLVE

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.

jennysowyrda
Community Manager
Community Manager

Styling a Thank You Message in WordPress in an Embedded Form

SOLVE

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

Styling a Thank You Message in WordPress in an Embedded Form

SOLVE

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

Styling a Thank You Message in WordPress in an Embedded Form

SOLVE

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.