Build Your Own Business Website header image

How to Create a Feature Box with Graphics, Text and an AWeber Form in Thesis 2

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.

Part 1 – Create the AWeber Opt-in Form

Rick: Good morning, Phil. I just unmuted your microphone.

Phil: Good. First off, I’m brand new to your BYOB Website membership site just this week so… first webinar and beyond. But my question is regarding opt in forms. I’ve got a client basically who’s quite exacting on what he’s after and that he wants a website that’s based around capturing emails every possible opportunity. And he’s given me some examples to work from.

So the question is, what we’re trying to do is get a feature box on the main page, large feature box with graphics in it and some text. But also AWeber fields built into that and that feature box. And obviously, WordPress and Thesis are very good at lining things up next to each other and lying things up on top of each other and things like that. But actually getting fields on to other fields is what I’m struggling with. And I was wondering if you could help me with that.

Deconstructing the Layout in the Feature Box

Rick: Yes and so what I’m going to demonstrate is this. So we have a big image and over the top of that image, we’re going to put an AWeber first name, an AWeber email and then the submit button. That’s actually what we’re going to do next and in order to accomplish that, what you really do is to start off with an image like this, without those things in it.

And so then those things become the background and I have saved these images. I also created a submit button from that so that we can have a separate image as our submit button. And I’m just going to do that here.

Create the Form

So we’ll start off at AWeber and we’re going to create a new form. And we’re going to create an extremely simple form. It’s just going to be name and email and in terms of our form style, what we’re going to do is look for more styles. And I want to find the really basic one.

So there’s my generic registration form. And I’m just going to keep it like that. We’re going to save that web form and then once it’s saved, we’re going to go over to two. And this is already set up so we’ll go on to… let’s see, show Advanced Settings.

Install AWeber Opt-in Form in a Text Box

We’ll go on to Step 3 and I will install my form on the Front Page of my Thesis 2 site. We’ll look at the raw HTML version and uncheck include beautiful form styles because we want the basic unformatted form. Okay, I still have too much formatting here. We’re going to go ahead and copy this stuff anyway. Copy that, come back over to our site and I’m going to create a text box.

Actually, I’m not going to do that yet. I’m going to come over to my manager in Thesis 2 and create a backup of this first.

Add the Opt-in Form to my Front Page

And then come back to the HTML. Now I’m going to start a textbox… opt in form and drag that up to the… oh, I’m in the wrong spot because it’s not on my homepage. It’s actually on my front page that I’m going to put this.

So I’ve got this feature box area, feature box columns, feature box. And then I’m just going to drag the feature box widget area out and then I’m going to drag that opt in form in.

Add Options to the Text Box

I’m going to disable automatic P tags. I want it to be a div tag. I’m going to give it an ID of opt in. Paste all that code in there. Let’s see, then I’m going to get rid of all of the style related code. Yeah, all of the style related code, we’re just going to delete.

Edit Submit Button Code

So now we’ve just got our basic opt in form code and then I’m just going to take a look at my submit. And I’m going to change the type equals submit to type equals image. And I’m going to take the value out so the value is blank. Well actually, I’m not going to do that. I’ll leave the value in place for the moment so that we can actually see it. But ultimately, I’m going to end up removing that.

Remove Unwanted Code

And I think I’m going to get rid of this privacy policy thing and the powered by thing. So we’ll just delete that. So I should only have those parts of this that I want. I’m going to save my template. Okay and right now, I’ve got name and email.

Review Opt-in Form on our Site

Now I think, in fact, I want to change name and email so that name and email are inside there. So we’ll come back over here to the opt in form and value equals. And I’m going to put name in there although we’re going to get rid of the label here. So value is going to equal name and let’s see… we’ll delete the label.

And then we’ll do the same thing again here with email, value equals email and we will delete that label. Okay so now I think we’ve got a simple enough form. Let’s try it again. Okay, there we go.

1 Comment… add one
1 comment… add one
  • Michael Johnson May 24, 2013, 6:59 am

    What is the best way to get that image? I do not have photoshop and I have no experience with it. Is this an Elance or Odesk type of project?