How To Create A Get Response Horizontal Opt In Form For WordPress
Articles Blog

How To Create A Get Response Horizontal Opt In Form For WordPress

August 9, 2019

Hello its Neil Ball from,
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, until next time, goodbye.

Leave a Reply

Your email address will not be published. Required fields are marked *