Learn Forms - The Easy Way (No PHP, No Custom Server Side)

all i want to do is send a contact form without using php or any kind of server side code today i'm going to show you two ways to do that [Music] learning to code can be stressful and hard and that's why i was proud to write the book breaking the code that gives you those five essential steps to landing that first software job pick up your copy today at amazon or any other major outlet so if you watched our tutorial video on what you need to put on your developer portfolio and you actually followed our advice you went out and hired a photographer and you shot some action shots here of yourself in the coffee shop preparing to rule the world with your code you went through your about section laid it out talked about your skills your life you even went through the effort of building out full stack projects here that you can showcase to an employer during the interview and you get down to the bottom and there's this thing called the contact form now all you want out of this contact form is someone to send you a message if they're wanting to like see speak to you about a project or maybe even hire you for a job and so when you go that you may google this how do i send my contact form from my web page or if you're using a template typically what they're going to ask you to do is install php or some kind of server side processing for forms but that's kind of how forms work but what if you don't know php or you don't want to set up php is there a way that you could send this form from your page utilizing just javascript and html what i'm here today to tell you is there is such a solution and i'm going to show you two ways that you can send your contact form without having to set up php or c-sharp or node.js or any kind of server-side technology we're just going to use html and javascript and get this contact form sent to your email box the first thing we need to do is let's talk about what we're going to build and so if you saw what i just showed you and you like this template i've linked this template down here in the bottom if you want to build your template using this it's called codex you can find it on theme farst but what we're going to build is i'm going to build a couple of forms the one of the forms we're going to build is this dark one here and that's another template library that i found that i liked and you can also i'm linking at the bottom it's got some dark mode it's got some light mode and we're going to hook this form up to email js and then what we're going to do is we're going to build another form and we're going to hook this form up to netlify and this is another form library that you can get from themeforest called i believe it's called ion forms i've linked it down here in the bottom and the reason i'm doing i'm giving you a couple of type of templates that you could use if you need to jazz up your forms you don't how to lay them out or something you want to look at or something you want to add to your sites but let's first look at how we'd wire this form up to nutlify and so we're going to use vs code to do all of our editing here and i like vs code for doing these um kind of client-side projects uh i like visual studio for some of the server-side stuff we do but for today we're going to use vs code to do all our work now if you look at our project up here we've got our dark form over here we also have this project here called index and that's that form that you're looking at right here and so let's talk about how we would wire this up i've kind of navigated to the section where we have our form here and so you could have a standard form tag that you need and this is all you really need to do and when i show you this you're going to see how ridiculously easy this is to do so i've got a regular html form tag i gave it a name and i called it contact cf netlify this name's important because you want to name it something that you'll recognize in case you have multiple sites going to netlify and you have multiple forms on your site maybe and you don't know which form is which one so this name you need to know that you can recognize it so that you can identify it in the admin site and we'll show you that in a second the second thing that i need to do is i'm going to give it an action and this may be a little bit different than it used to of what my success page is so when i post this form i'm going to take it to an success.html and we'll watch that work here in a second a lot of times when you're posting a form the action is going to the server-side process and that that server-side process is handling the form doing validation whatever it's doing and then redirecting it to a success html or showing an alert window or something like that but in this case our action goes to a success page our method is post and then my code type is i went ahead and did a multi-part form data because netlify forums will also allow us to do uploads and handle that all seamlessly on their side but all you have to do to do this is this you just type in data dash netlify and then equals true and that's it in order for this to work i actually have to publish it up to netlify because identify is actually doing the processing for us so you can't really test this in your dev environment you just have to trust that this will work and so all we have to do is get this one little attribute in here and that's it if i go over to netlify and i'm not going to go over um how to publish to netlify i have a video on that and if you don't know how to post a video just watch the video we'll have it probably linked up here in the corner a recommended video for you it's really easy to do but basically what i have is i've got a github repo and when i commit my github repro this will deploy all of my code and then my forms will just simply start working so i've deployed it here and if i run it you can see that i've got a list here i'm going to put a spring cohort i would like to attend coda foundry so this is a pretend form like you would if you wanted register to come to our boot camp you know bobby said it was okay something like that and then it's here asking for to upload your resume what we'll do today is i'm just going to upload maybe a picture or something like that um maybe dr strange's background here is kind of cool or marvel's avengers we'll go with doctor strange so this can be any kind of document you want and i'm just going to send this message and look it says thank you for responding we'll be back in touch so it routed us back to our um our form processing so let's look over over here and see what happened on the netlify side so this is the notify admin site you gotta have an account and you gotta log in to look at it so i can look at um and you can see here it found my form and then it said here's some verified submissions i would like to attend code foundry bobby said it was okay and we can look at this and right here we also have a link to the object that was uploaded now this could have been a resume a word doc or whatever and you can see here in fact uploaded there's our doctor strange sanctum cemetorium um so but it didn't send to my email like i promised so like how would we do that so let's look through how we could get this actually to our email so we're going to go back here and i'm going to go to my form settings and usage and in here i've got my forms setting right here and i've also got form notifications get notified by email you can hook it into slack or you can use any kind of web hook to integrate it into other services for today we're just going to set it up via email because that's all we want to do and so i want to listen for any new events any new event form submission and i'm going to use my gmail account here k6 lives and any form i could do any form here or i can specify the form that i want this one to live to and that's why we need to know what these form names are because what that does is means that we could if we have multiple forms and like different people that we wanted this to be routed to we could use aliases or one form goes here another form goes there and we can use different email addresses different web hooks different whatever um or we could say every form goes to k6 lives at gmail.com but for today let's protect this let's pick the specific form and save it so now every time we get a submission we absolutely should get k-6 lives in our gmail account so i've got my gmail account right here and you can see there's nothing in it i don't use this so don't send me emails here um and i'm gonna go back go back here and i'm gonna fill this form out again but this time i'm gonna change the message so we show it's not magic i'm gonna say it does cage six is cage six really alive something like that just something fun if you don't know who k-6 is he's just a guy from destiny so i'm going to upload a different picture here i'm going to upload the marvel avengers picture here and get this spelled right boom i'm going to send a message now what should happen if i did it correctly is i should see an email in here and look it came in and see how fast that came in and i could look in here and now i get this email from netlify it says bobby davis email right here this is where it's from spring cohort i would like to attend coder founder it's kate sick really live and we also got our picture so that's how real easily that you can use netlify to submit forms now you may be asking yourself a question when should i not do this or how did this really work and even pricing i won't go over pricing today because that could change when you're watching this in the future but in general if you're getting like a hundred form submissions per month it's going to be free and that's what's great if you're getting a bunch of form submissions they are going to charge but hey if you're getting a bunch of form submissions that means you're getting requests for work so it shouldn't be a problem to do that but if you're just looking for work and if you get 100 submissions during a month this will be absolutely free to you now what's the downside of this the only downside really is that you can't you have to be published to notify for this to work and you also can't really format the message coming back to your email box now maybe that's not a big deal but it could be or maybe you don't want to use that file you want to use something like github pages or heroku or something else what would you do then okay so let's look at how we could use something called email.js a different service and we'll utilize a different form to show how we could post to this service where we can be agnostic towards our hosting vendor hey if you're liking this video please remember to subscribe hit the like button and hit the little bell to get notified of all of our future great content okay so let's talk about the next service we're going to do here and so what i'm going to do is i'm going to um wire this form up with our dark form but i'm going to use something called email now ebljs is a service that allows you to send email directly from your forms with no javascript very similar to what we just showed you there's a little bit more setup a little bit more code but it's actually really easy and the pricing is pretty good so like i think here um if you get 200 monthly requests um then it's free and you get two mail email templates we'll talk about what those are and so there is some limits here but if you're getting a thousand monthly requests you're gonna pay four dollars a month so it's not expensive and if you're getting that many requests something that's really going good with your portfolio so let's talk about like how this works what we need to do um and to get it working so let's jump into vs code here the template i'm using is fairly complex it's got a lot of code in here but i created a section here called email.js so in general what you need to do is add some client-side javascript to your to your website and you get that client-side javascript from email.js so it's really easy to do it's kind of bulletproof for you to do this so what i'm going to do is show you and we're going to fill out this email.js config section here and let's get it up and running so the first thing i'm going to do is i'm going to go over here to my email.js and i've logged in here and i'm going to click on integration now this is blurred out right here but in general they're going to give you what your user id is okay and this is all you need to do and i'm going to use the browser section to do this okay you can use npm if you're married to that but this is ridiculously easy to do so i'm just going to cut and paste this code from here and then i'm going to put that into my email config section right here so what this is doing is first thing first is we're installing the email.js library and i'm using their cdn to do it you can bring it locally if you want and then it's creating something in javascript called a anonymous function which means a function that doesn't have a name and this is going to run when the page loads so this function calls email.js.net and passes your user id to that so your user id has to be correct and you get that from the integration page super easy to do and that will set it up so that you can then in turn process your forms with the email.js so what's the next thing that we need to do so the first thing you need to do is set up an email service and i'm going to i've already set it up in here but what you do is you can set up a personal email service and you just connect it to the gmail account that you want it's kind of cool right now you can add all kinds of different kind of services in here you can even use these transactional services like mail gun mandrel if you are sendgrid if you've used some of these before and that's what you're using you can definitely set it up through email.js and so whereas with netlify you'd have to use a web hook and maybe a little bit more work here you can use outlook you can use a different kind of personal services so plenty options there and i just set up gmail here and i'm going to use that k6 email that we're doing and i just hit connect and it goes through my connection process real easy the thing that i did notice here that i want you to set up or understand is that this service id just hit the search here and allow it to generate a service id for you i had a little bit issues when i was trying to make my custom one maybe i did it wrong i'm not really sure but like in general i think this must be unique across the platform so make sure that you have let it generate it and then just click update and it'll send you a test email to verify it the next thing that you can do is set up a template okay and we can look in here and you can create a template but this is fairly easy to do so if you're familiar with other kind of typical languages like react or something like that these double brackets is going to insert values from the form with the same name so if we look at our code and we go back up here and we look at into our form you can see inside my form my input values this one's called name this one's called email this one's called phone then i had one called cohort and then i had one called message and then i also have a submit button right here okay and that's critical that i have i type submit button because the javascript is going to listen for that event and we'll get to that javascript just in a second so let's go back over here and you can see how this is all wired up and you can see now i have double bracket name and that name has to match the name in the other form so you can see here a message is called message in the form in the html we call it the same thing here and that's so that it knows where to put the information and what to insert here as you can see here now we have complete control over the message that is sent we have a really robust templating system i'm just showing you the basis here but you can put a lot of links in here you can put pages you can put images there's a lot of things you can format this whole html here your attachments will also ride along here um when they come in and so we this will allow us to also take attachment so what you need to do is set up an email service and then a contact template and make sure the names match the values in your form and you're good to go okay so how do you wire up your form all right so let's look at some settings here um i also want to go over one more thing too this is another kind of safety check here that i really like about email.js is that you can restrict forms to a certain domain so that means if your user id got out in the wild or you lost your password these would only be accepted from your domain and someone couldn't like cross post and kind of run up your bill with the email js so this gives you another kind of securities point and i like that i think that's really great so we also can look at the documentation here a lot of documentation and like how you build this out but i'm going to show you how we can build this out so i've went over with the javascript but we also need to look into like how do we embed this into our form so that it actually works and so what we're going to do here is we're going to use this email js send function here okay and you can see it just takes your service id and your template id and so let's just do that code real quick so i'm going to write another script in here right here in this on one section in here and i'm going to say window dot unload because when i load my form what i want to do is i want to set up a listener for this form okay so i'm going to create another anonymous function okay so now this is announced function that's going to run when the the page loads and i'm going to say document dot get element by id and i'm going to pass it the name of my form and it's cf i think it's cf contact form we will check that so i'm going to add an event listener and then i'm going to put it on submit and then when that fires i'm going to write another anonymous function i'm going to pass it event and um close it up and bracket this thing okay so now we're into another um event so put some code in here so the next thing i want to do is i actually want to send the form with email js and this is all we got to do is email js and we should already have a hook to it because we emitted it up top and we're going to say send form and i'm going to cut and paste my service numbers in here your service numbers and templates will be different than mine and then i passed this variable this is actual the actual form values that's going to be submitted to this function okay and so nat sends it pretty easy um and that's all you really need to do to fire this up now what i did was i wanted some type of notification sent back to the user and i use suite alerts you could use a regular alert if you wanted to but um i wired up suite alerts in here if you wonder how that works maybe i'll cover that in a future episode or you can just look up suite alerts i'll link it up in here in the bottom i'm just going to cut and paste what i did here it just basically gives me an icon a thank you and your message is sent we'll get back to you shortly it's just a better kind of um alert page and then the final thing that i want to do is i want to um get element by id again i'm going to pass in the cf contact form um and what i'm going to do is just clear the form because i'm not navigating off the page and just do that with reset and that is it so what's cool about this is i didn't have to really change my um my html at all i mean it's all happening where we add this event listener and then what happens when that event listener fires it calls email.js to send the form and that's all we have to do to make this work and that's it's kind of cool so if i did that right that should work so let's just test it out so um i'm over here and i've got a contact form and so here and we're going to say i want to come to the cohort and email js test just so you can see kind of um and we just hit send and you can notice it fired off my suite alert which is kind of cool and if we go to my gmail account it should be in here and you can see here's the netlify one and this is the new one and you can see here it says hello coder founder you got a message from bobby l davis i want to come to the cohort email.js spring cohort i got a phone number in here that's going to be blurred out for the video and then my email address and then um and that's it and so you can see here now we have now with just a little bit of code right here which is the same for everyone you can now send email or send a contact form to your email box either using netlify or email.js now if you ask yourself what are the one of the reasons that i would use email.js and again it's like if you don't want to use netlify or you need more control over how it's presented maybe you want to use more transactional services like a mailchimp or something like that email.js would be the solution for you if you don't want to set up a server email.js works really nicely the pricing between netlify forms email jets are kind of the same i think the complexity to set up while different they're both equally as easy to do want you to do this once it's very easy for you to do so that's how you will send you can send forms from your portfolio page or a customer's website if you're doing freelance work anything like that you just want to send in a simple contact form check out netlify or js hey are you trying to learn how to code but you need a teacher a coach or a mentor consider coder foundry join our next cohort go to kodafrani.com apply we can get you ready to get that first software job [Music] [Music] you

Channel: Coder Foundry

Views: 893

Keywords: coding bootcamp, learn to code, dotnet, .net, c#, programming, software developer, coder foundry, coding bootcamp in north carolina, html, forms, form, netlify, emailjs, easy form, php, simple form, web development, simple form handling, emailjs tutorial, netlify form tutorial

Id: hu3iOfIqr3I

Length: 27min 40sec (1660 seconds)

Published: Mon Nov 02 2020