How To Create a Pop-up Form With Bootstrap 4 | Robin Haney | Skillshare

How To Create a Pop-up Form With Bootstrap 4

Robin Haney, Web Developer and Online Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (23m)
    • 1. Introductory

      0:20
    • 2. How to Install Bootstrap 4

      4:20
    • 3. How To Install The Modal Component

      4:18
    • 4. Building Our Form

      8:02
    • 5. Finishing Up Our Pop up Form

      6:22

About This Class

In this short mini-course you are going to learn how to use the very popular Bootstrap 4 framework to create a simple pop-up form, something like an e-mail sign-up form. By the end of this course you will be able to confidently create and build your own forms using Bootstrap 4

Transcripts

1. Introductory: Hi. My name is Robert. And in the short course, I'm gonna show you how to create a simple pop up form using the boot shop for framework. This course you're taking no longer than 10 defend 15 minutes to get through, and at the end, you will be able to comfortably work with forms and form creation and bootstrap for 2. How to Install Bootstrap 4: So the very first thing we need to do before we can start even working with Bootstrap is actually installed Bootstrap for onto our computer and creator webpage. So the first thing I'm going to do is go to the boot, Shep for website here. We're gonna typed into Google, and it's gonna be this first result here. And this brings us to the documentation of bootstrap for and this is we're gonna find all the information for bootstrap. As long as that info need to actually install it. Now, we're gonna use the easiest way to install bootstrap force, so we don't have the download. Nothing on our computer. All we have to do is copy the starter templates. In the documentation here, this tower template will have links to a cdn, which is basically a website online that will link all of our style sheets and everything for for bootstrap force. So we don't have to install nothing. All we have to do is make sure that this code here is in her file. So let's copy all of this, Gonna copy it over here, and we're gonna have to make a new file for a website. So I'm just gonna go into my folder here and in here. This empty spot here advise you to make a folder as well so you can store your website fouls. Let's create a new text file going to then save this text file as index dot html so we know it's the index over website. All right, so we can close our no pad and then I'm going to delete our old no pet file since we have our new HTML file here, so I can open up our HTML file by right clicking and getting at it with no pet plus. Plus, you can open it with with whatever text editor you are using. Now again, I'm just gonna copy this again and then paste it into our file and we can see here that we're linking through the boot steps he assessed, as well as J query and we have are made of information. So let's just save this up and we'll test it and see and make sure everything is working. We can see here that the bootstrap CSS styles are being applied to our default each one element here. So that's good. Are bootstrap. Four is installed and working correctly in our starter templates. Now, for this mini course, you're on creating a popular form of bootstrap four. We're going to use one of the example websites that boost up for has for us. So we go to the example of section of the framework we can see here that there's different examples of websites and different things we can use here. And I'm just gonna quickly look for one that we can use. And I think we're going to use one of the knave bar sections here since there they have a nice little button here, we can click on them. And that's where we gonna create the basic basis of her puppet form. Yeah, let's use a nap. Are so we're just gonna click on this page here, The one we want, which is anyone? Really? And here we have the webpage and we can actually copy this by going right click go view page source. And what we're gonna do here is going to look for the Web's going to look for the body section of this page. You see the body here, and we're gonna copy all the code in the body here. We just want the code in the body. So again, we'll copy this Here, go back to our own file, find the body section here in our file, and I mean, delete th one we have. And then I'm gonna piece in the new code here, and it's quite a bit of cold, but it's not too bad once you kind of work with it. And what not going to indented a little bit. Ah, Looks like it's already indented pretty good. So if we save this file up here, what we should happen is we should get a file similar to the web page we just viewed. And again we can see. Here are our websites. Pre similar is a little bit of custom CSS that we could have added, But we're just gonna leave it like this because for our example, here it's gonna work pretty good. So this is our webpage you're gonna be working with. And what we're gonna do is when people click on this blue button here, we're gonna make our foreign pop up. But we're going to start doing that in the next section of the course. So I'll see you in the next video 3. How To Install The Modal Component: All right, everybody, welcome back to the course, so we can see here. We have our website showing here, and what's happening here is we want this button here, this blue button that when you click on it, you wanted to go to art form. But right now that's not working. And we're gonna use a motile component in bootstrap forward to actually help us do this. So let's go back to the documentation. And I think it's under components here. And, uh, yeah, Moto. We can see the mortal component here. What the Moto component is. It's basically like a pop up box that kind of goes on your screen, and we can see it here, a static example. But here's a live demo. If we click this button here, we can see that a model box pops up here. This is what we're going to do for our website, and this is what our farm is gonna be in. So let's go a little bit down and check out the different virgins. You can have a large one and a small motor box, pretty cool, and we can use the yeah, we can also use the grid system here using these classes, we can re lane realign the tax and different features of our form as well. Um, but what I'm gonna do is I'm just gonna grab the basic one here in this demo here. And I'm gonna copy everything in here. Click copy. Going to go back to our website, and at the end here, you can actually piece the mortal code anywhere you want. But I'm just gonna go paste it at the end of our documents with a little bit organized. And I'm going to actually get rid of this button trigger model because we don't actually need that here. And I'm actually gonna show us how you can, like, hook a moto upto any button so we can actually get rid of this whole section here for now. All right, so we have our model here, and next up we need to do is need to hook up a hookup or button here, A primary button, our view? Nah, far button. And hook it up to our models that when people click on it, it works. So I'm gonna delete this link here because we don't want it to link to anything and Now we just have this basic texture and we need to go back into the bootstrap documentation so we can see here. We have a data toggle moto here in a data target, which gives the value of the I. D of our button. So these are the two values we need to really pay attention to this data toggle we're gonna copy this year. We're gonna add it to her button. What this is going to do is it's going to make it so that this button is gonna be associated with our model. So when people click on, it's gonna activate a model. But now we need to do is actually declare what more than what's gonna be. And we use that with the data target. So what we can do is we can copy our data target here and again pieces after our data Tuggle. And now what this does is you'll see that we have this idea here for the data target. If we go to our model, you get to hear that the idea is my mortal. You see how they both match? This is what what is doing its selecting this model and it's a sign in it with the button when we click on it. So those two values need to work correctly or else your model isn't going to work with your button. So again, we'll save the soul up, go back to our webpage, refresh it and then we click this button. We can see that our mortal now pops up pretty cool. So everything is working pretty good so far. And I think we're, um everything's pretty good at this point. The last thing we're going to do here, over the quickly though it is, I'm gonna show you how we can actually get the content inside of all mortal. But so I'm gonna go to the H four class inside out mortal, and I'm going to write some some of my own texture. I'm gonna say, Grab your free Web development course or something like that, since we're what we're gonna do is we're gonna create a form that's gonna kind of get people to subscribe to an email list, and in order to do so, they're going to get a free course. So let's do something like this, which will allow them to pick their Of course they want. And if we say the H four again, refresh the page and safe we can see here that are text appears changed. That's you edit content inside your moral component. It's actually quite easy to do. In the next video, we're going to start building our form inside of a mortal component. 4. Building Our Form: So let's quickly recap what we've done so far with a website here we can see here that we have Our website looks pretty good. We got Bruce trip for installed. If we click on our button here, you see that our foreign pops up. Now we actually have to add some components in some different things to our form to kind of make it work, right? So what we need to do is we need to find the form section of the documentation and I'm gonna click on content and I don't see it here. Some might actually be in components, so it's try components. Individual forms is right there. So these are the different types of forms and different fields of self it that we can put into our forum with bootstrap for and there's a lot of different things we can do here. They did a really good job of hiding different classes and different form layout's different types of form groups and stuff like that. They did a really good job, and you can make them stacked like this example here, Or you can also make them in line and can float side by side like this as well, Floyd. Cool stuff we can do. You also hide the labels as well, which is a another cool feature. And this is the grid system. And I think we're actually going to use this kind of little example here in our code and just edit it to what we kind of want it to look like in the final version, since it's pretty good here. So let's copy this, and I'm gonna go back to our mortal component and inside our mortal body, I'm just gonna piece that couldn and let's see how that looks. I'm gonna grab or a court here and kind of indented the best I can. Here we go. It looks a little bit better. So let's give this a quick safe and let's see how it looks on our Web site. There we have the basics of reform inside over mortal component here looking pretty good so far, but we still have quite a bit of work to do. But we can see we have a email fueled a password field which we're gonna change to a name feel later on, and some options for our radio buttons here that again we're gonna change a little bit later on. But the very first thing I'm noticing is that there's not a lot of good padding for our form. Um, we're gonna add some custom See, assessing in our form really quick here. I'm going to set that up and it's gonna kind of space the elements inside of form a little bit better. So let's go back into our website folder here, and I'm gonna create a new folder and I'm gonna call it CSS. And we're gonna store our CSS files in this folder inside the folder. I'm going to create once again a new document, and I'm gonna save it as the name CSS and give it or custom dot CSS actually, so once again, we can go ahead and get rid of our old CSS file here and inside our custom. See assessor going to open up no pad and we're gonna have to link to our CSS file here and our custom CSS is gonna have to go after our bootstrapped for CSS we created earlier. So I'm just gonna copy and paste is here, and this is the code a link to her style. She and we're linking inside the CSS folder, and then I'm gonna changes to custom dot CSS since that is what we called our founding. So that should be linked up and working correctly. Make sure you save your file and then in our custom, CSS we're gonna do is we're gonna actually add some padding to reform. So here's the form here, and I'm gonna inspect the element here. You can we see here we have a label, and we also have a kind of search here correctly gets here that there's a form element here , and this for moment is basically kind of grabbing everything inside that mobile component. So I think I'm gonna target that element and maybe add some padding to the element. And maybe that will kind of make everything fit low it better. So let's go back into our custom CSS and inside here, I'm going to target our form element. And let's try something like adding, maybe some padding left. And let's see how that looks. Receiver file in. Refresh your page. We can now see that there's a little bit of padding to the left here, but I also want kind of want ads. Um pointing to the top as well and different other elements of this form you can make. It almost sent arised on the page. So I'm gonna try and add just a patty element. But first, let's was just to 10 pixels just to see if it changes anything. All right, that looks a little bit better. So again, I'm gonna add the padding element with 10 pixels to the top, the right and the bottom in the left and see if that looks any better. Let's get rid of that padding left. Save a profile. And once again, if we refresh your page, we can see that little bit of space from the top, and it looks a little better. I kind of like this. It's adding a little more space over across the form, so looks pretty good. You'll also notice on our farm that the fields with the person can enter the email and password or a little bit large, so I'm actually gonna go in and make those a little bit smaller. So if you open up her HTM html, we can see here that in the different input field here we have some columns here and we have the email one here and they have column sm 10. Now this 10 number ISS towing to climb to spend 10 sizes. I'm gonna change out this seven. Let's observe how that looks differently. We can see here that the columnist now a little bit smaller looks a little bit better, right? So I think we're gonna go with that. Now, let's go back into our password field and we're gonna do the exact same thing here, Go down here, find the password field. And then let's change that to the one you want. Let's try eight. And we're gonna do is we're also gonna change your video buttons. We're gonna change that to eat a swell. So they all should be at eight. If we view it, we can now see that they're all kind of aligned here and they look nice and neat, so it looks pretty good. I like the way that's looking so far. Next up, let's change the label over password field. We're gonna change that to name. I'm going to change the placeholder text as well, as well as Thekla ass that we have currently, which is deep password class. Let's find the password input field and right here, what I'm going to do is I'm going to change this. I'm gonna type in name and I'm also going to change the placeholder text. Now, if you bring up our component and we type our name here, let's type in their email first. I'm just gonna type in some random texture And then if I type in my name, you notice that is kind of blurred out. Kind of like it still has that password can of fuel defect. So we need to do is you need to go back into our HTML code and we're gonna do is we're gonna change the input type here. You notice that it has text. It says Pastor, right now, we're actually gonna need to change that to text. So if you go ahead and change the input type the text Arfield should now be working correctly. We can now tape our name in here and it's showing correctly. That's good to go. Now you learned how to add some basic features to a form in this video next video, we're gonna finish up styling our luck form and kind of fixing little fixes we need to do in completing our form so that it looks good and the final version will be ready 5. Finishing Up Our Pop up Form: Congratulations, everybody. You've made it to the last video in this breached for many course and we're gonna do now is we're going to do some fine tuning for what form? So first of all, I'm gonna add some more padding to her form and you notice that it's some petting to this form, A swell. But in our case, we're just going to ignore that. And let's bring up our form here. We can see that it's more scenarios in the page. Looks a little bit better in my opinion. And again, you can do whatever you like You if you want to add a little bit more, a little bit less. Um, let's try 40. Probably just keep it at that because that would be pretty good. All right, that looks pretty good. I like the way that looks All right. So what we need to do here is we need to change the radio buttons for our bootstrapped form . But first, let's add a each header here that's gonna that's going to kind of let the person know that they can select a course to pick. So let's go back into our HTML and I'm trying to find the correct place here in between our two input fields. Uh, I think it's right here. Let's try this one here. I'm going to put in 84 which is a headline for and gonna write some text, your pick a course, save it up and actually underneath. Understand, At E H r here, which is kind of like a little line break can add a little bit of separation in space. And oh, you see, I put in the wrong spot here, actually put it underneath the email, feel that should do, went underneath the name field. So let's go back. And I'm just gonna copy this here and we'll bring it one step down here, read here. It should work correctly now, but save it, it's a view it. And there we go. That looks a little bit better, but lastly, I want to kind of have this pic, of course, text kind of centralized interweb form. So we can actually add a class to any bootstrap element that centralize the text without even doing CSS in that class is going to be excess or text access center. And what this is going to do is center all the text on all of you ports above the small report. So if we save this up, it should centralize our text Inter form. And there we go. We see our Texas now in the center of reform, so it looks pretty good. And we have our email, our name, our pick. Of course, the person can pick a course, and then we actually have to create our course options next. So once again, going back to our HTML, let's find our radio buttons here, and I'm gonna actually delete the radio placeholder text because I don't want to be there at all. It just kind of looks kind of weird. So I'm gonna get rid of that. And I'm also gonna get rid the check box text that was there earlier as well. And what I'm gonna do here is I'm gonna write some code here, but I'm before I do also gonna get rid of the disabled text that was created to a radio But in the 3rd 1 and also get rid of this class here as well, so that it's just like a regular radio button and now we can start changing the text for a radio ones. So for the 1st 1 I'm going to put JavaScript for the 2nd 1 I'm going to pick Bootstrapped for and our last option is going to be creating a website with WordPress. All right, so that she looked pretty good. And I'm also going to get rid of this. Check me out text here, and I'm going to write. I want to receive my free course via email set. The person has to check that box. So they're kind of agreeing to receive the course by email. And if we see this up in refresher page, we can see here that we have are three courses that the person can pick from the email, their name, and then they can check the box that they want to receive the free course and then every school, even further down, we have the same but in love we actually gonna get rid of Okay. Did that really quickly find it in our code? Looks like it's right here. Just gonna grab it and delete it. And while we're here, I'm going to click, Gonna change the save. Changes to submit. So when the person hits summit, it's actually gonna sim it before. Now. In our case, our form isn't actually gonna Smith, because you're gonna need to do some JavaScript orgy equity to do that. But this is just like the visual aspect of the form that we're creating here. So this farm looks pretty good. Um, we're pretty much complete here. I think this is the final version that we're going to use. And again, this is a nice, easy form that you can make or use on your website. And the purpose of the scores kind of it was just to get you familiar with creating forms and bootstraps. So now that you have a general idea how it works, especially the mortal component, you can go in, create your own forms for your own websites or for your clients as well. And the really thing, the main thing that pay attention you is Thebes documentation here. There's a lot of information and documentation that's really gonna help you out. There's a lot of different classes and a lot of cool stuff you can do with forms and we strap like the really went out of their way to, you know, make some cool buttons. Some cool, different states, some different types of sizing and column sizing and help text. And you can have some different fields with colors and custom forms and all the like. So there's a lot of stuff you guys can do. So again, check that out. But I hope you like this course. I hope you found some value Ford. And if you knew with Bootstrap for to consider checking out my how to create a simple website with bootstrap for which is going to give you Ah, mawr Thorough introductory to boot boot strapped for Thanks for watching.