HTML Form to Mail | Create Full Functional HTML Form Without Any Back-end

[Music] so what's up guys welcome to another video today we are going to create a fully functional html form so what i mean by fully functionally is as you can see that that's a form and whenever we will submit it we will have the submitted form in our email inbox so let's actually try it so here let's say that hello bro and the last name is the bro and the mail is the bro at bro.com and the message is bro okay and that's our form and let's actually submit it and here as you can see that that's our message thanks and now if i come to my mailbox here as you can see that that's the mailbox and we have the full submission from our this html form so that's what we are going to do so you will get the submitted form directly in your mailbox so without any kind of back-end actually so that's what we are going to make in this video hope you will like it so no more talk let's dive into it so we are in the day 19 of 30 days 30 submits and for the day 19 we are going to create a full functional html form and if you are interested to check out this repo i will link it in the description here you can find all the interesting submits that i did in these 30 days 30 summits challenge so if you are interested please check out this repo i'll link it in the description so let's come here in our html code first of all let's get a boilerplate so here in the body i will have a section and in the section i will have a div with a class of container so container and after that i will have my form so for now i will not have the action but i will do it later so in the form i will have some form group so let's get the first form group so let's create a d with a class of form group so group here and in this form group i will have the level for the first input so the label and this is for the first name so first name and here let's actually say that first name so first name that's the level and let's get the actual input so that's the type text and also let's say that the id will be first name so and also let's have the name of this input so the name will be also the similar so first name so this is the first from group so let's create more so d with the class of form group and in here let's actually have the next level so this level will be for the last name so last name and the name will be actually the last name and actually let's create the input here so input and this is for the text and actually id will be the last name and also this is the name will be last name so this name will be displayed when you will get the submitted form in your mail or the backend so after that let's actually create some more so div with a class of actually let's get another form group so form group so here this one will be for our email so the level will be email so email and for the level actual we will use email and input and the input type will be the email and also let's have a id so the id will be email and the name will be email so after that the last input will be our message so let's get another d with the class of form group here i will have a level which will be the message so this one message and message and also let's have a input here which will be a type of text that's okay and after that id will be the message and also name will be the message so that's it so after that let's actually have the submit button so i will have a button with that type of submit submit and here i'll just say that submit so that's it if i save and refresh here i can see my all the input here so actually instead of this input in our message i can use text area so let's actually use text area so text area and the name of the text area will be message and the id will also message and that's fine for now and if i save as you can see that that's the text area so let's actually style this form here so let's link our style sheet so here sorry so in our css first of all let's say that the padding and the margin for the universal selector will be zero so margin will be zero and also say that box sizing will be the border box order box and we will not have any kind of extra gap anymore so after that let's come to the body and let's say that font family i will use font family will be the monster art so monster art so i already installed these font in my pc so that's why i don't need to import it so after that let's come to the section here and let's say that the height will be 100 v8 and the width will be 100 so with 100 percent and also let's have a background color so back ground color will be the allies blue so i'll explore and as you can see that the background is changed and also let's say that the display will be flex and align items center and then item center so items here and also let's say that justify content will be center so now as you can see that everything is now in center so after that let's actually come to the container so continue and here let's say that the width will be 90 percent and also let's say that max width will be 500 pixel and also margin zero auto so margin zero auto so if i save and it will be always center this container and after that let's actually have some padding here so padding will be 20 pixel and also let's have a box shadow so box shadow and this will be zero pixels it'll be for the y also 20 pixels spread and also we will have something like a black color with something 10 percent opacity then you can see that that's the container and it is in the center and also let's change the background color so background color background color will be white so it's looking good and also let's say that border areas so border radius will be about eight pixel and that's it i don't need anything else let's say let's have a margin bottom so margin bottom will be 20 pixels for now so looking good and actually let's style the actual form here so after that let's come here in the form group so from group hand here let's say that width will be 100 and also let's say that margin top so margin top will be about 20 pixel so as you can see that we have now this space here so that's the margin top and after that let's actually say that font size will be about 20 pixels so let's actually grab those inputs so those are in the from groups and we can say something like all the input and i wanna also grab the text area so text area and here i can say that width will be not windows so widths will be 100 and after that let's also have some padding here so padding will be about 10 pixel and font size will be 18 pixel actually let's say that the padding will be about five pixel yeah that's looking much better and also after that let's actually change the border here so border will be one pixel solid and i will have a grayish color so let me copy the color so now as you can see the border is something like grayish color so after that let's actually have a margin top here so margin top and we will have five pixels so that's the space between the input and the level so now let's come to the text area so text area here and let's say that i wanna change the resize so you can see that by default we have a resize option here so we can resize this text area as you can see here so if you can notice that we can resize it in the both way means i can resize it in the vertical and also the horizontal as you can see but i don't want the horizontally size i only want the vertical decide so let's limit the horizontal one so here let's say that the resize will be only for the vertical so if i save now you can see that i can't change it in horizontally i can only change it in the vertical as you can see so perfect so after that let's come to the button here and we can also specify it with the type so type will be submit so submit and here let's say that the width will be 100 and also the border will be none and also outline will be none so outline will be none and also let's say that i will have padding here so padding will be about 20 pixel okay after that let's actually increase the font size so font size will be 24 pixel and also border radius so border radius will be 8 pixel yeah and also let's say that the font family will be monsterat and here let's actually change the color for the font so let's copy this color and paste it here so now you can see that the color is changed and also let's say that texture line will be in the center and the cursor will be pointer and also we will have a margin top here so margin top 10 pixel so that's looking perfect as you can see here and also let's actually change the background color on hover so let's copy this selection and paste it here and say that hover so on hover we will change the background color so background color will be so let me copy the color it will be slightly lighter color so if i save now you can see that we have this bluish color and also let's have a transition so transition will be 0.3 second and ease and for only background color and now you can see that we have this nice transition going on here so after that let's actually style our status bar here so let's get started as well so after the container here let's actually create another div with a class of status actually with the id of a status instead of this class because we will actually grab it in the javascript so that's why it will be good if we use id instead of class so that's the id and inside of this let's also say success message so success and as you can see that that's the success message and what we can do now in our container i can say something like flex direction not container sorry in the section the flex direction will be the column so now you can see that this is our status bar and actually let's style it so this status bar can have two kind of styles first one is for the success style and second one will have for the arrow style so let's actually style both of those so actually come here in the status and let's have some basics first of all so the width will be 90 percent and the max width will be 500 pixel and also text align center and here let's actually have some padding here so padding let's say that 10 pixel and also margin zero auto so margin zero auto and also let's have a border radius here so border radius eight up and the background and the color will be applied on the status class so let's say that for now we will have a class of success so we will change this class dynamically by the javascript so whenever we will successfully submitted this form we will add success class otherwise we will add error class so based on this class we will actually style these status bar so let's actually create the success style so status and if we have any kind of success class so sorry here and i can say that the background color so background color will be so let me copy the color so we will use a green background color here so let's use this so it's not working so let me check so we need to actually save the html file so as you can see that it's working now and that's it for our actually the success style so let's actually add the error style so whenever we will have a error class here so error we will also change the background color so the background color will be a red color so let's actually change the class from the success to error so arrow and save as you can see that that's the color so that's the style as you can see for our arrow so actually let's change the color here also so the color will be white so looking good for now and these text as you can see that that success so it's just a placeholder we will actually change the inner text of this div by our javascript so we don't need to worry about the success or the error text so this will be generated by our javascript dynamically so actually let's have a animation here so let's say that the keyframe so the keyframes will be status and here i can say something like on zero percent the opacity will be one and also say that the point remains so pointer events will be all and actually we will remain it till the ninety percent of our animation and in hundred percent and in hundred percent we will change the opacity from one to zero and the pointer event all to the none so with this animation what we will do actually we will hide this status bar so let's say that whenever we will call the success or this arrow i will also have the animation here so animation the name of the animation is the status and the duration of the animation will be the four second and the timing function will be ease and we don't want any kind of delay and other things actually let's have the forwards here so this will be the animation so let's also copy this and apply it in the error so it's not working because we have an arrow here so we don't need any kind of delay so it should work now so after four seconds as you can see that it's now hidden so that's the animation that we added here so after that let's come to the functionality for our html form so whenever we will submit we wanna have the submitted form in our email address so how we can have these submitted form in our email address so there is no way so you need to have the backend for it but there is something third party service that you can use to have it in your aesthetic site so let's actually come to the website and the name of the website is the form spray as you can see and and here you can see that use your own html javascript css submit to our api and we will handle the rest so as you can see that we actually need the back end but if we use form spray we don't need to worry about the back end it will handle the rest of the thing we just need to make the sub bit to their api so that's what we need to do we need to submit this form into their api and what they will do they will send us the submitted form in our email address so actually if i come here to the price so they have i think three different yeah that have two different plants as you can see so free gold and platinum so i will use free so as you can see that you will have unlimited forms and you can have only 50 submission in the 30 days so that's you will have and if you want more submission you can actually purchase the gold or platinum so let's actually have the free and here in our form spray let's actually log in or sign up so i will use a temporary mail here so let's actually grab this mail here and create a account so paste it here and for the password i will use some random password so once you are in your account you can come and click this account and here you can see that linked email address so we have now only email address that we are already registered with so let's actually verify it to use this so if i come here and my temporary mail here as you can see that we have this very female so if i verify it i'm not a robot and that's good so now we just successfully verified the email address as you can see it's now green email is verified and now we can use this email for our form so in our form as you can see that you can create a new form so let's actually name it test and create form and you can see that send email address which is the by default one and that's the email address where our form will be or our submitted from will be sent okay so as you can see here we have a form endpoint so that's the api endpoint as you can see and now what i need actually we need to have this endpoint in the action so let's copy this endpoint and in our form as you can see that that's our form and in the action we just need to paste it so that's the action and i just pasted my endpoint for the form after that so after that what we need actually i need to specify the method for the endpoint so let's say that method will be post so that's the method and that's the action so that's what we need actually we don't need anything else so if i save and come to my form and actually let's remove it those classes and save it here so that's my form and let's actually submit my form and if i submit and you can see that invalid email address actually let's have a valid email address here so if i submit it and here as you can see that we are redirected to this form spread page as you can see that said that thanks the form is submitted successfully return to original site so as you can see that when you will submit your form there will redirect you into the form spray thank you page as you can see so you can also go back to your original site which is this one so if i come to my mail here and here as you can see that we have a new submission so if i come here as you can see that that's the submission we have hello hello that's the mail and that's the message that we have so now you can see we have our submission from this submitted form and it is directly come to our email address so everything is working fine but i just don't want the redirection means whenever i will submit the form as you can see that there will be direct me into the thank you page of the former spain so that's not something we want we don't want that so if you don't want that what you can do actually you can use your javascript for that so what you can do actually you can prevent the default behavior for your submission so for that in our form sprayer you can see that we already have some code here so in javascript you can see that that's the in the ajax you can copy all these javascript code after the script tag and before the closing script act just copy it and paste it in your main.js so what they are actually doing here as you can see that whenever dom content will be loaded and here you can see that we are grabbing the form and the form will have my form id and you can have any kind of id so let's actually have the my form id here so in the form let's actually have also a id so that we can grab it in the javascript so let's have the my phone so you can have anything so make sure that this is the same thing that you have here so after that let's actually have the button if you want you can have the button but i don't wanna have any style in the button so i don't need it so i just so i just make it comment so i don't need it and for the status bar as you can see that i already have a id i believe here yeah that's the status id so let's actually change this and make it a status because that's what we have in our status bar id so if i save so here after that as you can see that we have two more function success and error so on success what we will do we will reset the form and what we will do after that we will give a style to the form button so we don't want to have any style in the submit button so let's actually remove it and here as you can see that in the status in our html we will dynamically put this text which is the thanks when we will submit our form successfully we will generate these status in our html dynamically so this will be the thanks and whenever we will have an error message we will actually generate the text which is the ops there was a problem and after that as you can see that that's our main even listener where you can see that whenever we will submit the form we will prevent the default behavior which is redirecting us to the another page or from a spread page we don't want that so so that's why we just prevent the default behavior after that what we did here actually we did a ajax call to our api and whenever our adjust call will be successful means we will successfully submitted the form so there will call the success function otherwise they will call the error function okay so that's what they are doing in this javascript code and if i save and come to my form so that's the form actually let's apply so actually let's jump so actually let's submit it another so so now let's submit it one more time so let's say that hello and if i submit it so as you can see that we are redirected but that's not what we are expecting because we did a mistake here we did not add the javascript file so sorry for that so if i come here and submit it once again and submit it and as you can see that that's our thanks because it is a successful submit so if i check and here as you can see that that's our submission we have three submission and that's the latest one so if i open it and as you can see that that's the latest submission in our email address then you can see that we don't have the redirection anymore and we have a thank you message so that's working fine so now what we can do actually here in our success we can also add the class in the status bar so in our success let's say that the status dot class list dot ad so in the success i will add a success class so success and whenever we will have an error we will add the error class so this will apply the style for our success or the error bar here as you can see so let's change it to the error and if i save and let's actually submit it one more time and here let's say that submit it and if we submit it successfully we have the success style as you can see and it is hidden as you can see that because we did the animation here for the four second so after the four seconds it will be dynamically hidden so you can see in our mail we have all the submission so that's the latest submission which is the last name success so looking good and let's actually test the error one so if i change the end point and make it some change here so this will be an error because we don't have the perfect end point for our form action so if i submit so as you can see that oops there was a problem so that's the style and that's the text as you can see that we have in our this form status bar dynamically by our javascript so that's it for this video i hope you learned something and if you do please give it a thumbs up and don't forget to subscribe the channel and my name is arfan and i will see you in the next video till then bye bye kuda office you

Channel: WEB CIFAR

Views: 159,753

Rating: 4.8113308 out of 5

Keywords: How To Create A Contact Form, How To Make A Contact Form, html form, full functional html form, full functional, functional html form, after submit direct to mailbox, after submit direct to gamil, functional contact form, formspree, formspree form, html form to mail, form to mail, html form function, contact form to mail, html form to gmail, html css form, js form, create html Form, form to your mail, html form to direct mail, html e-mail form, web cifar, shaif arfan

Id: vc9rgFHr098

Length: 31min 20sec (1880 seconds)

Published: Fri Aug 14 2020