Hello, I’m going to look at how to create a Weber horizontal opium form um for WordPress blog today, and I’m going to run through how you can set up a horizontal form like the one I’ve created here. Um using the supplied templates that are available with in a Weber um now what you’ll find in a Weber is that all of the uh, the templates that you get in a web are all the designs they’re all a vertical design where they run vertically down the page And sometimes it’s nice to be able to create a page where you’re actually using a horizontal design like you’re, seeing on the screen here um.
This is one that I put together fairly quickly, but you get the idea that sometimes it’s quite nice just to have this. This this format, rather than been stuck with the vertical format of all the templates that are supplied by a Weber, so what I’ve done to demonstrate this is I’ve created another version of this page here without the opting form. So, the first part of this is to put the code on the page or to put the code from a Weber onto the uh, WordPress blog to create the open form um, which will show you uh um how this actually um?
How this starts off and how it ends up developing, as it’s adjusted just looking at this open form that I’ve created it’s a fairly straightforward, open form I haven’t bothered putting the name on here, so you’ve got you’ve got. The header. You’ve got the op, the actual box, where you put the email address, and I’ve also opted to put my own um my own button here, um now. That button is it’s very easy to do when you’re actually setting this up with a Weber. All you need to do is go to the submit button and then just go into advanced options and paste the location of your uh, your button image, and it will use your own button image rather than using uh the or the submit button rather than using the pre-Supi, the supplied ones by a Weber, now, once that’s done uh.
The other thing that you need to do is you also need to look at the width of the total form so when, when you’re, when you’re in the option for form type, there’s a width here now, this setting will vary depending on the width of your Page, but on with a Weber, when you’re doing this you’ll find that this does affect how wide your page, how wide the open form is on your page. I’ve done another video for get response. That shows you how to do this with get response and with get response. It has a different effect on the on the actual layout of the page, but on here it’s this is actually important. So, you need to set this fairly wide to allow you to stretch to move the Box. The content around on the screen to give you the horizontal design so once you’ve set up a raw template of the of the information that you got you want to have on your open form.
The next thing you need to do is go to publish and just save that and once you’re in publish, if you go to, I will install my own form, and you need to take the JavaScript from here and copy it. And if you come to the then come to the page, go on to WordPress blog and go into and paste that at the bottom or whatever location you want it on your page um on the text, tab here and click update, and now it’s done That, if I not take this page here, which didn’t have the open box, it’ll now have an open box on the page, but, as you can see, the location of all of this is all over the place. And now what you need to do is you need to adjust the CSS to move the positions of these around now.
The process of doing this does vary from one WordPress theme to another and, depending on the theme that you’ve got, will depend how you actually proceed from this point, to move these boxes around. What you need to do is you need to actually edit the CSS on within the um Within in the theme of your WordPress blog now to determine which files you need to edit. The the easiest way to look at this is to if you right, click and view page Source. Then, if you look on the page, you’ll see a bit that says stylesheet here within the actual header um and what you need to do is you need to look at where the stylesheet is located.
So, on this on this particular website, it’s opted it’s actually located in optimized press in typography do CSS now you’ll notice, underneath there there’s a there’s another location and on this particular website. I know that it is actually this file that I need to be adjusting, but you might not know which one it is, but at least, if you’ve got two of them, you can you can narrow it down to the Poss, the probable location, so the best way To do this is to is to create your page and once you’ve created your page to then go onto the page and right click like I’ve. Just showed you there and then look at the location of the stylesheets. And if you were on a lot, that location there on this particular theme is for optimize press.
A lot of themes will actually use um. We use the style.CSS location, so if you see on this website, um the location of the stylesheet, as you can see here, um is actually in style CSS. So, to get at this, what you need to do now is you need to go back onto um onto you into the um administer administrative area of uh, your WordPress site. And if you go to the appearance, Tab and go to editor, then it will bring you on this page now. This by default will actually come to the style CSS. So, if, when you’ve checked for the location of the file, you need to change it, it happens to be that you need to adjust the style.CSS file, then this would be the file that you work with now. For me, the location on the optimized press site, as I said, as I showed you before, is actually typography do CSS.
So, if I take type, if I, if I just copy that and come back to where is it to there and then I do a search with control, f and it’ll actually find the file. So, it’s quite a way down the page on this particular one. I mean they are in alphabetical order, so it’s not too difficult to find them, but if so, you need to open up the file. So, if your, if your site uses the style.CSS file, then you would open up that file, whereas for me I’m opening up this file because I’m using optimized press, and you need to scroll to the bottom and open up a little bit of space. Now I’ve got some code that I will actually provide for you, um, which needs to be added to the page.
Like that, this code, you can actually you can actually access this code by clicking the link at the side of the screen or underneath the screen, depending on which video site this is on and, and that will take you to my website, where you’ll actually find this Code, so that you can easily copy and paste it rather than trying to type it out and possibly making a mistake and making things more difficult. So once that code’s been pasted into there, if you update the file like that, just wait for it to update and we then go back to this page here.
What you’ll see now is in a minute when I refresh this page, you’ll, see that these boxes will probably move slightly, not a huge amount at this moment intime, but they may will change position like that, as you can see so now. What we need to do is the code that you’ve just put into the stylesheet is actually is actually going to change the location of the title, The email, uh box and also the submit button. So, what you need to do is if we go back into here now, back into I’ve gone back into typography doss. The objective now is to is to move is, is to is to change the information in here. So, the first thing that you’re going to have to do is find out the form ID from a Weber now you’ll find that by going to a Weber and if you look at your code for a Weber, you’ll, see this code.
Here is actually the form ID and if you take that code and then paste it into you into this code that I’ve given you, you need to put it there, there and there. So, all of those all of those locations have this code in and once that’s done, then you obviously click update file, and the next thing that needs to happen is the location of the um, the location of the of of the um, the various inform the elements on the screen here need to be changed, so to do that. You’ve got adjustments in here which will allow you to change the vertical and horizontal locations of these boxes on the screen, and that’s done by margin You by adjusting margin, left and also margin top. So, if we take margin left, for example, you so each of just one other thing here is you’ve – got you’ve actually got the header.
This one adjusts the header, this one adjusts the actual um the body or the Box itself, the actual um open box itself, and this one adjusts the submit button. You can sort of vaguely see from the descriptions that that are on here, that it does sort of give you a clue as to what they do. So. The first thing we need to do is go at the margin left and if we, if we adjust the margin left first of all for uh this one here, what I’d like to do is probably move this over a little bit. So what I’m going to do is I’m going to put in a value on here for margin left I’m going to change that to 30. Now I know that that works quite well, because I’ve done it before me. What I’ll do now is I’ll?
Show you how it changes on the screen once that’s saved, you’ll see It’ll move over slightly.
As you see it’s moved. It was approximately here before and it’s moved over to there. So the next thing I want to do is I want to move this box up and if you go back to the code to move the Box up, what what you need to do is you margin top now margin top currently is. Actually, it’s actually set to zero to to move it up, you’re going to have to go that in in negative numbers to move it up. So for me to move that up now. I’Ve actually got this here um I need to go minus 65. The location and the adjustments that you make on these will probably vary from s from your site will probably be different to mine, because you, you may use different configurations on different things.
So, you’ll just have to play around with these numbers to get the desired outcome. But if you take a note of approximately where that is now when I refresh the screen you’ll see, it should move up like that. So the next thing so everything’s approximately in line. I think I think this button needs to be moved down slightly, so the next thing is just to space things across here. So what I’m going to do is, if I just put my settings in uh, for these you’ll you’ll be able to see very quickly how I’ve done it. In fact, what I’m going to do is I’m going to copy my settings in here and paste them here, because it’s just quicker, but what I’ve actually done is the settings. I’ve just copied and pasted in have worked around adjusting the margin left and the margin top and move by adjusting those settings.
I’ve been able to find the best setting to give me the positions that I want for this particular page. So once that’s updated, if I now refresh the page, you’ll see that those will now move to to the positions there now. One other thing that I did also in adjusting that code was, I also changed the width here and that width value there will actually affect the width of this box here where you actually enter the data. So, you want to make sure that there wide enough for most people to be able to put their email details in without it starting to scroll across the screen, because it’s more likely they’ll make a mistake if they do that, and that is it’s really that simple.
It’s! It’s quite straightforward to do this, and once you’ve done this, you, if you use the form on another page, you’ll, probably find that the code, the settings that you’ve set here will work on any.
TokMate Launch Phase 2 / Weekend
https://jvz2.com/c/1399091/411066/
https://ebookfusionai.com/view_flipbook/ai_flipbook_view/MTM%3D
Discover more from Making Money Is Easy
Subscribe to get the latest posts sent to your email.
![[Explore 20241104] Colors of autumn](https://i0.wp.com/live.staticflickr.com/65535/54116799494_01eed0bc05_m.jpg?w=640&ssl=1 "[Explore 20241104] Colors of autumn")
