Basically gonna create this contact form right here and this contact form is also draggable so if i drag on this area right here we can drag it across the screen.
And in the end i'll also show you how to add this contact form to your blogger website and i will also leave the link of the source code in the description.
Below so let's get started right here i have opened up this folder called draggable contact form and i just opened it with vs code and here i also.
Have a folder called images and in that we have this drag icon svg which is this icon right here so let's start by creating the necessary files so let's.
Create a new file and i'll just name it index.html and let's create a css file i'll just name it stylor css and let's also create a javascript file.
Html5 code and let's link our css file over here so i'll just type link and press tab and in the extra file just type style.css and here in the body i'll just link the.
Javascript file so i'll just type script src and here i'll just type main.js right now let's start with the html of the draggable contact form so let's create a division with the class of.
Draggable contact form and in that the first thing we need to have is this icon right here so for that let's create a division and let's give it a class of drag icon.
And in that i'll just paste the svg so let's go to the images folder and let's go to the drag icon svg and i'll just copy everything from here and let's paste it inside our.
Division right now the next thing we need to have is this heading right here now we will add the heading these input.
Fields and also this button inside a Wesdigital
Form so let's create a form and in that the first thing we will have is the heading so let's create an s3 and let's give it a class of form title.And here i'll just type contact us and the next thing we will have is an input field and the type will be text and we'll have a placeholder so let's type placeholder.
And here let's type name and the next thing we need to have is another input field with a type of text and here we just have a placeholder called email.
And the last thing we need to have is a text area because we need to have multiple lines of text so let's tap text area and we can just remove these columns.
From here and i'll just set the rows to let's try five and we'll also add a placeholder for this and let's type message and the last thing we need to have is.
This button so let's create an input with a type of submit and we'll just add a value of send message.
Right now the last thing we need to add is this icon right here so for that we will use hero icons so first of all let me just create a division and let's give it a class of.
Contact icon and let's go to heroicons.com and let's search for phone and let's copy this svg from here and let's paste it over here.
Right now let's open this in our browser and let's see how it looks so i have this extension called live server installed in vs code so once you have this extension.
Installed you can just right click over
Here in the html and click on open with live server and here we can see that all the elements are displayed over here now the.Next thing we need to do is add the css and make it look like this so we have already added the link of css over here so let's go to stylor css file and the first thing we will style is.
This contact icon so here i'll just type contact icon and let's set the width and the height to 40 pixels and let's set the position to fixed.
And we'll set the bottom position to 40 pixels and the right position to 40 pixels and let's add a background color and let's add a hex value of 0 6.
9 1 df and let's set the color of the icon to white let's add a padding of 10 pixels.
And let's set the cursor to pointer and we'll also add rounded corners we'll actually make it a perfect circle so i'll just have border radius and set it to 50.
Right now the next thing we will do is style this draggable contact form division right here so let's type draggable contact form and we'll set a width of 240 pixels.
And let's set a height of 360 pixels and we'll set the background color to white and let's add a box shadow and let's set.
The values to 0 8 pixels 42 pixels negative 11 pixels rgba 0 0 0 and 0.2 and let's set the font family to roboto and let's also set the position to.
Absolute and we'll set the right position to 40 pixels and the bottom position to 130 pixels right now let's style this drag icon so.
Let's go back to the index.html file and here we can see we have this division with the class of drag icon so let's select that let's type draggable contact form.
Drag icon and let's set a background color of 8 to be 8 ff and let's set a padding of 8 pixels top and bottom and 24 pixels left and right.
And let's set a border radius of 10 pixels and now this icon is not exactly in the center so let's type display of flex and now everything looks alright right.
Now let's style this form element inside the draggable contact form so here we can see we have this form so let's style that here i'll just type draggable contact.
Form form and let's set the display to flex and let's set the flex direction to column and let's set a padding of 16 pixels.
And we will add a gap of 15 pixels between each of the elements right now let's style this heading so for the heading we have a class of form title.
So let's type draggable contact form form form title and let's set the font size to 20 pixels and let's set the margin to zero.
Right now let's style these input fields so let's type draggable contact form form input for the type of text and also the text area.
So let's start draggable contact form form text area and let's set the font size to 16 pixels and let's set a background color of.
Ef ef ef and let's remove the border and we'll also add a padding of 8 pixels top and bottom and 24 pixels left and right.
And let's also set the font family to roboto and we'll also remove this resize functionality in the text area so.
Let's target that let's type draggable contact form form text area and let's type resize none and now we don't have the option of resizing the text area right now the.
Last thing we need to style is this button now let's go back to the html file and let's see the class for the button and for the button we don't have any.
Class so let's add a class let's add a class of send button all right now let's style that let's start draggable contact form form.
Send btn and let's say the background color to the same color right here let's remove the border and let's add a font size.
Of 20 pixels and let's set the font weight to bold and let's set a padding of 12 pixels and let's set the color of the text to white.
And let's set the text transform to uppercase and we'll also add a border radius of 10 pixels now we have already added a padding for the form.
So the same padding is also applied to this button right here but if you go back to the original design we don't have a padding for the button so what we have to do is add a negative.
Margin with the same value of the padding so here we can see we have a padding of 16 pixels so let's add a negative margin of 16 pixels so let's type margin and for the.