And javascript in my previous videos so you can go ahead and check that out i will leave the link in the description of this video now this is how it works we have this.
Contact button over here and by default it will be like this the contact form will not be displayed and when we click on this contact button we can see we have this animation and we.
Have this contact form displayed over here and we also have some animations for these placeholders over here so if i click on this input field you can see we have this animation for.
This placeholder so this is the contact form that we're going to add in our blogger website so let's get started .
This is the blogger website where we're gonna add the contact form and i'm using a theme that comes by default with blogger so if you go back to the dashboard.
Now let's scroll up and let's click on this arrow and click on edit html now the first thing we will do is we'll create a contact form widget so let's scroll down all the way to the.
Bottom now here after this division let's go ahead and create the widget now we have to create a blogger widget inside a blogger section so let's create.
A blogger section first so let's type b section and we need to have an id for the section so let's type id equals and i just give it an idea of contact.
Container and let's close the section over here now let's create a widget so let's type less than b column widget now for the widget we need to have an id.
And a type so let's type id equals and i'll just name the id contact form 1 and let's set the type to contact form and let's close the widget over here all right now let's click on save.
And we can see that our theme is updated Wesdigital
Successfully so let's scroll down and here we can see blogger has added a lot of code automatically because we added this widget with a type of contact.Form and this is all the content inside the contact form so now if you go back to our website and if i just refresh this page we can see we have the contact form.
Displayed over here and we have the name email message and the button so now the next thing we need to do is we need to copy the code from this design and we need to add it to a blogger template.
Code and we need to get some of the elements from this contact form and we have to add it inside the code so let me show you how to do that let's.
Go back to our template code and now here in this division with the class of contact form i'll just make some space over here.
And i'll just paste the html of our design over here so let's go to the source code and i will leave the link of the source code in the description of this video.
So let's go ahead and copy this html from here so everything inside the body till here and i'll just copy this from here and let's paste it over here now the next thing we need to do is we need.
To replace all these input fields in our design with the input fields in our contact form widget so here we have the first input field for the name so i'll just copy this line of code from here.
And let's scroll up and here we can see we have the input field for the name and here we also have a class called form input so we have to add that class as well so i'll just delete this line of.
Code from here
And i'll just paste the line of code from the contact from widget and now we need to add the class so i'll just type.Form input over here all right let's do the same with all the other input fields so let's scroll down and here we have the input field for the email so i'll just copy this line of.
Code from here and let's scroll up and i'll just paste it over here and we need to add a class of form input and then lastly we have this text area.
So let's scroll down and here we have the text area for the message so i'll just copy this and let's scroll up and i'll just paste it over here.
And let's also add a class over here called form input and then lastly we have this button so let's scroll down and here we can see the contact form.
Button so i'll just copy this line of code from here and let's scroll up and add it over here in place of this button and now if we scroll down and go to our.
Contact form widget here we can see we also have a division for the error messages so let's copy this from here as well and let's scroll up and i'll just add it.
Inside the form and now we can go ahead and delete this form so let's go over here and i'll just delete everything from here and also this division.
Right now we have replaced all our input fields with the input fields from the widget now here for the for attribute inside the label we can add the id so if we go back to our.
Website and if we right click over here and click on inspect here we can see for the id we have contact form one underscore contact form name so this first part over here is the.
Id of our widget and then we have the contact form name so i'll just copy this id from here and let's go back to our template code.
And i'll just paste it over here inside the for attribute now in the same way we can do it for the email label as well so let's delete this from here.
And here instead of contact form name we can see it has contact form email so i'll just type email over here and here for the message we can just delete this and.
Paste this over here and here we can see it has contact form email message so i'll just add that over here all right that's it with the html of our.
Contact form now let's go ahead and add the javascript so i'll just make a script tag over here and let's go back to our source code and let's go to main.js file.
And i'll just copy everything from here and let's paste it inside the script tag now the next thing we will do is add the css so let's go back and let's go to the style.css file and i'll just copy all.
The css from here and let's go back and let's scroll up and go to all the css so here we can see all the css of the.
Theme let's go to the end of the css and here we will just add a comment so here i'll just type floating contact form and let's paste the css over here.
All right now the last thing we need to add is the link of the font awesome cdn so let's go back and let's go to the html and we have used some font awesome icon so here we.
Can see these are font awesome icons so if we scroll up we can see that we have added the link inside the head tag so i'll just copy this link from here.
And let's go back to the theme code and let's go to the top of the code and here we can see we have the head tag so we have to paste it inside the head tag.
So just paste it over here and now let's click on save right now let's go back to our website and let's refresh this page and here we can see we have the contact.
Button and if i click on this we have the contact form displayed over here now we need to fix some of these things over here the first thing we need to have is a background color for this.
Main container and then we need to fix the styling of the button and i think the font size of the labels are also a bit too large and we also need to have some margin bottom for this s3 so if you.
Right click over here and go to the inspect let's make some changes so for the s3 let's add a margin bottom and we'll set the margin bottom to 24.
Pixels and i think that looks all right and let's go to the container division which is form container and let's add a.
Background color over here so let's type background and let's type white and let's also decrease the size of this label.
So let's select one of these labels from here it's inside the form and in that we have this field container and in that we have this label so let's set a font size of 16 pixels.
And i think that looks alright so let's add these changes to our css so let's go back to our template code and let's go to the css and here first of all for the form.