5.c Layouts And Styles Ninja Forms Add-ons

Video Summary

Alright guys, so I just want to show you that you have the file uploads at the layout and styles, the multi or multi part forms and the save progress. But what I’m going to do is I’m just going to do these one by one we’ll add them on so you just kind of just don’t get too distracted. So I’m gonna do is I’m going to click on file uploads, multipart forms and save progress. What I’m gonna do is I’m just going to click Deactivate and click Apply. And so that way I know they’re installed and all I have to do is I’ll come back in and go part by part and just activate these ones as we go. So and actually, what I’m gonna do too, is I’m gonna actually click the Activate for layout and style so you actually see the power of what what is happening with our forms. So let’s go to dashboard and let’s go to contact me. 

And what is happening now is we can drag and drop the stuff here and here but we can’t go sideways. So for instance, like if I want first name and last name, I, I’ll have to actually put this all on one line. So if you go over to here and we go to the file, let’s just refresh this page because we were we were here earlier. But but let’s just say you have first name, last name, email, phone number, you know, we want to create this form of as compact and as short as possible. So we’re not taking up too much space because just like if this was our site, look how much empty space is right? Here. Right? So what we’re gonna do is we’ll come back here to our form builder, or what we’re going to do actually, let’s go to unfortunately, let’s let’s just exit out of here for now. 

Now when we’re in this dashboard, now I can click on contact me or back in here, and now when you see we hover we got like the section kind of like railroad here. So now if I click and drag I can I get these blue lines over to the sides. Now I can potentially come over here and click Email. And now we have this here. So let’s just click on this so we make this look okay as we go. 

All right, let’s click out of it now. Click Done. Okay. There was just a space right there. That’s why it was happening. But now we’re able to set that up. But let’s just say we don’t want. We don’t want this divider but we want the email right here. What we can do is you can actually leave this the space blank but we could come here and put plus and the last name and drag that right there. And if you want to you can even put three rows as long as you see that go green. Now you have that. Right. Well, I think that just looks weird. Let’s put this back. And we’ll just click Delete. Column. 

Now the other cool thing about this as well, is that say if we click on email, we get this also we get this display of styles. So instead of messing say if we’re here and we wanted to say change the colors of all this stuff, we can go to inspect you know and we could target maybe this this button right here we get this background and now we could potentially say we want to read you know like a go into CSS customizer right but if you didn’t want to do that, that makes it a little bit easier for you to say, you know, what was like maybe put the border color as purple. Maybe make this padding say 20 pixels with we’ll say 2% I’m just rendering really bad styles right now. Right so like this is the wrap like the like outside of your, your form, your label styles, your elements styles, you can set all that up here. So let’s just click done for now. And you can do that for all these different things.

This section is super small. So you get the idea that you can set up your different styles for all these different things. So what I’m going to do on instead of this, I didn’t put border width so if I put border width let’s say let’s say I’m gonna do 10 pixels, because that’s gonna be super bad. That’s gonna be really ugly looking. But at least you’ll be able to see what you can do. 

But I’m not gonna go back you get the idea. You can set up your styles through here. Alright, so that’s the the layouts and the styles and more times than not, I prefer to just style everything through CSS, but you know, just because I don’t want to have to bounce back and forth between here and here and just, you know, publishing there refreshing. I think it’s just easier for me to go into the customizer and set things up that way. But you do have that option. I just like the layouts and styles. I can just come here and just set up and grid out my contact form. I need to. So that’s how you set up layouts and styles. So I’m gonna this video here and we’ll go into the next.

PHP Code Snippets Powered By : XYZScripts.com