Now this is how it works we have this contact button over here and if i click on that we have the contact form displayed over here and we also have some animation for these placeholders and if i click on this name input field we can see that the placeholder goes up and it stays over here and we can type anything over here and we have the same animation for all these placeholders but if you don't have any data inside the input field and if you go outside the input field we can see that the placeholder goes back to the original position but if you.
Have any data then it will stay there now for all these icons we're going to be using font awesome so let's get the cdn of font awesome just google for font awesome five cdn and you will get this link of cdnjs.com so let's go to the website and i'll just copy the link of all.main.css from here and let's click on this button called copy link tag and here i have created an empty folder called floating contact form and i just opened it with vs code now let's create the necessary files over here so first of all let's create an html file.
So i'll just click on new file and i'll just name it index.html and let's create a css file i'll just name it style.css and we also need to have a javascript file so i'll just name it main.js and let's go to the index.html file and in vs code you have the shortcut where you can just press exclamation and press tab and you will have this basic html5 code and i'll also link our css file over here so i'll just type link and press tab and in the edit values type style.css and here we'll also paste the.
Link of the font awesome seeding so i'll just paste it over here right now let's start with the html of the contact form so inside the body let's create a division with a class of floating contact form now for all these components inside the contact form we'll create a division with the class of form container and in that we'll have all this content and now for this button we'll create a division with the class of contact icon and in that we will have this icon right here i am in informed awesome.com and.
Let's click on this button and let's go to icons and let's search for the icon over here so i'll just type chat and this is the icon that we used in our design so let's click on that and here's the code for the icon so i'll just click on this and i'll just paste it over here right now let's open this in our browser so i have this extension called live server installed in vs code so you can just search for live server and just install it in your vs code and once you do that you can just right click over.
For now now for each of these input fields we'll create different divisions so let's create a division with the class of field container now the first thing we need to have over here is the icon so let's go back to font awesome and let's search for name and i have used this icon so let's click on this and i'll just copy this from here and i'll just paste it over here and after that we have this placeholder now this is basically a label so let's.
Type label and this is for the name so i'll just type name over here and in the label i'll just type name and here we can see we have this icon and also this label now let's create the input field so let's type input and i'll just keep the type as text and we also need to include the id so let's type id equals name now this id should match this four value over here inside the label all right so now here we have the icon.
The label and also the input field right now let's create another division so i'll just copy this from here and i'll just paste it one more time over here and here the next icon that we need to have is for email so let's go back to font awesome and i'll just search for email so here let's type email and i think this is the icon that we used so i'll just click on this and let's click on this to copy this html and i'll just paste it over here.
And then here we have email and i'll just change this name to email and then for the input field i'll just change the id to email so here we can see we have the name and the email now for the message we will have a text area because we need to have multiple lines of text so let's create one more division and we'll just give it the same class field container and in that first of all we need to have the icon so let's go back to font awesome and let's search for message.
And i think this is the icon that we used so i'll just click on this and i'll just copy this from here and paste it down here and next we need to have the label so i'll just type label and it is for the message so i'll just type message over here and inside the label i'll just start message and after that we need to have a text area so let's type text area and here for the id i'll just type message and then lastly we need to have the send button so let's go outside this division.
And let's create an input and we'll give it a type of submit Wesdigital
And for the value i'll just type send and let's go back to our design and here we can see all the elements are displayed over here so i think that's it with the html and i'll also link our javascript file over here inside the html so here just before the body ends i'll just type script colon src and press tab and here i'll just type main.js all right now let's start styling this using.Css so we have already linked our css file over here so let's go to our style.css file first of all we will style this contact button now it is inside a division with a class of floating contact form and that we can see we have this contact icon division so let's type floating contact form contact icon and we'll set the position to fixed and i will set the bottom position to 40 pixels and we'll set the right position to.
50 pixels and we'll also set the cursor to pointer so that when we hover over this we have this cursor and we'll also add some padding to this icon so let's type padding and we'll just set it to 16 pixels and now we can see we have this padding for this icon right now let's increase the size of this icon so the icon is basically an i tag so if we scroll down we can see that this is an i tag and it has this class over here for font awesome so let's go back and let's type.
Floating contact form contact icon i and i'll just set the font size to 42 pixels and i'll set the color of the text to zero zero three zero four nine now when we hover over this icon we need to increase the size so for that let's type floating contact form contact icon i colon hover and let's type transform scale and i'll just set the scale to 1.1 and we'll also add a transition for smooth animation.
So let's start transition all to 300 milliseconds ease and now if you hover over this we have the size changing all right now let's start with this contact form so let's type floating contact form and we have a division with the class of form container over here so let's target that so here i'll just type form container and let's set the position of the form container to fixed and we'll set the bottom position to 120 pixels and the right position to 50.
Pixels and let's set a padding of 24 pixels top and bottom and 36 pixels left and right and we'll also set the width to 480 pixels and let's set the font family to roboto and i will also add a box shadow so let's type box shadow and we'll set the values to zero pixels 10 pixels 50 pixels and rgb a 0 0 0 and 0.1 now here the width that we.
See for this form container is more than 480 pixels because we have set the width to 480 pixels but we have also added some padding so it also gets added to the width so for that let's set the box sizing to border box so i'll just type floating contact form asterisk now this will select all the elements inside the floating contact form and here i'll just type box sizing and i'll just set it to border box and now we can see we have the correct width right now let's add rounded corners so.
I'll just have border radius and we'll just set it to 24 pixels right now let's style this s3 so let's type floating contact form s3 and i'll just set the font size to 30 pixels and we'll just set the color of the text to zero zero three zero four nine and we'll decrease the margin top a little bit so let's type margin top and i'll just set it to 10 pixels now if you go back to our original design we can see that we have this underline over here so for that we'll be using an after selector now using after.
And before selectors we can add extra data to the elements so let's type floating contact form s3 column column after now for the after selector we need to have a content property so let's type content now if we just type one two three over here we can see that after the s3 we have one two three displayed over here but we don't want to have any content so i'll just delete this from here we just create a basic height and width and a background color so let's type height of 3 pixels.
And width of let's say 36 pixels and we'll set a background color of
Ef 233c now we need to position the underline based on this heading so for the heading we need to type position relative and here in the after selector we can just type position absolute and now we need to position it to the left and to the bottom so let's type left of 0 and bottom of negative 4 pixels so here we have the underline for our heading right now let's style the input fields so i'll just type floating.Contact form form input and i will set the type to text and we'll also target the text area so i'll just have floating contact form form text area now first of all we'll set the width to 100 and we'll also add a padding of 24 pixels top and bottom and 32 pixels left and right and i think that's a lot so let's decrease it to let's say 16 pixels or let's say 12 pixels right that looks.
Alright and now let's set the font size to 16 pixels and we'll also add a border of one pixel solid and reset the color to rgb a 0 47 73 and for the opacity i'll just type 0.3 and we'll also have rounded corners so i'll just type border radius and i will just set it to 8 pixels and we'll also change the color of the text inside the input fields so i'll just type color and we'll just set it to this dark color right here.
Now when you click on these input fields we have this outline now if you don't want to have this outline you can just type floating contact form form input colon focus and when we focus on the input fields i'll just set the outline to none and now we can see we don't have the outlines but for the text area we have the outline so i'll just add that over here as well so let's type floating contact form form text area colon focus right everything works all right now for these input fields we'll also.
Add a margin bottom so let's type margin bottom and i'll just set it to 20 pixels right now let's style this placeholder and also these icons if you go back to our html we can see that we have a division with a class of field container and in that we have all these elements now what we will do is we will set the position of this label and also this icon relative to the field container so let's go back to our style.css file and here i'll just type floating contact.
Form field container and i'll just set the position to relative now we need to set the position of the label and the icon to absolute so let's type floating contact form field container label and i'll set the position to absolute and also floating contact form field container i which is the icon and i'll set the position to absolute right now let's set the top position to let's say 16 pixels i think we will just increase the padding of the input fields a little bit.
So i'll just set it to 14 pixels but that looks alright and i'll just set the left position of the label to 36 pixels and we'll just set the top position of the icon to 16 pixels and the left position of the icon to 12 pixels and i think we need to move the label to the right a little bit more so i'll just set it to let's try 40 pixels i think that looks all right and now we can see we have this cursor we also need to add some more padding on the left of.
The input field so let's go back to the input field and here you can see we have set a padding of 32 pixels left and right so we'll also set a padding left of 40 pixels and now we can see that the cursor is in the correct place right now let's set the color of the icon to a lighter color so let's type color and we'll just set it to rgb a and we'll set the values to 0 55 85 and 0.8 right now we'll decrease the height.
Of this text area a little bit so let's type floating contact form for text area and we'll set the height to 150 pixels and here we can see on the right we have an option to resize this text area now we'll disable the option of resize so for that you can just type resize and set it to none and now we can see we don't have the option of resize right now the last thing we need to style is this button so let's type floating contact form.
For input and for the type i'll just type equals submit and first of all i'll just set the border to none and we'll just set the background color to the dark color and i'll just set the color of the text to white and let's set a padding of 16 pixels top and bottom and 32 pixels left and right and we'll just set the width to 100 percent and we'll also add a border radius of.
24 pixels and we'll set the font size to 16 and reset the font weight to bold and i will also set the cursor to pointer so now when we hover over this we have this cursor and we also need to change the color of this label so let's scroll up and here for the label i'll just type color and i'll just set the color to the dark color right now the last thing we will do is we will add a hover effect for this button so let's type floating contact form form input and type equals.
Submit colon hover and when we hover over this button we will have a light background color so let's type background and i'll just set the color to 0 0 6 5 9 b and we'll also add a transition so i'll just type transition all to 500 milliseconds is and now let's hover over this button and we can see that the horror effect is working all right so everything is working all right so that's it with the design of our contact form.
Now what we will do over here is that we're going to add a class to this label and when we have that class then we're going to add this state over here so we'll add a class called active and when we have the active class then the label will have these styles and if you don't have the active class then the label will have the current style now just for testing i'll just add a class called active to this first label over here so i'll just type class equals active and let's go to style.css file and if we scroll up.
We can see these are the styles for the label so here we will type floating contact form field container label dot active and make sure that you don't have any space between label and active all right first of all let's set the font size of the label to 13 pixels and now we can see for the first label we have a font size of 13 pixels all right let's set the background color to ef 233c and we'll set the color of the text to white.
And we will add a padding of 2 pixels top and bottom and 16 pixels left and right now let's set the top position to negative 8 pixels and we'll set the left position to 16 pixels and we'll also add a white border to the left and to the right of this label so that we have some separation between this line and this label so i just type border left.
And i'll just set it to 8 pixels solid and white and i'll do the same for border right so i'll just duplicate it and here i'll just tap border right and i think we can move it a little bit to the right so i'll just set this to left 20 pixels or maybe 24 pixels but that looks all right and we'll also set the font weight to bold all right that's it with the styles for the active label and we'll also add a transition so that we will have smooth.
Animation between the two classes so i'll just type all to 300 milliseconds is and now if we go back to our html and if i just remove this active class from here and if i add it to the second label we can see that we have the styles for the second label now we're going to add and remove the classes using javascript all right now the next thing we will do is we will add an active class to this form container so let's go back to our style.css file.
And by default we want to hide this contact form and when we click on this button we need to display this contact form so let's go to the top and here we have the styles for the contact form so we have these styles over here for the form container now by default we will add a rotation so let's tap transform rotate z and we'll set the angle to negative 6 degrees now we want this element to rotate from this bottom right corner so we have to set the transform origin to this bottom right corner so here we just type.
Transform origin and i'll just set it to bottom right now we also need to hide this form container so let's type opacity and we'll just set it to 0 and now if you hover over this area we can see that we can still click on the input fields and even on the send button so we also have to set the pointer events to none so let's type pointer events none.
And now we cannot click on any of these elements and we'll also add a transition so that we'll have smooth animation i just said all to 500 milliseconds ease right now let's add the styles for the active class so let's type floating contact form form container dot active and here we need to reset all these elements so let's type transform rotate z and i'll just set it to zero degrees and we'll just set the opacity back to.
One and pointer events back to auto and now if you go back to our index.html file and if we just add an active class over here we can see that the contact form is displayed over here but by default when we don't have the active class the contact form is not displayed all right now let's add and remove the active classes using javascript when we click on this button over here so we need to reference some of these elements in our javascript we need to reference this form container.
Because we need to add the active class and we also need to reference this contact icon because when we click on this icon we need to add the class and then we also need to reference all these input fields from here because when we click on the input field we want to add the active class to the label so for all these input fields i just add a class called form input i'll just paste this in all the input fields so i'll just paste it over here and even for the text area.
Right now let's reference all of these elements in our javascript we have already linked our javascript file over here so let's go to our main.js file and let's type const form inputs and i'll just set it to document dot query selector all and here we'll just type floating contact form form container and in that we have the form input now since we are using query selector all we're going to get multiple form inputs and we're going to store that inside this.
Form inputs constant and now let's also reference the contact button so let's tap contact and i think it is called contact icon so i'll just type contact icon over here equals document dot query selector and here we just type floating contact form contact icon and then lastly we need to reference the form container so let's type const form container equals document.queryselector floating contact form.
Form container now let's add an event listener to this contact icon so let's type contact icon dot add event listener and we will listen for the click event and here i'll just create an arrow function now here we need to add and remove the active class from the form container so let's start form container dot class list dot toggle and here we'll just type active now what this does is that if you have the active class inside the form container then it will remove it and if you don't have the active class then it.
Will add it so that's why we are using toggle over here and i just noticed that we have a typo over here it should be floating and i'll just type t over here all right now let's go to our design and let's click on this contact button and we can see that our contact form is being displayed over here now let's click on this button once again and we can see that the contact form disappears so the animation for this contact icon is working all right now let's add the animation for these placeholders.
And i just noticed that we don't have this cursor being displayed over here when we hover over this label so let's go back to our css and let's go to the label and for the label i'll just type pointer events and we'll just set it to none and now we have the correct cursor all right so let's go back to our main.js file and here we have multiple form inputs and we have stored them inside this constant called form inputs and i have a typo over here we need to have form inputs.
So what we're going to do is we're going to use a for each loop and we're going to loop through all the form inputs and we're going to add event listeners to all of them so let's type form inputs dot for each and you need to have a callback function now for the argument i'll just type i for the input fields you can name this variable anything you want and we'll just create an error function over here and here we'll just type i dot add event listener so this will add event listeners to all.
The forum inputs inside this constant now for the event i'll just type focus because when we click on this input field the focus event is going to be triggered so let's create an adder function over here now we need to add the active class to the label not to this input field so if you go back to our index.html file here we can see we have the input field and before that we have this label and it's the same with all the other input fields here we can see we have this input field and the previous element is the label.