Click on that the form disappears and if i click on it once again it comes back on the screen and if you drag on this area right here we can drag it.
Around the screen now in the previous video we wrote the html and the css and this is how it looks right now we don't have the drag functionality over here right now so we're gonna do that in this.
Video let's get started now the first thing we will do is we will add the functionality of displaying.
This contact form when we click on this button so here we can see when we click on this button we have the contact form displayed and when we click on it once again it disappears so for that first of.
All let's go to the css and let's scroll up and here we can see this is the css for the draggable contact form which is the container division so if we go to the html here we can see this is the.
So that no one can click on this contact form at the beginning and what we're going to do is we're going to add a class called active to this draggable contact form using javascript.
And when we add the class active we're going to display this contact form so when we click on this button we're going to add the class active so let me create.
A style for that so let's tap draggable contact form dot active and here we'll just type opacity and set it to 1 and pointer events and set it to auto.
Right now let's add the javascript so let's go to the index.html file and if we scroll down we can see that we have already linked our javascript file over here now we need to reference some of.
These elements from the html into the javascript so we need to reference the parent division which is draggable contact form and we.
Also need to reference Wesdigital
This contact icon over here so if we scroll down we have a division with a class of contact icon.And the last thing we need to reference is this drag icon so when we click and drag on this drag account division by the way this is the drag icon division so when we drag.
On this division right here we want to have the drag functionality so we need to reference this element as well so let's go to our javascript file and let's type const draggable contact form.
Equals document.queryselector and we have a division of the class of draggable contact form and the next thing we will reference is the contact icon so let's type const.
Contact icon equals document.queryselector contact icon and the last thing we will reference is the drag icon so let's type const.
Drag icon equals document.queryselector draggable contact form drag icon right first of all let's add the functionality of displaying the contact.
Form when we click on this contact icon so let's add an image listener for that i'll just type contact icon dot add event listener and we will listen for the click event.
And let's create an arrow function over here and we just need to add the active class to the draggable contact form so let's type trackable contact form.
Dot class list dot add active and now if we click on this icon we can see that the contact form is displayed over here now when we click on this icon.
Once again we want it to be
Hidden so for that let's add toggle over here right now let's click on this icon and we have the contact form displayed and.Now if you click on it once again it disappears so everything is working all right now let's add the drag functionality now we need to add the drag functionality to.
This drag icon division so let's type drag icon dot ad event listener and we will listen for an event called mouse down.
Now this event will be fired when we start clicking on this element and when we stop clicking on the element we have the mouse up event triggered now once we have the mouse down event triggered we.
Want to check whether the user is dragging so let's add one more event listener so let's create an arrow function over here.
Now let's add an image listener to the document so let's type document dot add event listener and we will look for an event called mouse move now this event will be fired when we move the.
Mouse around the screen and now for the drag functionality we'll create a function called drag right now let's create the function over here so i'll just tap const drag equals.
Now when we listen for this mouse move event we have some data passed to this drag function over here so let's call it position you can name this anything you want now the next thing we need to do is.
We need to get the position of the draggable contact form so let's create a variable for that i'll just name it styles and let's type draggable contact form dot get bounding client rect.
Now this will contain a lot of information about our element now we need to get two of the information from this element we need to get the left position.
And the top position so let's store them inside variables let's call it left and we have all the information inside the styles variable so let's type styles dot.
Left so this will give us the left value which is the left position from the screen and let's also get the top value so let's tablet top equals styles dot.
Top right now we have the left and the top values of this element now let's change the left and the top positions based on the mouse pointer.
Position so for that let's type draggable contact form dot style dot set property.
And we'll set the left position and let's set it to a value now we're going to use variables inside this value so i'll just add backticks and.
Here we'll start dollar symbol and curly braces for the variables let's tap left which is the current left position of the draggable contact form.
And we need to add a value called movement x that comes from this variable right here from this event listener mouse move so let's type position.
Dot movement x and after that i'll just type pixels and let's do the same for the top so i'll just copy this and let's paste it down here.
And here i'll just tap top and here i'll just tap top and here instead of movement x i'll just type movement y right now let's check whether this works.
So let's click on this button and let's drag on this area right here and now we can see that we are able to drag our contact form now even if we stop dragging it follows the mouse.
Pointer so we also need to remove the event listener once the mouse is up so let's go back to our javascript and let's type document dot add event listener.
And let's listen for the mouse up event and when the mouse is up we need to remove the event listener so let's copy this from here and let's paste it down here and instead of add event listener.
Let's tap remove event listener and now let's check whether this works so let's click on this button and we have the form displayed over here and if you drag this we are able to drag.
And if we leave it stays there so everything is working all right so that's basically how you create a draggable contact form using html css and javascript alright so that's it for.
This video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a.