Hello its Neil Ball your online MarketingCoach from WorkWithNeilBall.


I am going to look at how to create an Aweber HorizontalOptin Form for a WordPress Blog today and I am going to run through how you can setup a horizontal form like the one I have created here, using the supply templates that areavailable in Aweber.

What you will find in Aweber is that all of the templates that youget in Aweber are all the designs.

They are all a vertical design where they run verticallydown the page and sometimes it is nice to be able to create a page where using a horizontaldesign like you are seeing on the screen here.

This is one that I have put together fairlyquickly but you get the idea that sometimes it is quite nice to have this format ratherthan stuck with the vertical format or the templates that are supplied by Aweber.

So,what I have done to demonstrate this is, I have another version of this page withoutthe Optin Form.

So, the first part of this is to put the code on the page.

Or to putthe code from Aweber onto the WordPress Blog to create the Optin Form which will show youhow this starts off, and how it ends up developing as it has adjusted.

Just looking at this OptinForm that I have created, it is a fairly straightforward Optin Form, I haven't bothered putting thename on here, so you've got the header, you have got the actual Optin Box where you putthe email address and I have also opted to put my own button here.

Now that button, isvery easy to do, when you are actually setting this up with Aweber, all you need to do isgo into the Submit button and then go into advanced options and paste the location ofyour button image and it will use your own button image rather than using or the submitbutton rather than using the supplied ones by Aweber.

Now, once that is done, the otherthing that you need to do is, you also need to look at the width of the total form.

Sowhen you are in the Option Form Type, there is a width here.

Now this setting will varydepending on the width of your page.

But with Aweber, when you are doing this, you willfind that this does affect how wide the Optin Form is on your page.

I have done anothervideo for Get Response that shows you how to do this with Get Response.

So with GetResponse, it has a different layout on the page, but on here, it actually is important,so, you need to set this fairly wide so it will allow you to move the content aroundon the screen to give you the horizontal design.

So once, you have set up the raw templateof the information you have got what you want on your Optin Form, the next thing you needto do, is go to Publish and once you are in Publish, if you go to, I will Install My OwnForm, you need to take the JavaScript from here and copy it.

If you come to the page andgo on the WordPress Blog and paste that at the bottom or whatever location you want toon your page, on the text up here and click on Date, and now it has done that.

If I takethis page here, which did not have the Optin Box, it will now have and Optin Box on thepage you can see the location of this is all over the place and now what you need to dois, you need to adjust the CSS, to move the positions of these around.

Now, the processof doing this does vary, from one WordPress theme to another.

And depending on the themethat you have got, will depend upon how you proceed from this point.

To move these boxesaround, you need to edit the CSS within the theme of your WordPress Blog.

Now, to determinewhich files you need to edit, the easiest way to look at this is, if you right clickand look at Page Source, then if you look at the page, you will a bit that says StyleSheet here within the actual header.

What you need to do is, you need to look at where theStyle Sheet is actually located, so on this particular website, it is actually locatedon Optimised Press in Typography.


Now you will notice underneath there, there isanother location.

On this particular website, I know that it is this file that I need tobe adjusting.

You might not know which one it is, but at least if you have got two ofthem, you could narrow it down to the probable location.

The best way to do this is to createyour page.

To create your page and go on to right click as I have just shown you thereand then look at the location of the Style Sheets and that location there on this particulartheme is for Optimized Press.

A lot of themes will actually use the Style.

CSS location,so if you see on this website, the location of the Style Sheet as you can see here isactually in Style.


So to get at this, what you need to do now is, go back into theadministrative area of your WordPress site.

If you go to the Appearance Tab and go toEditor, then it will bring you on this page.

Now, this by default will actually come tothe Style.


So if when you have checked for the location of the file, you have checkedfor the location of the file you need to change, it happens to be that you need to adjust theStyle.

CSS file, then this will be the file that you work with.

Now for me, the locationon the Optimize Press Site as I showed you before is actually Typography.

CSS, so if Ijust copy that and come back to there, and then I do a search with Control F, and itwill actually find the file.

