16. Edit CSS for embedded MailChimp form

Last updated on October 30th, 2020 at 04:10 pm.

16. Edit CSS for embedded MailChimp forms - Bizanosa Mailchimp Course

Watch Edit CSS on YouTube

Video Transcript:

Hi guys. Welcome back. In this video we are going to style this button, so it can reflect the color of your website. We are going to do this by the help of Firefox plugin, right here called Firebug.

Before I do that, so, when someone clicks this form, this form is supposed to everything on this page . When someone clicks the button , it’s supposed to bring this .All of the validations are supposed to happen on this page , not anywhere else. If by any chance, this is not happening for you, it might be because of the changes you made here and maybe they affected the code and the code did not refresh in time. So what you need to do, you need to click on shift on your computer and then refresh .

Once you do that, you’ll copy the code again and paste it again . And that should happen…should work for you . To test whether the form will do that on your page where you’ll embed it just come to this…this preview area , click there . If it… if it works here, it will work there. If it doesn’t work like this here, then you need to refresh again . As long as it is working here, it will work on your website the same way .

Ok, moving on. We want to style this button, so that it can look… you can also style all of these but I don’t really mind, the colors are good enough for user Experience and that’s what is important to me.

So I’ll open Firebug . If you don’t have Firebug you can do this on chrome as well but I am a big fan of Firefox Mozilla . So select that… First of all…let’s find the color. So background color, there we go. That’s what I want to change, the background color. So let me choose a nice color here… Let me take this color . It’s a nice shade of blue .

So I’ll just come down here and test it out . And yes….I think that color looks good. When I hover it’s still the black one . But First of, let me just copy this , and put it into my CSS .

In the next video we’ll see how to do the same thing for a WordPress website because I know most people are using WordPress.

So , once I do that and save . Okay . there’s a bad practice that II have to introduce here and it is called !important . Well you see now yes that works.

So let’s work on the hover color . So for the hover, you can see the color is that . Let me take the bright version…just to show that there is a difference . As you can see, this is being downloaded from the CDN …and that is why I have to add !Important .

So when we go back and reload the page… yeah well… it’s not the best color but you can use any color for you. I just wanted to illustrate how you can do it.

Ok guys that does it for this video . See you in the next video

Comment Here

Need WordPress help? Linux Server help? Talk to us.

  • We are your own WordPress customer service.
  • We set up Linux servers and install or migrate WordPress. Learn more here.
  • We support WooCommerce too.
  • Check out our WordPress customer support plans here or contact us below .

If you have any questions regarding WordPress support, Linux server support or any of our services, feel free to reach out or read more on our services page.

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!