Build Your Own Business Website header image

How to Create a Custom Opt-in Form with MailChimp & Thesis 2 – Part 2 – Add the Background Image to the Form

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that we’ve created our MailChimp form and added it to a Thesis 2 page, we have to add a nice big background image and then we’re going to move some pieces around.

Let’s begin with the image. I’ve already uploaded these images. I’ve got the big background image which is the opt-in header and I’ve got the “get it” button which is essentially the subscribe button.

Set the Background Image Options

We’re going to come back over here to CSS. We are going to create a package first, it’ll be a single element style package and we will call this the Optin Background and optin_background. Then the CSS Selector is #optin. Let’s save that and we’re just going to take that down here, &optin_background.

We need to get that so we’ll copy that image, go back to CSS, open up the Optin Background. Under Options, our background image is going to be that, background position we’ll say center top, no repeat.

Let’s take a look at it here first so you can see what it looks like. You can see this image in here, right? Now, what we’re going to do is use padding to move this down and over. There’s this green bar on the bottom of our image down here and we want to put that stuff right in this section, that green bar.

So, what I’m going to do is come back over here to the CSS and open up that option background and we’re going to add 300 pixels of top padding and 300 pixels of left padding and let’s see what happens.

We need a little more than 300 and 300 so let’s make it 350 and 400. We’re also going to give it a little bottom padding of say, 20. Okay, getting closer. So, these things will move all the way over to there and that’s pretty close to 100 pixels, well, we’ll move it over 80 pixels. We’ll move this down another 20. A little bit of hunt and peck for this so 390 pixels for that and 480 pixels. Okay, so maybe 350 and 510. Okay, that’s pretty close.

Add the Submit Button

Now, this thing here though is a Submit button and we want to add a background image to that. We’ll give it a size and then move it over here. We’re going to start that by creating a new package and it’s going to be a form input package. This is going to be the Optin Submit and the reference is going to optin_submit. And I believe this is going to be #optin input.submit because I think that was the class, input.submit.

Let’s just take a quick look at this input type=”image”, value, name=”subscribe”, class=”button”. Okay, so it’s not that, it is class.button and we’ve got to get rid of this div clear so that this stuff can jump up into that.

In fact, we should probably just move this input up into that. So let’s change this one first, it’s not submit but it’s button. Then if we come over to HTML, we’re going to get rid of div class=”clear” and we’re going to get rid of the closing div by this input. We’re going to get rid of this class = “clear” and now we have all of those things inside of the same div, to make things a little bit easier.

Then the field input and then the only response that matters is that one. Okay, so input type=”image” class.button. The reason why we don’t see that anymore is because we do need to clear the div once we get past the form. There was one of those clearing divs I should have kept but what I’m going to do instead is just add a new div, div style=”clear:both;” okay that looks right.

So we’ve got our image in place, we’ve got a name in an email and now we need to style our Submit button and then we need to add a couple of additional styles here to this.

0 Comments… add one
0 comments… add one

Leave a Comment