It is quite a way down the page on this one, they are inalphabetical order, so it is not too difficult to find them, so open up the file.

If yoursite uses the Style.

CSS file, you would open up that file, whereas for me, I would openup this file because I am using Optimise Press.

You need to scroll to the bottom and openup a little bit of space.

Now I have got some code which I will actually provide for you,which needs to be added to the page like that, this code you can actually access this codeby clicking the link at the side of the screen or underneath the screen, depending on whichvideo site this is on.

And that will take you to my website where you will find thiscode so that you can easily copy and paste it rather than trying to type it out and possiblymaking a mistake and making things more difficult.

So once that code has been pasted into there,if you update the file, like that.

And we then go back to this page here, what you willsee now in a minute, if I refresh this page, you will see that these boxes move slightly,not a huge amount at this moment in time, but they may well change position.

As youcan see, so now what we need to do is the code that we just put into the Style Sheetis actually going to change the location of the title, the email box and also the submitbutton.

So what we need to do is, if we go back into here now, I have gone back intoTypography.


The objective now is to change the information in here, so the first thingthat you are going to have to do is found out the form ID from Aweber, now you willfind that by going to Aweber and if you look at your code for Aweber, you will see thatis actually the Form ID, and if you take that code and paste it into, this code that I havegiven you, you will need to put it there, there and there, there, there and there.

Soall of those locations there have that code in and once that is done, you obviously clickupdate file, and the next thing that needs to happen is that the location of elementson the screen here need to be changed.

So to do that you have got adjustments in herewhich will allow you to change the vertical and horizontal locations of these boxes onthe screen and that is done by you adjusting margin left and also margin top.

So if we takemargin left for example, so one other thing, here for example, you have got the header,this one adjusts the header, this one adjusts the box itself, the actual Optin Box itself,and this one adjusts the submit button, as you can vaguely see from the descriptionsthat are on here that it does give you a clue as to what they do.

So the first thing thatwe need to do is go at the margin left.

If we adjust the margin left first of all, forthis one here, first of all I would like to move this one over a little bit so what Iam going to do is I am going to put in a value on here for margin left, and I am going tochange that to 30 now I know that works quite well because I have done it before.

What Iwill do now is I will show you how it changes on the screen once it is saved, you will seeit move over slightly.

It was approximately here before and now it has moved over to there.

So what I want to do is move this box up, so if you go back to the code, to move thebox up, what you need to do is, you need to use margin top, now margin top is currentlyset to zero.

To move it up you are going to have to go in to negative numbers to moveit up.

So for me to move it up, now, I have actually got this here, I need to go minus65.

The location and the adjustments that you will make on these will vary.

Your sightwill probably be different to mine because you may use different configurations on differentthings, so you will probably have to play around with these things to get the desiredoutcome.

Pick a note to where that is now, when I refresh the screen, it should, moveup.

So everything is approximately in line, this button needs to be moved down slightly.

So the next thing is to space things across here, so what I am going to do is if I putmy settings in for these, you will be able to see very quickly, what I am going to dois, I am going to copy my settings here and paste them here because it is quicker.

WhatI have done here is, the settings that I have copied and pasted in, have worked around adjustingthe margin left and the margin top.

By adjusting those settings I have found the best settingto give me the positions I want for this particular page.

Once that is updated, if I refresh thepage, you will see that they will now move, to the positions there.

Now one other thing,I did also in adjusting that code because I also change the width here and that widthvalue there will actually affect the width of this box here where you enter the data,so you want to make sure it is wide enough for most people to put their email detailson without it starting to scroll across the screen because it is more likely they willmake a mistake if they do that.

It is really that simple to do this, once you have donethis, if you use the form on another page you will find that the settings you have sethere will work, for any page you have used but the settings you have set on this pagehere will only work for this particular form for the ID number here so if you create adifferent form and decide that you want a different configuration.

Then you would haveto do that separately, and adjust it accordingly.

To subscribe to my list and receive free tipson internet marketing and making money online, go to www.


Com also for more informationon how I coach and how I teach plus the things that I do for my team go to www.



Untilnext time, goodbye.