We just added a widgetized two column Feature Box to the front page in Thesis 2.3. In the left column we added a slider but the right hand column is empty and we need to put in an email optin form. But first we have to add the box for that.
Add the AWeber Box
The way you install a box is to come over to Thesis and Manage Boxes. Then choose Upload a New Box. I am going to be uploading the AWeber Box. This is one of the boxes that is available to you on DIY Themes. Hit upload.
Add Authorization Code
Let’s save the box. Now up under Boxes Menu we have an AWeber box to work with. I need to get my authorization code before I can do anything. I’ll add that code and connect to AWeber. Now that I’ve connected, I get a whole different screen.
Choose the Email List
I can choose the email list I want people to go to. I’ll send them to my BYOB Facebook list. If I want them to go to a Thank You page, I can pick a Thank You page. But I’m just going to send them back to the Home page for the purposes of this demonstration.
If they are already on the list you can create a Already Subscribed one here.
These are defaults. You can change these on a form by form basis. But now that we save those options, we’ve configured this AWeber box to connect to AWeber and to place people on the correct sign up form.
Add Optin Form to the Feature Box
So now all we have to do is come back over to our Skin Editor and back to the Front Page. Open up the Feature Box columns and we are going to put it in the right column. Then add the AWeber box and we’ll call this Feature Box Optin.
Add Required Fields
We are going to require the name field and that’s it. We might come back to that.
And then this is one of those boxes that has a tray. So if you open up the tray you can see there is this Name Input and we’ll put that up there. So you’ve got name, email and submit button. For the Name Input we are going to show the label, and name is fine. For the Email Input we are going to show the label.
What Are the Labels for?
If people come to your site with visual disabilities the label is there so that a screen reader can tell them what the form fields are. So if you care about that, leave the labels showing.
Change Button Text
Then we are going to change what the submit button says. Instead we are going to say “Send me Coupons”. Now we can Shift+Drag that over to the Feature Box right column. Let’s save our template and come back over and reload it. You’ll see we’ve got something there.
Add Form Options in Skin Content
Now we want more than just that there. We can do the rest of the information that we want to add in Skin Content. Let’s go there now.
Now we’ve got our Feature Box Optin here. Again, we can choose the list name if we wish. If this is supposed to follow an AWeber form that’s already created you could put the form ID in here. If you were doing some ad tracking, you can do that.
The title here is “Get Coupons For Big Discounts”. “We’ll send you coupons for big discounts on food and beverages each week”. The assurance here will be “we respect your privacy”. Let’s save our options.
Customize the Text on the Form
I think that we do want to change some of this because the text isn’t really big enough. We’ll use this kind of a headline and the way to do that is to give it a class. I think the class is widget title. We can check in the widgets. Yes, it’s widget underscore title. Add that up here.
This is p class widget title so that’s getting its style from Sidebar widget title. If you don’t know how to use Inspect Element, watch the Introduction to HTML for WordPress & Thesis 2.1 Users – Part 2 – Tools of the Trade.
So we can come back over to the Skin Editor, Front Page, Feature Box columns. In the right column in our optin box we’ll add widget underscore title in the form title. Let’s take a look at it again. Flush the cache and now you can see it.
And that fits pretty well in that space. We are going to work on styling it coming up in a few minutes but right now we just want to get the sign up form in. I really don’t like the way the background there is green so we’re going to get rid of that.
But that’s the widgetized Feature Box and the Email Optin Box. When we check its responsiveness you can see that it stacks nicely just like you would expect it to. That’s because first we wrapped it a box called columns and then the left column was given the class of content and the right content was given the class of sidebar.
Since we followed the structural elements of Classic Responsive we were able to get the responsive behavior we wanted.