Tip:
Highlight text to annotate it
X
Hello its Neil Ball from WorkWithNeilBall.com, today I am going to demonstrate how to create
a Horizontal Optin Form when using Get Response. You will notice in Get Response, that all
the templates that they provide are all the vertical type, running down the page like
this. Every single one of their templates is like this. Sometimes you will want to create
a squeeze page where you will want to have a Horizontal Optin Form and you can do that
with HTML but the problem with HTML is that it is not as convenient as perhaps using the
JAVA script because there is less code to put on the screen. So what I have done is,
I have actually created a, I have done this by using the JAVA Script that Get Response
supply and editing some of the CSS on the actual website to allow the form to run horizontally
like this. By editing the CSS you are able to change some of these boxes. So I will just
show you how this screen was created. So if you take the page, I have got another version
of this page here and as you can see it hasn't got an Optin Form here and if I go into Get
Response, I have got a form here, which is one which I have just created, which is the
vertical design, it is very plain design. I have put an optional button, my own button
design here, which you can just do by going into Show Advance and pasting your, when you
go into submit button you go into show advance and then paste the URL of your button and
you can actually have your own design of button here. Really that is it, so everything should
be over to the left and I have made it as plain as possible, so I have got a header,
the things I have got on the screen at this moment in time, I have got a header, a box
where you put the email, and I have got a button, so that is pretty much the set up
that I am working with here.If I now go to Publish and grab the JAVA script from here,
and take that and go onto the page and I am actually using Optimize Press on this, I am
using WordPress, so I will talk about that in a minute, because it does seem to work
slightly differently on here. There is the JavaScript on the page, so we will now update
the page. I will just wait for that. We will now open up that page, you can now see that
the Optin Form has appeared here, and unfortunately it has appeared with a vertical design, and
on this page, and if you remember, I said we were going to design a page that was horizontal
like this. So what you need to do now is, once that is set up like that you need to
go into the CSS and edit this. Now depending on your website will depend on how you do
this. On WordPress I have found that that different themes have slight variations on
how you do this. So the first thing that you need to do is really identify where the CSS
is that is going to affect the location of the boxes so you can move them around. So
you can do that by looking at the source code on the page. So if you right click when your
mouse is on the page, and go View Page Source, then what you can do is you can actually look
at the location. You are looking at something called Style Sheet. Now you might find there
are one or two locations. Like on this page here, as I said this is Optimised Press. Now
with Optimize Press the location of the CSS, we need to actually edit is this Typography.CSS.
I have got another site here, where the location of the Style Sheet here is actually in Style.CSS,
so that is obviously slightly different. So when you have done that, just going back to
this page which is my Optimize Press Page, to get to this if you go to Appearance and
Editor, then what you need to do is, on this page, I am working with the Typography.CSS.
So I will just try and see if I can get that without the speech mark round the edge. So
if you just copy that, I find that this is the easiest way. If you go into this page
and press Control F and paste the name of the file that you are looking at, and then
scroll down and there you are. Now as I have said, if you are not using Optimize Press,
the chances are it is not going to be this file it will probably be the one that is on
the other page. It will probably be just the Style.CSS but the process is exactly the same.
Once you have got on to here, if you scroll down to the bottom, what you need to do is
open up a little bit of a gap, and then I have got some code, which you need to add
and then on to the bottom here and paste that in. Now, what you need to do here is, this
code, has this number here and here, well actually this is just my note on it, it is
actually we that doesn't matter so it is good practise to keep a track of the FormID from
GetResponse so you know which code is being used for each of your forms so you don't lose
track of where you are up to so rather than copying this code on the screen, here which
I have pasted into here, which is obviously prone to making a mistake. If you click the
link at the side of the screen, then it will take you to my website and I will have that
code on the page so you can copy and paste it and put it on your site. So, if you now
go into here and look at GetResponse and look at the WID = that number there is the number
here. You need to make sure that number is there and there and there and there. So all
of those lines, plus there have to have that. Once you have done that, you click Update
file, like that. If we now go back to this page, there it is. If I refresh this page,
it has made some difference, so what has happened now is that code has actually begun to affect
the location of these boxes. Now what you do now is, if you go into here, you will see
that you have got a left margin and you can adjust the left margin. And the top margin,
for each of the elements that is on the page. So you have got the title, you have got the
input box, and you have got the button and if you look at the code you will see, this
top one, you don't need to change I don't think, but you have got three here. You have
got the Content Box, I think they call it where you enter your Email Address and then
you have got the Submit which is the Submit Button. So what needs to happen now is, if
I just go back to this page, and look at what we need to do. So everything is relative,
so the position of this will influence the position of this. So what that means is the
first thing you need to do is get the position of this one right, and once you have got that
right you need to start moving this one around, and then start moving this one around. So
I am fairly happy with that position on that, so I am going to go for the Input Box here
on that or the Content Box as it seems to be called on that. So if we go here, and what
we need to do is, we need to change the position of the alignment on this, so at present the
Margin Left setting here is set at zero. So if I change that to 200 and go Update File,
and then refresh, you will see it has now moved over. So it needs to move over more
but you will see it is relative so what that means is that these two, the position of this
is relative to the position of this so because that one has moved, this one has moved with
it. So the best plan is to work sequentially through them so to move that one over a little
bit more. So what I am going to do now is I am going to add a little bit more to that
and call it 290. Now I happen to know that that is going to be the position I want it
in because I have done it before so if you have never done this before you will find
that this is slightly different on your theme to this theme, so depending on the width of
this text. So this may also affect this, so once you have done this, I now want to move
this up.So to move this up, if you use Margin Top you can change the position here again
now, zero is the level it is at, so to move it up so if I go -20 and go update file you
will see in a moment that will move up slightly, that is not going to move up enough, so just
changing this again so we change that one to -95 I have got a feeling I have to change another
number in a second, no that is fine, so you can see now that everything is in line, as
everything is relative, so I just need to move everything over to the right, so to do
that you need to go to the bottom here which is the WF-Submit and you need to go Margin
Left and what I will do is I will put the number straight in because I know what it
is, so I am going to put 290 on there. So if I update the file and go to here, I am
just waiting for it to update, there it is, so now if I refresh. That button should move
all the way across and you can still play around with these a little bit and pull them
together until you are happy with it. Now what I have found with the Optimize Press
Theme is that the width of this box, you adjust and get a response. So in the design you can
actually drag the width of this by re-size so to be wider or narrower you can actually
adjust the same width as it says enter your email here, and then I save the Web Form and
now come back to here and refresh or go narrower. You can actually adjust it and that is the
beauty of using the Java Script, is that you don't need to change any of the code on the
screen. The position of these will obviously vary as you change some of this information
so you need to be careful so it is much neater than having the HTMO on the page so that is
pretty much how you do it so if you were doing this with most other themes, as I said before
you would need to adjust the Style.CSS file, which is that there. Which will do exactly
the same as I showed you before, when you come into here, you will find that the Style.CSS
is again, if you just go Control.Style.CSS there you go, it is at the top of the styles
usually, so that one there is the one that you would adjust on a lot of themes, but for
Optimize Press it doesn't seem to work like that so you need to do what I showed you before.
To save you typing out this code if you go to my website and you can get to it by clicking
the link underneath or at the side of this video, depending on what site you are seeing
it on, you will be able to see and copy and paste this code from the page on my website.
For more information on how I coach and how I train go to www.WorkWithNeilBall.com, until next
time, goodbye.