Checkout Form HTML CSS | Bootstrap 5

bootstrap 5 forms are really cool because they've redesigned some of the styling in version 5 and we're going to take a look at them in today's video if you're looking at building out your own form we're going to build out this example from bootstrap this is a basic checkout with a couple of different things including inputs and radio buttons and checkouts and we're going to build this out in html and css so that you guys get a better idea of how to use bootstrap 5 to build your next form and if you don't know who i am i'm adrian from australia i do videos around design and development so if you haven't already hit like and subscribe and let's just jump straight into it we'll start at the beginning so what we'll do is open up a brand new project in vs code and i'm going to create a file called index.html this will be where we begin and to start off with we'll just go to the bootstrap 5 website and we'll copy over their starter template now this template has a few things to get us started it's got our basic html in here but it's also pulling in the css and the js that we need to get bootstrap up and running finally i'm going to open up a live server and this will allow us to start editing our content in real time so that if we make a change over here like delete a words from hello world it'll automatically update in our browser we can begin building our form here that we've got in bootstrap 5. the very first thing we're going to do is get rid of this hello world and we're going to collapse up our head here and what we want to do is we want to start off with our content so for this example we've got an image and in this case the image is just pulling in that bootstrap logo so i'm just going to type in bootstrap logo in here the next thing we want to do is pass in the h2 text and this is just check out form and finally we've got a p tag with some basic text in here and this says below is an example form built entirely with bootstrap that should be enough to get us started now if we take a look at this image it's a little bit too big so i'm going to put a width of 72 pixels here and we might also set the height here as well so let's pass that in as 72 and 72 that should be more or less accurate the next thing we want to do is give a slight background to the body and in order to do this we're going to pass in a class which will be bg dash light in our body and this will make sure that the whole body has a slight gray color i'm not sure if that's noticeable but hopefully the inputs will pop a little bit more when we apply them next we want our entire section here to be inside of a container so i'm going to pass in container here as a div which is a class this container class will essentially hold all of our contents so that it's responsive with some padding on the left and the right and that way that fits in a little bit nicely now what we want is for our content not to exist straight from the top now in order to do this we're going to use one of the new classes here we're going to use py-5 now what this is going to do is we're going to get five units of padding on the y-axis applied here to our image so let's apply that and we can see those five units if we inspect into the content we can see that we've had the three erm applied here at the top which is the essential five units that have been applied so this is pretty cool and one of the new things that bootstrap 5 introduces the next thing we want to be able to do is make sure that this is centered so i'm just going to type in text center in here and this will make sure this icon here is centered for the checkout form here what we want is possibly for all of this to be within the one div which has those five units of padding so i'm just gonna move this inside here we're gonna hit save to that so that's looking a little bit better and finally for our image i want to add some more class items the next thing i want to do is maybe add some margin to the bottom so this is mb and we're going to do four units of that so i'm going to hit save on that and there's our four units of essential margin to our item there and the next thing i want to do is i also want to make sure that this item this this image over here it is a block so i'm going to do d-block here and i'm also going to pass in mx-auto now what this will do is probably not evident from the get-go but it essentially makes sure that this image here is a display of block so that way it's not an inline block it doesn't cause the text to try to over line with it the other thing this does is make sure that the margins on the left and the right are auto this is the mx auto over here this will make sure that it's aligned to the center so even though we have text align center here this is just another extra that we can do to be able to do that finally we're more or less done we just want to add one more class here to our p tag and in this case i'm going to pass in the tag lead and what this will do is just some custom css here for our font so that it's light in terms of its font weight and a little bit bigger it's essentially lead text on our p tag now we can do our good stuff which is actually creating the form itself what we're going to do is create a h4 tag here called billing address and what i want to do is create a number of inputs so for these inputs we're going to pass in a bootstrap class here essentially called form control this will apply the styling that we need for the actual input here we're also going to do another thing which is pass in an id now in this case we'll just pass in first name and this will be used a little bit later we need a label for this input so i'm going to pass in label in here and we'll create this as first name as well and in here we'll just pass in some text called first name this also needs a bootstrap form class so what i'm going to do is i'm going to pass in class here called form dash label let's hit save on that to see what we have so far and that's looking good we'll paste all of this inside of a container so that we can see it a little bit nicely there and that's looking good and the other thing i want to be able to do is possibly add a little bit of margin to it so in our h4 tag over here i'm just going to pass in a margin at the bottom of about 3 units so let's hit save on that and that's looking good we also want some validation so for our validation i'm going to pass in invalid feedback and this is a bootstrap class which won't be visible unless the form is invalid we're going to pass invalid first name is required and you won't be able to see this but if our form is incorrect it will appear finally let's put all of this inside of a form right now this entire form section here doesn't have an action so i'm just going to write in no validation but later we could create an action depending on what we need and if we want to finish this up we can put in a couple of other items in here so for example we could put in a placer placeholder here such as john smith and this will make it look a little bit more accurate but in this case we'll just have john since it's only the first name we'll also put in required since this item here is a required field now that we have this entire section here done we can actually copy this out and paste this to create a new item but before we do that sometimes our form looks a little bit too long so what we could do is we could put this inside of a row and this row here could have a column which is about six units long and once we do it'll only use up half the size there so we can copy this out completely and create a last name now so let's do last name in here and let's pass in the id here as last name and in this case we'll pass in smith and pass in last in here as well and hit save on that so now we've got our first name and we've got our last name and that part of the form is starting to look good and here it's all inside of a row the only other thing i might do is remove the gutters and make them a little bit smaller and this is one of the new utility clusters from bootstrap 5 which is passing in g dash say 3 which will make the gutters essentially a bit smaller we could pass in g-0 for example to remove them all together but we do need them to exist a little bit so i'm just going to make them a little bit smaller and that looks pretty good now the next thing that we want to do is create the username and to do that we're going to create a new column here and this is just going to span the whole column so i'm just going to do call dash 12 and what we're going to do is we're going to copy some of this content over here but we're going to make it slightly different so in this case what we want to do is create a user name and we'll save this here for username as the label as well and for the username we want an input group and this will allow us to put an icon in there so what i'm going to do is i'm going to create a div here called input group and this will let us put in our icon so in this case we're going to do a span and we're going to do an input group text and in here we'll put it on our icon now in this case i haven't really used any icons yet so i'm just going to put in the add sign but that should be enough to get us started then for the input here we'll do username and we'll do a username such as jsmith and that should be enough to get us up and running so i'm going to hit save on that now for this input group we do need to make sure that the entire input is closed inside of this input group but the input validation can be outside of it so let's actually save that once more and give that another shot and we can see here that we've got our input here for the username and that looks like it's working well so that's really good and what i want to be able to do now is move on to the next one i want to be able to look at drop downs for our inputs here and for our drop downs what we're going to do is create another column here but what i'm thinking is that we'll do a different column sizing this time this time we'll do md-5 and for this column here we'll create a country so i'm going to copy over these labels that we've created earlier but in this case i'm going to pass in country in here and let's do the label here as country we want a drop down and this is going to use a select so what i'm going to do is i'm going to get rid of this input group over here and in here i'm going to create a select instead of an input so let's pass in select over here now select works a little bit different so what we're going to do is we're going to get rid of most of the content in here including the type and since the type is defined by the type of div well the type of tag it is already in here all we need to pass in is the class itself which has form control in here we also have to close this off so here's our closure we're going to add a couple of options in here so for the first option i'm going to do australia and for another option what we could do is we could do something that's empty so for example we could just type in here choose and this could be where we start our variable off and this could be empty to start off with as well so that's enough to get us started with our country one there and we can see that it's popped up in here we could create one more option in here such as usa or china for example but at least that gets us started for our drop down over here since this is in a column let's create another one down here and what i'm thinking for the next one is maybe the state so what i'm going to do is i'm going to do a slightly smaller column maybe full column width and in here we're going to copy over most of the same content in this case instead of country and we did forget to set the id here as country what i want to be able to do now is maybe the state now in this case for the state what i'm going to do is something similar i'm just going to put in a couple of states here from australia such as wa south australia nt and we'll hit save on that and we can see that it's appeared here on the right so that's looking really good and finally we need a zip code and for most zip codes they're just regular inputs so what i'm going to do is i'm just going to copy over this column design over here and i'm just going to paste this in but this will be very small i'm thinking something like maybe md-3 columns and we'll hit save on that now i'm going to get rid of this input group and that should be about it the only other thing i'm going to do in here is put in uh postcode so in australia we don't have zip codes we have postcodes but that should get us started and a postcode isn't actually text it's numbers so i'm gonna put in a number in here and hit save so that's our postcode i probably do need a placeholder for that so in this case i'm just gonna do one two three four and that should put the placeholder in there so let's just do that in the correct area here we go and that's looking good let's create a new section and what i'm thinking to do here is creating a line break we're going to pass in a class here and this class will be a margin on the y-axis of four units and i'm going to hit save on that and we can see that apply now what we want to do is create some checkout inputs so i'm thinking maybe let's do a div in here with a class of form dash check and what we're going to do in here is pass in our input for our check now for this type we'll do check box and for the class we're going to pass in something different we're going to pass in form check input and this is the new class but it applies that new sort of form styling to our input there and that looks pretty cool what i want to be able to do is have some labels in here and for this specific checkbox i'm going to do a label in here and i think i'll have to do an input for this so in this case let's do same address and let's pass in an id in here and for this id i'm just going to pass in the same address as well now what we want to be able to do is for this label i'm going to do shipping address is the same as billing as our text here and what i want to be able to do with this label as well is also pass in a class and for this class it's going to be a bootstrap class of form check label so let's hit save on that and we can see it's applied and it seems to be working quite well there we've got our input there all of this though does need to be in a column so i'm just going to put it into a column of 12 and we'll hit save on that and that's looking pretty good now we can add in another one over here so what i'm thinking is let's just pass one in the same column here so i'm just going to pass in another one and in this case what i'm thinking is maybe something like save this info and let's do save info for the id and we'll also pass this into our label as well so that way we've got our two check boxes there and they seem to be working quite well let's copy over this line break and the next thing we can do is create our payment section right now there's not that much space on the page so what i'm going to do is i'm just going to browse up here to our body and i'm just going to give it a little bit more height i'm going to do min height 8 000 pixels and this is just placed in here for the time being so we can scroll down because my face is sort of in the way here for all our content but this lets me scroll down a little bit so that you guys can see this now that we can see this content what i want to be able to do is add this payment section so i'm thinking that uh we'll just add a h4 tag here and for this h4 tag we'll just label it as payments now for this h4 tag we want to give it a bit of margin so what i'm going to do is i'm going to do some margin but only at the bottom of maybe three units the next thing i want to do is create our inputs here for a credit card section and this will be a little bit complicated because we'll need to be able to choose whether we want a credit card or paypal or direct debit so what i'll do to start off with is maybe create a checkbox or a radio box to accomplish this normally we do radio boxes so what i'm thinking is let's do a ah let's see let's do an input here and for this input i'm going to do the type here as radio and we'll add a class here of forum check input and let's take a look at how this is visible so here it is and it's looking okay we need to give it a label so i'm going to put the label after it and i'm going to give it a name as well so in this case maybe credit card we'll copy this same id into our input over here so we know this label is referencing it and we'll just place credit card in here for the label now we probably want this all wrapped so i'm going to wrap this in a form-check this is a bootstrap class that'll just make it work a little bit better and we'll hit save on that and we can see that's popped up nicely there this is also a required field so i'm going to do required on this and it's also our default value so i'm going to set this as checked and this should come up automatically as checked which looks good now that we have this one set we can copy it over and create another one now in this case what i'm thinking is that maybe in this case this one can be direct debit so let's copy that across in here and let's update the label as well now since both of these inputs are the same type the radio we need to give them a name in this case i'm going to give them the name of payment method and this makes a lot of sense but we're going gonna have the same name for all of them and this way when we're selecting between them it'll automatically update it's not going to have an individual radio for each individual one let's copy one last one and what i'm thinking for this last one is maybe something like paypal so let's update this text in here to say paypal let's capitalize the p over there and we'll do the same here for the label let's pass in paypal for the id and everything else we can leave the same so now we've got our three payment methods and they're looking pretty good the next thing we're gonna do is we're gonna create the actual section where we place the credit card in so let's collapse this area over here because we're no longer using most of this and in here what i'm thinking is we'll start off with a row we're going to have two columns in here so let's do coal md6 for the very first one and let's copy that across one more time for the second one and what i want to be able to put in here is the name on card and maybe on the right side the actual credit card number now with these two items we're gonna need inputs for both of them so let's create an input over here and for this input i'm gonna do this as the text of type with a class here of a form control and this should be the one that essentially makes it look good and we're going to probably copy that across here for the credit card as well so you can see the two columns over here now this row doesn't have much spacing from above so what i'm going to do is i'm going to give it let's see maybe a margin on the y-axis of about 3 units so it cuts it has some spacing there from the top and i'm also going to reduce the gutters on it so i'm going to do gy which is gutters on the y-axis of maybe three units as well and that should be good now so now that we have this what we can do now is we can finalize these two inputs here and what i'm thinking is maybe to give them an invalid feedback option so let's do invalid dash feedback in here and again this won't be visible unless we have an error but let's type in is and the name on the card is required and we'll hit save on that and we'll copy this across below as well and what we'll do is credit card number is required here for the second one so that's good and finally what we might want to do is maybe add like a little bit of a hint or a note on the section so we can do this by perhaps adding in let's see let's jump here on the name section right and we'll create a small tag which has text muted as a class and in here we'll have something like full name as displayed on card now i'm going to hit save on that and we can see that it's popped up here below which is really cool and it's a slightly gray color but it's an example of how we can get this to work now the other thing i want to do is maybe add a label for this rather than just simple text so up here i'm going to do a label and for this i'm going to do full name and this full name can be for our input over here so let's just pass this in and what i want to be able to do for this one is maybe add a class in here as well let's add a class of maybe form label and let's hit save on that and that just adds a little bit of spacing on there and ideally we should be doing that on the other one as well for the credit card number so what i might do in here is pass in cc dash number and let's pass this in as an id here for our credit card number so i'm going to hit save on that and we can see the two of them have appeared there and that's looking really good now we also need a couple of other columns here so what i'm going to do is i'm going to do a column md of 3 which is much smaller and this will be where we set our expiration so i'm going to do expiration here and the expiration is the expiration date for the credit card so we'll need to do another input in here so let's do input here and what i'm thinking is it might actually be easier just to copy this entire column here and just use that instead so let's try that again expiration and in here we'll do cc expire and let's copy over this for the label as well and for the error here maybe expiration is required so let's hit save on that we've got our expiration in here we only want it to be three columns in width so that's looking better and we can copy this out once more and we could do cvv i think it is let's pass that in cvv and in here this can be the cvv for the actual card as well i think we'll just pass in cvv is required and there we go so that's mostly it we can finalize this now because we're almost done and to do that i think we'll simply close out this row with a hr and for this hr i might just give it a quick class of full margin units on the y-axis and finally we can add a button here to submit the form so let's do something like continue to check out now for this button in order for it to be styled correctly let's add some classes to it so maybe button and button primary and we also want this to be a large button so we'll pass in button lg and we want this to utilize the full width so i'm going to turn this button into a block for the display and let's hit save on that and there we go we can see our continue to checkout button then that's more or less our entire form done and it's looking pretty good i'm pretty happy with that one and this gives you an example of how to do a checkout form in bootstrap with all the new styling and more or less some of these cool new classes which are utility classes that allow us to style a little bit faster and a little bit nicer i hope you guys enjoyed this video if you did hit like hit subscribe otherwise i'll see you in the next one thank you

Channel: Adrian Twarog

Views: 20,799

Keywords: checkout form html css, checkout form in html, checkout form, how to design checkout form html and css, payment form design, checkout form html css boostrap 5, checkout form boostrap 5, checkout form boostrap, bootstrap checkout, bootstrap checkout form code, bootstrap, bootstrap 5, bootstrap 5 tutorial, bootstrap 5 forms, bootstrap 4, html, html css, web development, programming, checkout form in css html, payment form, payment form design html css, payment form in html css

Id: IrUp98s8B7Q

Length: 26min 16sec (1576 seconds)

Published: Mon Jul 13 2020