Bootstrap 4 Contact Form Customization
Articles,  Blog

Bootstrap 4 Contact Form Customization

hi guys and welcome to another bootstrap
4 video this is jamie from system 22 and web design and tech tips comm this video
today it’s an extract from one of our courses about how to build a countdown
page from scratch with bootstrap 4 and in this video we’re going to style our
contact form we’re gonna take a regular contact form and making it a lot more
interesting looking we’re gonna customize it like this so we’ve got some
nice horror effects going on and we’ve got a form that sits nicely with the
rest of the styling on our site here if anybody’s interested in taking this
course it’s a fully comprehensive course it’ll teach you how to build this
bootstrap for site from scratch and there’s a there’s actually four pages
with a success page and we use a bit of JavaScript for the count down and some
PHP for making the contact forms work and we go through the whole process from
starting from scratch from nothing to actually uploading to an online server
and making the site live so if you interested have a look below there’s a
link below with a huge discount you can get this course for just $9.99 to do
take a look so here we go now that we’ve got our form on the page
it’s not styling it how I want it so I’m gonna get rid of these titles here so
I’m just gonna have something inside here so let’s do that first let’s go to
our contact our HTML page here and here are the labels those are those titles
I’m just going to delete each one select hit the Delete key we’ll close the gap okay let’s save that now those should
have disappeared there we go that’s a little tidier there
now I wanted to say your name your best
email and we’ll have to add one here that says your message and those are the
placeholders you see there’s John Doe so we’ll say your name and placeholder for this one say your
email your best email or whatever you care to put there and and this one hasn’t got one so let’s
put one in there I’m just gonna copy this one and I’m gonna add it after the rose
there doesn’t really matter and the amount of Rose is the height of your
actual message column there I’ll change it mate just to demonstrate so this
won’t see your message how can we help like I say you put in whatever you want
to put there let’s save that back to the site refresh now there we go we’ve got
your name your best email and helmet how may we help what I was talking about is
that number of rows at the moment we’ve got three there if you see if we look
along here we’ve got rows three if I increase that to six I’m going to change
it back because I quite like the three ctrl s to save this will get a lot deeper or twice as
deep basically you see so however large you want your message field will be I
think three example so let’s just save that that’s fine right let’s let’s style
these these a little bit let’s get looking a little more like
these so let’s right-click and inspect they were asked the class of form
control there it is right here scroll it up so we can see
play so I don’t want to change any of that padding I might want to change in a
minute background color I’ll make that transparent there we go that’s starting to work
already and this border think was two pics solid white
water so let’s make this two picks to pick solid and make it white okay
and a border-radius they’ve got 0.25 em they’re do 50% that may not work on here
we have to do a pixel ratio so let’s just try if I put 50% in there those two
look alright but I don’t think that one’s gonna look alright so let’s put
50% in there two hats yeah yeah it’s kind of crazy
border-radius let’s that’s that’s I mean that was turning into a circle less what
I meant to put in was 50 pics okay yeah so those two looked fine but I’m that’s
a bit too much for me so let’s take that down a little bit
less let’s just select that 50 and roll it with my mouse wheel that’s better that’s better
yeah let’s leave it at that let’s just pull this up a little bit so copy the whole thing and then I’m
gonna delete the bits that we didn’t change so let’s
go back to our brackets and to our custom CSS this time let’s go down now
let’s create another title and we’ll call it contact form now let’s drop down one
and paste in what we were heard there a little bit more space for the troll okay
we didn’t change display width padding font size line height color you may want to change that color such
actual color the font in there I’m going to leave that color let’s delete all of
these background-color we did change but clip
we didn’t touch that border to you that we did that we changed that that bottom
one we don’t want for the moment it’s got an ease we’ll probably put our
own transition in there in a moment let’s just say that control s and go
back to this site and see what we’ve got yeah
you so if we type in there our characters
dark we go back to the brackets there that’s that color right there for
instance for us to change that to blue let’s just test out our theory what’s
changing to red will be able to see it better
not while I’m going to save it as read or keep it as read ctrl s to say refresh
I’ll start typing in there no that did not affect that color at all
about this screen on here there we go that’s a faucet to do that I think I’d like it better if when it’s
in focus like that if the background was say black or dark
or whatever color you wanted to be and that writing was white sort of more like
like our other things here so let’s go back here what we need to do
it’s copy what we’ve going on got going on here
you oops you
drop down and cover this we can see what’s going on copy what we’ve got
going on here drop it down a couple paste it in there and here we’re going
to put cool on focus no gap no gap and we’re going to make that white color of
font actually I keep that important right there FFF is white background color let’s make
that let’s make it black from over we can
always change it black zero zero zero border why don’t we use that blue color we use
for those buttons which was here that now bar for color let’s use this
you and shall we let’s have some fun and put
on that box shadow as well so let’s just take both of those how does that hover
class that we did for those buttons here so we’ll go to that I can just
get rid of that effect I can get rid of that line there let’s just copy this and
put it after there it’s just one less line of code okay so it’s got that box
shadow and before I so I hit control s let’s go back to the site before i
refresh if I right click and select this just so you can see what we were doing
there here’s the form control and if we want
to see what it’s doing on the focus remember we haven’t saved yet so we
won’t see our code you hit this little HOF element here and just check the box
that says focus and it tells you what’s going on on focus oh it is actually
reading it from our stylesheet even though we haven’t saved that’s got
that’s quite cool so if you wanted to change the focus live we could do it
that way so what we’ve done is we’ve changed it
so it’s going to be like our buttons here and it’s going to have that glow
and the blue outline it’s going to have white writing let’s call that to that glow that box
shadow there so let’s close that out at the moment is not because we haven’t
refreshed it and once we refresh let’s see what
happened there we go now it’s got that glow
think maybe that about blacks a little too much let’s just take it down perhaps
take the opacity down let’s inspect again we want to hit that that home and
check out a focus there you she’s here now let’s take that opacity
down just a little bit oh we can’t see what’s growing on there that’s bringing
up so we can see what’s going on bring that opacity down just so we can
see through a little bit but it is darker so you can see that’s darker than
this that you can actually see through it so that’s six zeroes on a thirty on the
end of it let’s just remember that it’s no problem
just go back to our style sheet close this one out
in that works you can still see a bit of it through there but it’s definitely
darker than one that’s not in focus so our background color was six zeros and
thirty save that thanks to the so I again it’s refresh there we go now save that all for us
alright we’re getting there we’re getting there and it works with
all these forms when you click on kind of like to see well she’d be kind of nice if it did
this when it hovered as well which is really easy to do
since we’ve already down the work simple let’s go back to our custom CSS
let’s copy this ctrl C you where it says focus that’s right holler
so it will do this not only when we focus on it it’ll also do it when we
hover on it ctrl s to save I apologize this videos going on a little bit long
let’s refresh there we go now when we hover on it it
does that too we focused on that one we hover on other
way it’ll light up as well very easy to do so I’m going to stop here and in the
next video we’ll style I want to turn those white and perhaps move them across
slightly and we want to style this button so it looks a little more like
this and perhaps have it over in the middle here well there you have it I hope that was
useful to you if you enjoyed the video please like share and subscribe to our
channel if you’re interested in web development this course and many other
courses you will find below we’ve got some huge discounts for all our YouTube
subscribers there’s also some great free courses down there so do take a look
once again this has been jamie from system 22 and web design and tech tips
comm thanks for watching have a great day

Leave a Reply

Your email address will not be published. Required fields are marked *