How To Customize Your ConvertKit Form's Success Message Colors
Fam, you might have heard me mention on Instagram that I recently made the change from Mailchimp to ConvertKit. And while the reasons for my change are so many that I will have to write a blog post just for it, I have been learning some things about ConvertKit that I think you might be wondering about too.
I am writing this blog for those of you who have been using ConvertKit and are still figuring it all out (just like me!). And while everything seems very intuitive and easy to use after the initial moment of “I have to learn ConvertKit’s lingo before anything”, you kinda fall in love with it.
However, the one thing that I could not change while creating forms on ConvertKit to add to my website for people to subscribe to my newsletter, was the weird green background that pop-ups with the “success message” after the person signs up. Let me show you.
(** Some of the links in this blog are affiliate links. At no additional cost to you, I will earn a commission if you click through and make a purchase. Thank you for supporting my content!)
So here is an example of a form I added in a blog post so my readers can subscribe to my newsletter and get a free copy of my ebook.
Once the reader enters their first name and emailed and pressed “Download your guide”, here is how my “success message” appeared:
That green color is so out of place and it does not match with my website at all! You agree with me, right?
I searched within ConvertKit and on Google for a way to change it, but I had no luck. So I emailed ConvertKit for help, and let me tell you, they have an AMAZING customer service! They got back to me within 24 hrs with the solution, which is a simple custom CSS that I needed to add to the CSS editing section of the form building window in ConvertKit.
Here is how it looks now:
I made this super quick 4 minutes video so you can change your forms too! No more weird green for us, thank goodness!
This is the custom CSS I used:
.formkit-alert-success {
background: #ffffff;
border-color: #e3e3e3;
color: #000000;
}
CONTINUE READING:
