The other thing we need to do is style this the same way this is, right? This is the type=text, this is type=email and we could change that to type=text or we could add the type=email to our style. We have a typical form input here someplace, typical post box, typical text input, this is what’s styling the text one, yes input[type=”text”].
We’ve left all that stuff default, top margin is default and padding is 5, 5, 5. So what we could do here is just take this under Additional CSS and say input[type=”email”] and then padding:5px, so input[type=”email”] and we give it the same padding as the other.
Now, it’s not quite right, I bet you the font size is different. That font size is what, oh, it’s not saying, 33 pixels, 30 pixels so let’s just say 6, instead of 5 let’s make it 6 and see what happens, 5 take it to 6.
We’re talking about top and bottom padding at that point, so padding-top is 6, padding-right, okay. So padding, we could do top is 6, left is 5px, bottom would be 7px and then 5px. It’s not quite, you know, we might just end up saying close as good enough, okay?
So now you have a functioning form, let’s come back over here to this and just save it and refresh this, go the home page where it exists and now we’ve got our form.
Ayana, was there anything there that you need to have cleared up? Okay, good. She says she doesn’t need anything cleared up.
So basically, what you’re doing is you are taking the plainest sign up form you can possibly get from MailChimp with the least amount of CSS. Then you’re making a couple of minor modifications and you’re putting it in the container that has a big background image. Then you’re just using padding to move this around and because of the way this wanted to be laid out, I also used absolute and relative positioning for the button. In some cases, you might not need to do that, it just depends on the design and now you’ve got this big fancy optin form. That’s how it’s done.