To see the page that is used in the video demonstration click Get Response Horizontal Opt In Form
Below is the code used in the video. Substitute 123456 for your GetResponse WID number found in the Java Script
/*
Get Response Horizontal Form CSS For Form ID 123456 EN
*/#WFItem123456 .wf-formTpl {height: 30px!important; }
#WFItem123456 .wf-header { float: left; margin-left: 0px!important; margin-top:0px!important; }
#WFItem123456 .wf-contbox { vertical-align:text-top;!important; width: 200px!important; margin-left:0px!important; margin-top:0px!important;}
#WFItem123456 .wf-submit {margin-left:0px!important; margin-top:-25px!important;}
I Get Paid To Write Posts Like This – Discover How You Can Do The Same
|
| Thank you for visiting my blog. I get paid to write about anything including telling people about new products and also reviewing products. If you would like to know how to do this then Click Here Some people that do this and are making $5000 a month, some are making $10,000 part time and full time. There are even some people making over $100,000 a month with a blog like this. If you would like to join my team then Click Here nowWhen you click the link you will be taken to page where you enter your email address and then you will see a FREE VIDEO that explains how you can do it too. The video that explains how to do it is FREE so Click Here |
|
|
Below is a transcript of the video showing how make a Get Response Horizontal Optin Form for WordPress
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.
Horizontal getresponse opt in form
Horizontal getresponse optin form
Horizontal getresponse form
getresponse Horizontal form
getresponse Horizontal opt in form
getresponse Horizontal optin form
getresponse Horizontal Optin Forms
wordpress horizontal optin form using getresponse
wordpress horizontal opt in form using getresponse
wordpress horizontal optin form with getresponse
wordpress horizontal opt in form with getresponse
getresponse
Horizontal Optin Form
Horizontal Form
wordpress
word press
optimizepress
optimize press
optimize press theme
optin form
opt in form
optimizepress
optimize press
web form
html
css
slim web form slim form
slim optin form
slim opt in form
Get Response
GetResponse