Add A Form To Your Netlify Powered Website

hey everybody this is Chris State I'm gonna be showing you guys today how to create a contact form on your website and if you guys want to see what that looks like it looks like this right here you can type in your first name last name in email you can type in a message hi you're dumb you can actually enable a CAPTCHA and then click Submit and look at that and all and we have all the submissions and everybody can see and we can actually see what people are talking to me about without actually giving away my information if you guys want to learn how to do this watch the rest of this video alright so you can see I'm here in the net Liffey or net I'm sorry I got some comments it's actually pronounced net laughs I button nullify control panel and what we're gonna be doing is actually setting up our contact form you can see here along the top that we do have a couple of options one of them being forms and we're gonna go in there now if you're familiar with general or typical web development creating a form is using a form tag and throwing in some labels and some inputs for you to be able to use so it what's really nice about that Liffey is that it makes it very easy to set it up to send it to your server one of the biggest pains I had when first creating or talking with forums is either sending it through PHP which was another battle to fight and essentially you would create your your forum page and it wasn't an HTML file it was a PHP file and you would write some very complex looking PHP at the top of the page and then that would allow you to have your submit button send a post or an update to your server and then let your server handle that and then on your server side you had to write code to actually take that data and do something with it within that live natla phi it actually handles all of that with one one word and we're going to get into this but you can see it's just net low Phi so we're going to go ahead and open up visual studio code and we're going to get into this and I'm going to show you guys how I set mine up and it's not super complicated and it's not very not very drawn-out or long so I'm gonna go into the content page and you typically on websites you want your you want your code or your contact page to show up on URL slash contact so on this one would be blog Christie comm slash contact so I'm gonna do here is I'm gonna create a new folder and I'm gonna call this contact and then inside there I'm gonna create a file and I'm gonna call this index MD and the reason why I'm doing this is if in case you guys aren't familiar with this practice on any web site the index file it this will you know with the static site generator this will be rendered into an HTML and the index file will not load as far as the actual URL at the end of the at the end the page I can show you guys real quick that is something else I was working on here we go so you can see right here at the end of here you just have slash forms there's no dot HTML the way this is accomplished is by just leaving it as index if you were to rename this to something else you would be given a different URL I'll go ahead and show you guys that you know my blog so on my blog on these actual pages you can see here that it actually renders it out as this right here and if I go back into that you know if I go into a coding it does that and the nature of this one it's just gonna it's gonna rename this to index for you but I just go ahead and rename that as index right off the RIP now again we are we do need to write some frontmatter here so I'm gonna be writing some frontmatter code I'm going to type in the all it really means is the date I'll put this in as 2018 and then I'm gonna put the title and I'm gonna put get in touch and what this is gonna allow me to do here is it's gonna kind of show up at the top of the page hey like get in touch talk with me now what's really powerful about markup or Hugo here it's the fact that you can write HTML right here in your and your markup files and it will render that on the page so we do need to create a form and what we're gonna do here is I'm gonna actually I'm going to call this method a post and what this is telling essentially the webpage is that when this form is submitted one because we're gonna add a button on it when this form is submitted you need to send along with the header information to the web server that this is a post action and so your method of submission is your posting that's not very important and what we're going to do here is we're going to call this we're gonna call this contact yeah I'm gonna give that a capital C so the name of this forum is contact and what we're gonna do here is then get into the form I'm going to create an end tag there we go and I I haven't I'm I'm what you guys have seen from the intro of the video I'd already I'm actually I haven't actually filmed that yet I haven't filmed the intro yet so I'm kind of building this form as we go along kind of freehand and so there might be some spots where I'm going to mess up but that's okay we can always come back and troubleshoot that and fix it later so I'm going to change the style actually I'm sorry we're gonna create a paragraph here you know what I won't create a paragraph right now we're going to do is we're going to create a label and we're going to say for and we're going to say this is the first name because I want them to put in their first name and we're going to call this the first name there we go there we go and then right after that we're gonna do a line break like that and then we're gonna create an input so there is an input tag and we're going to call this type equals text and then we're going to give it an ID equals first or last name essential aerial first name like that and then we're going to give it the name which is first name I think either put quotes around that now let me only make this little bit bigger for you there we go sorry about that didn't know if you guys could see that or not and then we're gonna put a placeholder in there so that way you have something sitting there before the user starts to type and then once they type some text into that box it will erase that so I'll put your name your first name right and now put dot dot there we go make that a little bit smaller there we go so that'll be their first name and then after we've gotten that one down we're actually gonna I'm gonna create two line breaks here and you'll see why I do this in the future but if not I'll or if you guys want to understand what I'm doing there all that's essentially doing is creating some space in between these these text boxes and labels so that way then I'll and stacked on top of each other now I'm going to put a another label here and we're going to tell this type text actually four equals last name and we're going to do last name label alright so now we have that one we're going to create again another line break and we're going to create an input type equals text ID equals last name do I want that to be the same yes we're gonna go up here and fix this real quick there we go all right and then name equals last name placeholder is equal to your last name there you go make it all look the same and again we can add someone breaks right below it alright so there's a couple there's only what to two more things I'm gonna have to add to this form to get it looking good get it working and the first one is going to be here an input our graphical label and we're going to call this four and we want the user to put in there or that you know the the person on your website to put in their email and so in order to that in case we need to communicate back with them you're going to cry pin that label and then we're going to type in a line break and then we're going to do another input here and type email or a text IDE equals email you and then we can add a placeholder here Eagles you're our new email at example.com just just kind of show them what that would be and I forgot the name which is going to be email all right and then we have one more to put in there and that's kind of what we want them to put in there you know kinda like their message so I'm going to put a label here for a message don't you love HTML and then right here we're gonna put a text area which is another form so instead of using input we're gonna use a text area which allows you to get that kind of bigger box that's adjustable you can adjust the height of it sometimes the width depending on your layout of your website and we're going again we're going to name this message all right so now that we have that that message there secretary ID message where I named it message and then not a comma placeholder equals write something interesting there we go and then what I'm going to do here is I'm actually going to set up some styling because I want to have some default styling on to set the height equal to 200 pixels that seems like a pretty good height that we're gonna be using and then we're gonna finished it off finish it off by putting an X Cape tag and then right below that I'm gonna put a line break and another line break just can't give it some stuff and then we need to add actually an input which is going to be a button so we're gonna do type equals submit and then we're gonna do value equals submit and then we're in D style equals nothing and hopefully that'll be a little button that says submit so if we did everything right here what we're gonna do is we're actually going to let's see if we can run it locally I want to run inside terminal we're gonna humor gonna see if we can get this to work so I'm going to bring over this and type in my local host 1313 and we're going to go to slash contact and right there you can see it isn't very pretty right now we're gonna work on styling this in a future and possibly a future video or if your theme allows it but we're gonna work on that but you can see I kind of have this is working here right so I can do Chris state you know email at example.com and then I can do a hi and then when I click Submit it actually it does nothing here because this submit button is set up to do nothing we're not actually on a live server but that would actually work so we're gonna what we're gonna do here is after get on with that we're gonna actually post this to our website to see if we can actually get something working so I'm gonna go type in added contact page and I'm going to I'm going to post this to my my git repository I'm gonna push this up to the server cannot push out of the aisle actually I need to I need to pull first a lot of changes and then I can push here we go and now we're good so I'm gonna go back to my browser I'm gonna go back to my deploys and we're to go into here into building and we're gonna see and look at what this looks like you boom alright so we're gonna get blog that Chris techcom slash contact and boom so what I'm gonna do here is I'm actually gonna type in name a CT state at gmail.com and then do hi right sometimes simple and you can see boom it goes 404 page not found there's a problem what's going on here well what we forgot to do is we actually forgot to add this little tidbit of ittle tiny piece into our website and that's right here under forms and what we need to do is we need to just write the word net Liffey down there near the end so right here at the end we do net Liffey and what this is going to let it do let it know is that this is a form that net Liffey needs to process we're going to say added form and then we're going to we're going to push this up to the server all right so you can see it grab that it's gonna start processing that and then we can actually see how this works it's gonna be awesome you alright that site is live all right the site's live so this time we're going to see me like thing I want to type in my information type in hi and I'm gonna click Submit and you can say oh hey we need to fill out this CAPTCHA right so you do that and then you click Submit and boom look at that they give you a thank you message and everything so that's really nice but how does this actually get to you how do you get this information well if you go back to your net Liffey or net liffe isar your net with eyesight and then you click on if you click on forms you can see right here it detects that you have one form and one form is collecting data and right down here you can see it's called the contact form and we already have a submission and you can click on that submission and you can see this was received at 6:04 p.m. from this IP you can see that it has the first name the last name email and message so you can see all that it's very very easy to read very easy to use and you can actually download this as a CSV additionally you can actually set up if you go into here in the settings and usage you can actually set it up to either post this to slack for you hook it to a web hook or send you an email automatically as soon as those get inputted so you can see right there we already have some functionality to our website of adding a contact page but I I want to work on a couple things here the first one being I want to work on I want to work on that CAPTCHA I don't like how it goes there and then to a thank you page I want it to be on the same page and then the other thing being is I don't want to you have to go to that default Thank You page that net-net Wi-Fi has I want to create kind of our own thankee page so let's work on that real quick it's the first thing we do is a CAPTCHA code that one's pretty basic to do to do that all we're gonna do is go into here right underneath before our submit button and all that we're gonna create another couple line breaks and then right here we're gonna create a div and we're gonna call this data - natla phi - re CAPTCHA and then we're gonna enclose that div tag and what that's gonna do for us is that's going to automatically create that katka you can see where I learned that at if you go into forms and then you click on their documentation and they have that in here you can actually you can actually manually do that I don't let's I don't wanna stay here and spend all day showing you guys where that was but I just kind of read this one page and it showed you where that was now the next thing before we go on to that Thank You page is something I want to explain to you guys that is very powerful than nullify does for you and that's kind of and that's what is called in the biz called a honeypot what this is is when you have a honeypot it allows attackers or people that would spam your website if someone were to write a bot that would go to website and essentially fill out your your form and then keep submitting it over and over again where be on an automatic basis or just trying to field some questions or whatever that what that can be stops and how you do that is or how nutloaf I does that and it's very genius of them is you create a input on the page that actually allows you to actually allows you to input some data and if you actually input that data but you but but you I'm sorry if you input that data but it's hidden so you'll say you put a text box but you hide it from yourself but you know when somebody writes a script it's gonna go in there and look for all the text box write some data into them and then click Submit for you what that would do is that would actually activate net will fly to say hey this is a robot typing in this data there's no way that somebody actually went in there and made that unvisible or made it visible for to see and then filled it in and click Submit let me show you the implementation of this and how this works and then it'll make it'll make more sense I swear you hit the top of our form we're going to type in we're going to create that P and then we're gonna do a style and then we're gonna say this visibility is hidden because we don't want this to be seen by the average user and we're gonna create a label in there and we're gonna say don't fill this out if you're human right and then we're going to create an input Boompa don't fill this out if you're human and then we're gonna create an input name equals bot field all right and then we're gonna and then before that actually need to close off that label all right so you can see it created that right quick and then right below that we're going to end that P tag but how do we tell net Liffe i that we want to use this well it's pretty simple we up here we go to data net nutloaf I equals true you and then right there we're going to nullify honeypot equals bot field and so what this is going to do is that if a if a script or automatic attack we're gonna fill in this field right here and actually click Submit it's not going to accept it to me and say hey I have a honeypot set up and why is this happening and if we actually go to the I'm gonna open up the localhost 1313 slash contact if we actually go here to our site you can see that it doesn't show up and I'm going to inspect this page right here and we're gonna go into this section called good content and we're gonna go into the form and you can see here this is hidden and if we actually we turn this off it does show up so you can see don't fill this out if you're human we turn it off and they can't see it at all but a script will not do that and it will override that data and so I think we're good on that but before we before we test that in on their live server I actually want to set up that Thank You page I want to fix that so what we're gonna do here is again in the underneath content I'm gonna create a new folder and I'm gonna call this thank you and in there again I'm going to create another file I'm going to call this index MD and now I just need to write kind of a quick a quick page saying thanks for your submission or something so we're gonna going to create some frontmatter here I'm going to call this the date actually let's do the date is equal to 2018 again I believe that needs to be in quotes yes 2018 and we're going to call this title and we're gonna do thanks actually we're gonna say cheers and then right below that Murr si thank you for your sub mission all right so now that that's set up what we ran do here is is if we actually go to that site 13:13 slash thank you I'm gonna pull it over here so you guys can see it it'll look kind like that so say thank you for your submission and actually I can actually let's just erase that and just type it up here in the title thank you for your submission all right so now that we're done with that I'm gonna go ahead and go back to our contact and right here at the top right after forum we're gonna type in an action and we're gonna say the action is go to thank you what this means is that as soon as this form is submitted instead of going to that default page it's going to go to a page that is the URL blog or a state comm slash thank you and that should load that other page that we created so I'm gonna say added Thank You page and added honey pot to our get notes I'm gonna submit that and push it up to our server and then we're gonna go ahead and open up necklace.i and see how it works all right so we're gonna go ahead and go back to our website and go to contact and you can see here I can put in my first name last name email write a message I can actually expand this out say thanks for the comments and I can right here click on I'm not a robot and then at the bottom click Submit and you can see it goes right here to this Thank You page so says thank you for your submission and it doesn't drive the user away from your website or change the theme and you can go right back to the top so that is how I add the contact page I'm gonna be working on actually styling this and making sure that people can that actually goes to the theme of my website and looks good so I might I might do this on my own time and then show you guys what I did or you guys can just check out my repository all of this out my entire blog for you guys to know is on my website on github comm you can get to my github right here on this link and all of that code for that website and everything about it the theme and everything is on my github it's any point if you guys can help just check out my code and feel free to leave comments and questions on github or on my website if you guys like this video and you guys liked what I taught you please leave a comment down below and tell me how what what you guys took from this what you guys learn from this leave a thumbs up on this video and please hit subscribe I think ever everybody for my subscribers everybody who's learning and loving these videos and I will see you guys on the next video [Applause] [Music] [Music]

Channel: Chris Stayte

Views: 4,782

Rating: 4.9333334 out of 5

Keywords: Netlify, Hugo, Chris, Stayte, Website, Programming, Tutorial, Learn, How To, How

Id: zcDHz_JiCRY

Length: 25min 27sec (1527 seconds)

Published: Sun Aug 26 2018