The description below and here we can see this is how it looks we have this contact icon over here and if i click on that we have this contact form displayed over here.
And if we drag over this area right here we can drag it to anywhere on the screen and then we can just type the contact form and click on send message now this is just the design now in this.
Video i'll show you how to add this contact form to your blogger website so let's get started all right this is the dashboard of my.
Blogger website and if i click on theme you can see i'm using this theme called contempo aqua it comes by default with blogger this theme right here.
Now to add this contact form we have to modify the html of the theme so let's click on this arrow and click on edit html and here we need to add the html the css.
Or this is where the css ends so let's make some space over here and i'll just create a comment i'll just type draggable contact form and here we will add the css so let's go.
To the source code and i will leave the link of the source code in the description so let's go to the style.css file and let's copy everything from here.
And let's go back and paste it over here all right our css has been copied now the next thing we will do is add the html so let's scroll down and go to the end and here just before the body ends.
Let's make some space over here and here we can add the html but if we just add the html the css and the javascript this functionality of the contact form.
Will not work so we need to add some more blogger specific code so first of all let me just add the javascript so i'll just create a script tag and let's go back to the source code and.
Let's copy the javascript from main.js Wesdigital
File and let's paste that over here inside the script tag right now let's add the blogger specific.Code for contact form so in blogger we have widgets so we need to add a widget for contact form now to add a widget in blogger you have to create a section so in the section you can add widgets in.
Blogger so the first thing we will do is create a section so let's type less than b column section this is how you create a section in blogger and you have to give it an id so let's.
Give it an id of draggable contact form and let's close that over here so let's type forward slash b column section and now in this section we can add.
Widgets so let's add a contact form widget so let's type less than b column widget and let's give it an id of contact form.
To because i think we already have a contact form with an id of contact form one and let's give it a type of contact form and now the next thing you have to do is.
Click on save and blogger will generate some code for contact form so let's click on save and if we scroll down we can see that blogger has auto generated this code so.
This is our section with an id of draggable contact form and in that we have created this widget with an id of contact form two so this is the contact form.
We have all this code generated by blogger so we have these input fields over here we have the submit button and we also have error message or success message displayed over here now the next.
Thing you have to do is integrate our
Code with this code right here so let's go back to our html and here we can see this is our code so we also have this input fields over here and we also.Have this button now we have to copy all of this and we have to integrate the input fields inside this contact form into our contact form.
So what i will do is inside this includable with an id of content i'll just make some space over here and let's paste our custom contact form over here let's paste the html over here.
And then we'll make the necessary changes so let's go back and let's copy all this html from here and let's paste it over here all right our html has been copied and.
This is how it looks now the next thing you have to do is replace all these input fields with these input fields right here now before that let me just delete these.
Extra elements over here so we don't need to have this paragraph or this label so let's delete these and we don't need to have this paragraph as well so let's delete this and we also.
Don't need to have this message and we'll also delete this right here and we have a paragraph over here as well and then we also have a paragraph over.
Here and if you scroll up we can see that we also have a class for this button so we have a class of send btn.
And for this input fields we don't have any class but we have placeholders name email and message so let's add that and we also have a row of.
Five so let's scroll down and here first of all let's add the class to the button now this is the button because we have a type of button.
And we already have some classes over here so let's add one more class over here called send btn and for the text area we already have a.
Rows of five and let's also add the placeholders so we don't have any placeholders right now so here for the text area let's add a placeholder.
Of i think it's message so let's add message over here and then for this input field we have a placeholder of email.
And for this one we have a placeholder of name right now let's copy all these input fields from here and let's scroll up and let's paste it.
Over here so let's delete all these lines of code and let's paste the input fields over here right now let's delete the unnecessary code so.
We have this includable with an id of content so in that we have this draggable contact form and.
We can now delete this contact form from here and now we have the end of the includeable over here so let's delete this.
Space and i think that's it with the contact form so let's go ahead and click on save right now let's go back and let's open the website so let's click on view blog.
And here we can see we have the contact form displayed over here now we are not able to click on this contact icon that's because we don't have the correct z index so let's go back.
And let's click on edit html and let's go to the css and let's add a z index to the contact icon and we'll also add the z index to the.
Contact form so here for the contact icon let's type z index and let's set it to let's try 400 and even for the contact form.
Let's type z index and let's type 400 and let's save it and let's go back to our website and let's refresh this page.
Right now let's click on this contact icon and we have the contact form displayed over here and if you drag this we can see that we are able to drag it across.
The screen now if you scroll up and down we can see that the contact form also scrolls so right now we have set the position of this contact form to absolute now we.
Have to set it to fixed so that it will not move when we scroll down so let's go back to our code and let's go to the css and for the contact form.
Let's type position and let's set it to fixed we already have the position set over here so let's change this to fixed now let's click on save and let's go back to our website and.
Let's refresh this page and let's click on this contact icon and if we scroll up or down we have the contact form at the same position so everything is working all right.
Now if you simply add some information over here and send it it will be sent to the email associated with your blogger website let's send a message so let's add some.
Values over here so let's type john john email.com and great website and let's click on send and we can see it says your message has.