Adding contact forms to a Hugo Static Site

1. Intro: Hi, my name is Sean. I'm a teacher and web developer and welcome to my course on adding contact forms to Hugo static sites. Contact forms are dynamic factors which by default don't work on static sites. In this course, I'll take you through the process of creating contact form with Bootstrap, CSS, utility classes, and HTML. I'll also show you some ways of customizing the form. We then look at submitting the form directly to the end point. And we're gonna be using a third-party provider for this. We'll then look at creating an ajax form submission with JavaScript so that the patient doesn't reload. And then we'll look at receiving and processing the APR responses and displaying them with JavaScript. But don't worry, if you find these two complex, you're more than welcome to stop at step two. See you in the course. 2. Getting Started with the Project: To get started with the project, to need to download the files in the resource section from the zip file, which is called Start Here, dot zip. You can alternatively download the files from GitHub and that's in the next slide. Once you've extracted the files e, to open up the entire folder with Visual Studio Code. And I'll show you that in one moment. Before you do that, you must have the following software installing the latest versions. It's Visual Studio code, node.js, which includes NPM. And if it's on Windows and also include chocolaty. And you need Hugo, extended. And extended is actually the default for Mac and Linux. But if you're using Windows, you must make sure you get the extended version of Hugo. And optionally you'll need CLI and GitHub Desktop. I do recommend those for saving your work progress to GitHub, it's a great place to backup your work and also you can share your progress. We've made other students, if you need some help or feedback. False for each lesson has been stored on a public GitHub repository. You can get the first lesson of Skillshare in the resources section two. But for all of the lessons, if you need to check your progress, if you've got any problems and you troubleshoot, you can grab those falls off the GitHub repository. I've created a link in the resource section so you can access it and each lesson has its own branch. It is way to access the files is download a zip file from that branch. Although if you do use the option of cloning, make sure you delete the dot Git folder so you can start fresh with your own good history and I'll show you how that works now with the downloading of the zip file. So once you click on that link, you can choose the branch for the lesson number. And then from there, if you go to code, you can download the zip file. That's the easiest way to go about. If you do use the option of cloning or using GitHub desktop, make sure you delete that dot get folder. If you're going to want to ultimately upload that work to get hub yourself. I do recommend using the zip file. It's much easier. Once you've downloaded the files. For the first lesson, you've set up. We just did a code according to my instructions in my introduction here course, you'll have the option of opening with coding and the contextual menu. And then once you've opened with code, you see we've got a bunch of folders and at the bottom we have NPM scripts, and I've set those up for you so you can get started straightaway. You do have to have Hugo installed and you guys must be in your path for this to work. We've got a few options you may want to use dev and that run the dev server. They've preview you probably won't need for this course, but that will build drafts and also future pages. The page has been marked as draft or the date is in the future. Dead preview will actually run those pages. Bill itself is for building Hugo to the public folder. So you're going to upload to FTP. I do have a recommend you check out my course on Netlify. You can get some free hosting on the phi and all you have to do is run a git commit. And there's any to do any FTP uploading or building. There is redness disc, and disc allows you to actually see the files in the public folder while the Hugo server is running. And I've got also a preview and production. Production. One's great for checking the actual production version of the site before you ship your code. I've also included npm check for you, and that is for updating NPM dependencies. And Hugo version will tell you what version of hugo you have installed. So to start with Dodd Frank Hugo version, just to check which version of hugo you have installed. And we'll come back at my mind, I've got one I want installed. The all thing you need to do is you need to run npm install. The first time that you open up this folder. The reason being is the node modules folder won't be there. There's no point uploading on node modules to get because it makes the repository way too big. It's much easier to ignore it from Kip and then manually install. Once you've downloaded the files from GitHub, make sure you run npm install. It will take all of the dependencies out of package.json. Because what I've done is I've actually set up JavaScript and SES building fully. I've got a course on SESS with Hugo and Bootstrap, and I've also got a course on JavaScript building, but I've actually set that up for you. If you go into the parcels folder, you'll see ESPN called an ellipsis, and that's set up and ready to go. You will need to have the node modules installed for the SCSS side of that. Otherwise, I look forward to seeing you in the course and seeing your progress. 3. Create a Contact Form: The first thing we'll do to get started with creating the form is we'll run the dev server now, if you've got a new version of Visual Studio Code, by default, the NPM scripts plugin is installed and enabled. And you can run any of the NPM scripts which I've already included for you with the Play button next to the dev server. And he goes quite quick at this compared to other static site generators. And then once it has started up the dev set, but we can view it in the browser using a control-click. We've got a simple Hugo sites that up with the homepage. And I've included a single page which I've called about. I'm going to go about creating another single page, which will be the Contact page. So we'll close that terminal for now. The server will continue to run. If we go into content and we'll copy and paste the about page. And we'll rename it to contact. And that's for the URL. But we have to then go in and rename the title of the page to contact us or whatever you'd like it to be. We'll get rid of a subtitle. In terms of menu will live in Maine but will change the weight to 30. So the Contact Us will pay to the right of about. And we'll get rid of the text for now. We'll save that. Now. We don't want it to display the Contact Us page using the same HTML, which is used for the single pages because we want to actually display a form as well. One way to do that is we'll do is begging the contact dot MD would be the type. And we'll set it to contact in lowercase. Then what you have to do is in the Layouts folder, create a new folder called contact. And we'll copy and paste the single dot HTML into the Contact folder. In the browser. You'll see we've got the Contact Us Menu button, but there's currently no texts on the page and we haven't customized the HTML yet, so let's go back and do that. The only two that I've left a link for you in the resources section on the bootstrap five-page reforms were looking at the layout section. If we scroll down to the first example, we'll copy that. Then in the context single that HTML under content, we'll paste it in. We do need to create a form. You just type in form and emit will write the Fourier. We won't put an action in yet. And we'll put out two inputs inside there. You can use Alt Control F2, format the HTML. And we'll check that out now in the browser. That's working exactly as we planned. Let's go through now and set up our form. I'm gonna do is I'm going to get rid of the label. And input type of text is what we need. In terms of the ID. Id. We'll call it input name, and the place holder will change to name. And then we have to add aria dash, label. And that's for a screen reader and assistive technologies because there's no label for the actual input anymore. There's only a placeholder, and we'll change it to name as well. And then we have to add an actual name field to the input. And we'll call it name. And that will help when we submit the form. The contents of this input will have the name attached to it, which will be name. What we'll do is we'll highlight the electron blade. It will copy what we've got. We'll paste it below. This one, we'll call email. Name. The type will be email, and that helps with validation. The ID, we'll call it input email. And two placeholders. If you use alt click and change them both at the same time, make the placeholder email. You can use Alt Control F to tidy up your HTML. Will then copy and paste the first input. Paste it below. And we'll change it to subject. The inputs object will change our two placeholders to subject the placeholder name. And the last one will be a multiline input. So we'll copy and paste the subject, the input and control F to clean it up. Get rid of input and also get rid of type. And we'll replace those two with text area. Before you forget. At the end of the tag, you have to put in a closing tags slash text area. Otherwise it won't work and you have to make sure there's no space in between the opening and closing tags. If you were to put text area on a new line, you'll end up with a heap of space between there. And you'll have some issues with blank texts in place in your text area. Now, we'll have to change the name to message, the ID to input message. And we will change our place holder and aria-label to message. There's one more thing we can add, and that is Rose. And we'll change that to four for now. And we'll see if we lock it. So save that and we'll have a look in the browser. That's looking great. Let's have a go now at constraining the width, so it's not too wide. If we want to go to inspect, you'll see it's quite usable at this width. As it gets wider and wider, it's not to look a little bit out of place. So let's get back and we'll set up some rows and columns. So that will do that is we're going to wrap the form in some nested, nested row and some columns. So we'll use div row and then we'll enable dy dashed flicks. So display flex and then justify content. And then we'll do div dot col, md six. We'll give that a go. Then we'll call it our form and cut and paste it in and save it and have a look. A couple of things I notice. If we start to bring it down to the MD size, notice the forms a little bit small. But then when you get to large, size of six is pretty good. And we might also bring the heading into that as well. So the headings lined up just like when we go below MD. What we'll do is we'll do LG dash six and to the left of it will do call the MD dash nine. And then we will grab the title, the content, put them above the form, and we'll get rid of the existing row and column. But the way you structure your form is totally up to you. This is just one way of thinking about it. Normally, I'd actually put some contact information to the left of the form if it's an MD or wider. So I'll save that and have a look in the browser. If we go to the large size, you'll see that we've got six of half the screen, which is great. And then if we bring it down to MD, It's nine out of 12. And then if we go below MD, we've got the full width. If you look at Excel, That's it there. I think that's great for now. Last thing we'll do is we'll create the submit button. So writing into the form, putting a button and we'll do type equals, submit and class. Btn, and then btn dash priming, That's the basic button on the trip. And the text of submit. And then we'll have a look at that in the browser. That's a great start to ready for the next lesson, we will customize the form bit more. 4. Customize the Contact Form: So credit a basic contact form. Let's go ahead now and look at some customizations. Well, that I think is really nice, is, and I've left the link to this page in the results section is under bootstrap five forms. We've got floating labels and here's some examples. We've got a placeholder, but then when you click inside the field, the placeholder shrinks down and it's still visible and it makes for a much easier experience for the user. That way they don't forget what the field is that they're typing. I've got an example here. You have to put the class of form floating in the div which wraps the input. We then have to put our label in after the input. So let's go ahead and have a go at setting that up, we'll copy the form floating class. Run the single dot HTML in the Contact folder. We've got our first div and we'll click, and then we'll click in all of the other divs for the form, and we'll paste it in and put a space for form floating. Then we'll click end of the input. We use a label. In the four field. We have to copy and paste in the Id level. And then we'll copy and paste out of our placeholder and we'll leave the place holder there just in case it's required as a fallback in case this CSS isn't supported by the browser. And something you can do, It's hard to say whether it's going to be less work for you or not. But if you put an id on the label and we'll copy and paste in the ID from the input. I'll put the word labeled end. You can use aria labeled by, and you can copy and paste in that ID. Then screen reader technology will know for sure that this label is the label for the input. There's no question about it. Let's get through and set up the rest. So we'll put in to get the label, paste it underneath, and then we'll have to customize it. So it'll be input, email, input, email, label. Get rid of the aria label. The place holder the same. Then we have our subject. And for the last one, I'll just go back to the Bootstrap site because we can't use rows anymore. So for tech theories about a fault, there'll be the same height as an input which we don't want. We want the users to be able to see As I type in a multi-line message in the contact form. So it says He don't use the roads attribute. You have to explicitly set a height attribute, either inline or via custom CSS. We just stood in line for now. It is better practice to use custom CSS, especially if your security policy prevents inline styles. But for now we'll just use a style. We'll copy that style in there for the height. We'll paste it in, and then we'll get our label. Labeled by label. The rows. It doesn't work with the CSS. We'll save it and we'll have a look. Now we've got our fields, they are, but beyond that, you've got to consider the look you actually want. But as you click on them, you'll notice that the placeholder labeled does shrink down. So you've got space to type in your name. As an example. We'll just fix up the label for subject, which should actually be message. Let's have a quick look. Now, I would like this field to be bigger. The best way to do it, if you right-click and inspect. We can see we've got the text area there. You can actually double-click and you can do it live in the browser. So say for example, we will try 150 PXE and I think that's a good heart to them. We'll go back into Hugo and we'll make that permanent. We'll change our height to 150 PXE. Now, if, for example you want to do your CSS, probably what you can do is we'll cut that and save it. And then we'll go into the custom CSS. We'll paste it in. And the height 150 PXE needs to have a semicolon after it. And we'll copy and paste in the ID of the field. So the id is input message. So copy that. We hash input message and it work what are hot in there? We'll save that and have a look in the browser. Now, if you inspect, you'll see that there is no inline style. We look on the right. You'll notice we've got the hash input message that's targeting the idea of input message. And the height is being set to 150. And that's our CSS there. Because he got is being run as the development server. And I've set up CSS to source maps. You can actually view the original file there. And lastly, we'll customize is the button will look at another way of doing it with this trap. So apart from changing primary to secondary, we can also use outline and then choose the color, for example, primary. We'll save that and have a look. And that is the outline option. That's as far as we'll go with the customization for now. I'll see you in the next lesson. 5. Connect to API Endpoint: In this lesson, we're looking at connecting the form to an API endpoint. Currently our action is blank. I wanted a place to send that form so it can be processed. And so an e-mail can be sent to you, the person who runs the website so you can get the messages from your customers. Using bison to handle the forms. I left a link to it in the resources section. Once you've clicked on the link and you've signed up, there is a form which has already been generated for you by default called My First of all, once you go into that, you'll see a link on the right to the end point. Copy that. And then we'll go into the form action and paste it in there. And we need a method for the form and in uppercase to put it in post. We'll save that. So here's our form. Let's put some test data in. And we'll hit submit and that will send to the endpoint. And then it redirects to a basin page saying, thank you for the message. Then go into basin. You can see the message itself has arrived and we can look at it through here. For now. I'm just going to delete it. By default, the email will be sent to you with the address you provided. You can also change the name of the who the e-mails from who gets sent to you. And you can also change the subject. That funny, I'm just going to leave it at the defaults. I'll see you in the next lesson. 6. Spam Detection: The first thing we need to do when it comes to spam, let's go into the form and we're going to set up Google recapture. When you go into settings and then spam. And you have to actually turn on recapture and then read the docs. So Control click on Read the ducts. And for brewery capture it you have to use the following recapture site key. You cannot use your own key of G is this, which actually makes it easier in a way because it means it's easy to set up. I'm gonna go through the instructions at basins providers. It's probably the easiest way is up and running with Google. Recapture is the first thing is we'll copy and paste the script. Will place that below the form. So just underneath the form where you can put it into the section if you like. I'm going to say it's valid HTML. Actually going to skip step two because we'll be using invisible recapture. Go straight to step three. I have to make sure you have enabled require recapture, which we've turned on and we'll save those changes. And I prefer to use invisible recapture. Make that happen. Have to insert some scripts and then a button. Copy that would add up the script. And we'll copy the buttons. That's not actually a submit button, it's a button which calls recapture. And then recapture will call this script which will manually submit your form. So let's put that up the script. So comment out the original button by hiding it and using Control or Command K, C, where you can mainly put in the HTML comment if you wish. And then we'll paste in our new button, which calls Google recapture. Now to get the submit function to work, currently, it's looking for a form with the ID of invisible re-capture form. And we didn't have that. So what we'll do is we'll back that out and we'll change it to JS Daesh contact for reason I put a JS dash. The start is that lets me know that when I say the form and it's got the id of contact form, I know that if I change the ID of that form, I'm going to have a JavaScript issue. So always used to s to prefix all of my ideas which relate purely to JavaScript. Then we'll highlight the ID and we'll copy it. And we'll scroll up to the form. And we'll put in an ID equals. And then we can paste that in. We'll save that, and we'll have a look in the browser. So a few things here we can fix. The first thing is the Google recapture budge by default to actually see it's off to the right. You can set it to right to left. We're just going to delete the property, so it defaults to the right. And we're also going to style our submit button. So let's do that. So you can see Data Badge inline. Let's get rid of that completely. Then what we'll do is we'll go down to the class and we'll add btn and btn outline primary or whatever Bootstrap class you wish to add to style your button. So we'll save that and I'll look in the browser, just looking a lot better now with the hidden badge off to the right and our submit button, let's put some data in, Let's check out works. Generally going to query to click on the photo. If you're doing a test from a local host, then our submission has gone through. Thinks they can do is a honeypot. A honeypot is, is a input field for your four, which is hidden to human users, but generally not hidden to spam bots. Some spam bots might realize it's hidden, but what happens is easy for spam bot put some data into that field and hit send, then use basin isn't going to forward that formula into your e-mail address because it's pretty obvious it's a bot because humans can't physically put anything into that field. You control click on the Read the Docs. You'll notice that we have to put a name of underscore. Gotcha. And we'll just scroll down to the option for honeypot. The type will be hidden and the name will be gotcha. So we'll right-click that and copy it back to your form and paste it in. Save it. And you've got a honeypot protection enabled automatically. As soon as the bot put something into that field, then it's not going to go through, not guaranteed to work, but it doesn't hurt to include it as an option. 7. Form Validation: Look at form validation at the moment, there's nothing that's stopping the user from submitting the form. When they haven't filled in certain fields, I can just hit Submit and go from there. And it will get sent through and you'll end up with a blank form. So we're going to do is have a look at how we're going to handle that in the browser. We can't handle it from an outside point of view because that's handled by the endpoint which we haven't got control over. What we can control what happens in the browser. So let's go back into Visual Studio code. So we're in the singular HTML in the content folder. What we'll do is we'll go through each field and make sure you're looking at the actual input tag. Every field that you want to be required, what you do is you control click inside that field, will do the ticks area as well. We put in the property required. Then we'll save it. What we're doing here is we're using each browsers included mechanism for requiring inputs. So it is browser dependent. If the user has an old browser, it's not going to stop them. Problem we have is we have actually got a Submit button in this form. We've got a button that it calls on the recapture script. We're not actually submitting the form directly using the browser's built-in functionality. So what we'll do is we'll comment out our modified button with control Casey. And then we'll uncomment the original button with Control K. You will save that and we'll have a look in the browser. Now if we hit the submit button, it's going to pop up a warning because say for example, we've put in a name, then asked for the next one, and so on and so on. Let's have a look now at changing our code so that we're actually using Google recapture. So to get Google recapture to work alongside validation, because Google recapture is JavaScript and overrides the default submit function in the browser. We're going to have to use JavaScript validation. Now, I've left the link to the Bootstrap docs page for validation. Scroll down. There's custom styles which we're actually going to use. And that uses Bootstrap to style the form when there's either a success or a problem. If you scroll down to the next one, you'll see the browser default, which will just looking at, we're gonna go one better than that. Custom styles. What we have to do, first of all, is we need the class of needs validation on the form. And then we need the novalidate property. The property tells the browser not to use its built-in validation. And the needs validation we'll use is going to be for the state, whether it's validated or not. And the fact that it needs to be validated with Bootstrap. So we'll copy the class and novalidate property. And then for the form, putting in a class equals needs validation. And we've got no validate. We then need to add some JavaScript. We're already at the required properties to each of the fields. You scroll down, we have some basic JavaScript to get us started, so we'll copy that. And then we'll paste it in below the Google recapture code. Now what this does is the first thing it does is we're selecting every single form on the page which has a needs validation class for each of those forms. And that's what the array dot forEach is four, we are running the function and it listens for the submit button. So currently we've got a standard submit button. So what we'll do is we'll just put a comment on their listens for submit event on form. Then if the form hasn't passed validation, We're going to stop default, submit heavier. And if it has passed, then it will submit as per normal. And then we're going to add a class to display validation status of fields that happens regardless. We'll save that and we'll have a look in the browser. So he's a contact form. We'll put a name in and then we'll hit submit. And then what it's doing is it's stopping the summation from happening. It's saying we need to fill in these three. We'll do is we'll put it in a dodgy email with no outside and no.com put in a subject and a message. You'll see it's still not happy because we haven't got a actual properly formatted email address. So we'll do email at domain.com and notice even just with the maintenance passing check. Then we can hit Submit. But let's set it up now so that we're integrating recapture into the form itself. First thing we'll do is we'll do some slight modifications to this bootstrap code. The Bootstrap JavaScript is possibly targeting multiple forms and we only want to target one for me because I'm the one form will be working with recapture. So here we've got var forms equals and that's all the forms with needs validation, what we'll do instead is we'll do form equals. And then we use this code up here, document.getElementByID and JS contact form. And we'll just put some single quite teenagers to be consistent with style. Put a semicolon. Then we've got a re dot prototype Slashdot call. And that's for forms for eight safe for each of the forms. But this time we're just going to be calling the function. For the single form. We'll do is we've already using the variable form. For each iteration. We've created our new variable called forms. All we wanna do is remove the loop, will get rid of this line as well. Then Alt Shift F to reformat, and we'll save that. And we'll have a look in the browser. So the basic tests, we hit the submit button and you'll see that we're still targeting the form and we're still following the same steps, but it's only for the one form. Let's go through now and stuff recapture. The moment is the form hasn't passed validation. We're preventing the default submit function from working there. Just the form has passed validation. It just submits normally. We want to always stop the default submit function from working. So we'll do is we'll copy those lines. We'll paste them in and copy our comment as well. And paste that in. Originally. This check happened. First of all, has the form pass validation. But now we want to stop submission in all cases, we want to display the validation status. Then we want to do a check has the polar form validation. And if it has, we want to go through the Google recapture process and ultimately form submission. So what we'll do is we'll cut that out. We'll paste it in below. If form has passed validation, we'll get rid of the exclamation mark. Will get rid of that. I'll put a comment in coal recapture for check and submission. We'll save that and we'll do a quick check in the browser to make sure that everything is working as we expect. Obviously, it's not going to call recapture it and it's not going to submit our form. It's currently telling us there's problems. We'll put some data in and we hit Submit. And obviously that's not working, but it is validating as we wish. As you can see, it hasn't gone through the summit process. And that's because we haven't set up yet so, so far, everything is good. Let's go through now and set up recapture, but love to link to the Google recapture invisible ducts in the results section. This is an example at the bottom. For invoking recapture after client-side validation, we're going to use part of this. First up we're going to use is the div. We're placing inside the form. We go through into our form. And after our last input, we'll paste that in. We do have to get the site key. Copy that. Paste it in where it says SART key. We don't have to worry about the onload scripts because we're already doing that with the Bootstrap. And what the online script here is doing is it's saying when you click on the submit button, you have to validate what we're already handling that. But what's important is we've got the call to Greek captured dot execute if validation succeeds. So we'll copy that. And we'll scroll down into our Bootstrap code. And we've got here called recapture and for checking and submission. Then we have to tell recapture what to do. After the check has taken place. Up here in our recapture div, we've got data on callback is onsubmit. If you go back down, we've got onsubmit. And what that does is it gets the form and it submits it. So we go back down to our code and we'll put a little comment in there. Recapture calls on Submit after check. We'll skip that line that says stop default, AVX. It's a bit misleading. We've got cried. He'll put a comment in. Gold by recapture. Submits the form, but not via browser default. So save that and we'll check it out in the browser. I'm putting a name, email, domain.com. You actually have to put the.com in form. Spree doesn't have an error. Then got subjects. We'll pull it on submit and then message. Because we're doing local host and we've submitted quite a few ready. It's going to challenge us, which is great. It means it's working properly. Last thing we'll do is we'll get all of these JavaScript and pop it into a JavaScript file. It makes debugging a lot easier. So highlight everything in there. And then we'll go into assets in JS and we'll make a file called contact dot js. We'll paste that in and save it. We can get rid of. But we need to make sure the script is loaded for this particular page. The way we'll do that, because we're not working out of a static folder. We're using ES build, which I've set up by default for you. You can go into partials and then Script folder. And that's where we're loading the main JS file. Now we have to do is if EQ dot top of the capital T and the top will be contact. We'll put our intake and straight away. We can then copy and pasting that code and it will be contact ab.js and then we'll clean up the JavaScript file. First thing is the onsubmit function that isn't going to work as recapture won't be able to access the function from this file to create a variable and bind it to the window. So right, window, dot on submit equals. I'll make that an arrow function. And we're referencing the same item as we're referencing down here we add the event listener. So what we can do is we can grab that variable. I will put it up to the top of the screen. And then we can just run formed dot submit. Would I use strict at the top of page? And then we'll get rid of the self initializing function because that's not going to work either. And we'll do Control. Alt Shift F to reformat. And if you'd like, you can create an error function here to say that if you're running a winter, for example, Eastland, it will probably throw an error because you're not using token. So you can take that out. And to avoid the confusion will change on submit to submit function because onsubmit could pose an issue. And we'll get back to our single dot HTML, which change it to submit form. That's the function that will be called. And it will save that. And then we'll have a look in the browser. So put some doddering subject to external JS. That's why can properly, if you have any questions about how we're running ASP code to compile that JavaScript file. I've got a whole course on Hugo called JavaScript building with you guys. And you guys through the process of setting up AS build with Hugo and toggled me Craig browsers and all the settings for both development and production environments. If you check that out, you'll be going through the whole process step-by-step. Now I say you can get set up with AS build that so you can customize it to your needs. I'll see you in the next lesson. 8. AJAX Form Submission (no page reload): So we're trying to do here with ajax is trying to submit the form, but without refreshing the page and submit that way, it's a much more streamlined experience for the user. And we know they're definitely staying on our page and we're not going to lose them. And we can provide much more quick feedback to them. The options with providing feedback. I quite good if you're running your own endpoint, but if we're working with someone else, so there's a little bit simple, but that's okay. So let's get started. So the first thing we're gonna do is we're going to disable the forms of me because I'm not going to be submitting with the browser. Thanks we're gonna do is we're going to jump in and get all the data from the form. So we put a comment in get form data. So the const form data equals new form data with capital F, capital D. And we'll get it out a form. And we'll change our form variable to a constant. Thing we'll do is we'll create a new ECS instance. We const XHR, who's new XML HTTP request. Then we'll do is, we'll start working with XHR. The first thing we'll do is open in configure XHR, XHR open. And we have to use the methods so we can pull it out of the HTML. So we form dot method, that's the method we've already set on the form. And the ARO will be form. Action. You singled out HTML, you'll see your action from the form and you'll method from the form will send data. So we XHR dots and then we're going to send the form data. Now this is a synchronous, so it's actually going to send straight away. It will send one, it's ready to, but we've put that command in there. So it is ready to go. It will set timeout eight seconds. Xhr dot equals it doesn't. You can change that. And they'll timeout. So the XHR dot on time yet. We'll create an arrow function. Then we'll do a console error. Always tell timeout. So we can debug if need be. This is where it gets interesting. Traditionally you would do XHR dot onload. You then check for HTTP Two 100. Otherwise you're looking at a HTTP error and you've also got XHR dot on era. That's for your XHR arrogant. What we can do is we will on finished load then includes arrows. So it's XHR dot on load end. So it's like the unload and the on era. We'll make an anonymous function. So generally speaking, you'd wanted to filter out whether we've got our HTTP success or failure. Failure generally means you've got the URL l wrong or the service down and whatnot. The way we do that is if XHR dot status and for example, if n equals 200. You've then got ATP success. And else example 44 not found. Http era. Now you can get quite a few different statuses, from 200 to 299 plus 304. So we'll do equal to or greater than 200. And XHR dot status is less than 300. And all with double pipe that shift and the K valve into XHR dot status is equal to 304. Let's have a look at the docs because for this particular endpoint, we can actually keep it a little bit simpler. So here's the way it works. They've got codes and for example, http status of 200, which is ac access code. They've also giving us some response text and it's JSON encoded. And it will have success, true. Which tells us that all the fields are correct, APIs happy and the emails being sent. So we can then put that feedback onto the form until the user that your submission has been successful. Thank you very much. We'll send you an e-mail. If we get a responsive era, like all come with custom messages, which is great because it shows you a bit more information about the error. But they've also got HTTP error code attached to them. So you've actually got a successful HTTP transfer, but they're attaching your HTTP error code for that reason, we're not going to filter based on HTTP. Because notice we've got two codes, the same but different errors. We're just kinda filtered based on the error codes. Let's go ahead and let's do that. We'll do is we'll highlight all of the onload end. We'll copy it, paste it below, comment, the HTTP status filtering. And then we'll start fresh. First thing we'll do is we'll pass the response text. So we'll do const response equals Jason and capitals dot parse. And we're going to pass XHR dot response. If response dot success. And that's implying true. We'll do console dot log just for now. Those excess. And then we'll do else. If response dark, era, sold up, log, back, tick on. And then when the dollar sign and curly braces response.data. So you can actually get the error message. We put a colon and then do an else. If an error isn't provided. Console.log. New era, which probably won't get to find. Unless something terrible guys wrong. We'll save that and we'll have a look in the browser. Right-click and inspect to make sure you, if what you're paying dock to the left or right-hand side. So you can see the form fully. We'll put some details in the console ready. There should be a success that's working properly. It's T tech detected success true. So it's quite an error. Now I'll go back in and we'll add an extra digit to the endpoint URL and save that and have a go in the browser. We'll try that out. And we've now got this message coming back. And we've put that text in ourselves, Jason era. It's now ready to set up some messages for the user. Before continue will take out that 0, the one from the form action will the extra, just to make sure that it's working correctly now, we'll do is we'll disable the form. So it can be only enabled if JavaScript is present. Two that will give it an ID to start with. We'll call it JS dash, submit and all disabled, the form with the property of disabled. That way it's disabled by default. Will then add some no script. I'm Todd, the form. Must JavaScript able to submit this form, will put that Danny the button. So it's kinda obvious because the button will be disabled. Message in there. Alright, then we'll have to go and enable. It says that we have to target the button. So const submit, button equals document dot, get element by ID. And stay in stash, submit. And then submit button dots, disabled equals false. We'll comment in the JavaScript loads. Let's have a look. So we've got a disabled property on the form. I'm going to areas in the console, so the submit button is actually working. Let's have a go at turning off JavaScript. So we'll go into run commands like in Java and then disable JavaScript. And control are going to see a button is disabled and you must have JavaScript enabled to submit this form. So just renamed JavaScript. I'm ready to start working on our messages. So create our loading spinner. Especially we'll do credit variable, document dot, write, element, div, create an ID for it. So doc id equals b now, and we'll add some classes. So spinner dot class, list, dot, add, do, spinner, dash, border, and d, none to hide it. And then we'll add it to the form. So the form dot Pinchot and we'll add, It's been a start. We will get rid of the display, none, just to see it there. There's a spina sitting there and we're going to disable that by default. Then we'll create our message. I can't document dark moment prior to div. Let dot body dot plus this dot add. Let for now. One new for testing. So we'll do alert. Let's access child. And we'll have a quick look back into our form and go to the button NB to look at that. That's looking good. So we're removes the success class because it depends on the state of the message. And we'll hide both these elements for now. So D None. All right, we're ready to get started. Then what we'll do is we'll create our function cons to miss h equals Great and arrow function. And its properties that we can bring in will be status and status text. And we'll start with the success run message. Those true texts will be your message has been sent back to you shortly. Write our function. So first we have to do is check the state. So if status is equal to true, class this dot, and let's access class list dot. Add danger. We'll add the HTML. And we'll have a look. What's inflation in. She said, and I'll get back to you shortly. Didn't even to the spinneret was that quick? Let's have a look now at if it fails. So in our false copy, that string literal with back ticks, era. And then for generic era, that line. This time we'll do it later. We'll go up to our timeout. Have a look. So old trick, we add a digit and we get the error coming up. Now we have to do is reset the form after this has taken place, whether it's a success or a file, I want to reset the form so we can start again and recapture can start again. We're on. Reset Form will create the function. The first thing we'll do, Reset Form contents. Form dot reset, set validation, status, sss, dot class list, validated. Get rid of all the CSS we've just added down here. And then reset to recapture. Just like Hey, we used Jewry captured, execute please G recapture dots. We said, save that and have a look in the browser. I've put in some details and submit. And we've reset the form. Recap, just throw an error, which it does occasionally, but it's still workings. Everything's fine. Now we'll remove all of the console.logs. Now that we've finished testing it, we have to do is show the spin of all the forms lighting and then hide the spinner when the form has finished loading. So back when the form submit button too impressed and Google recapture has given the okay, and we know that submit form is called, will then remove the dean unclass from the spinner. So what we can do is we can copy the line for adding. The class will take out the actual spin a border and will change, add to remove. And we'll get the headline again. We'll go down to the message section and we'll remove the spinner by hiding it there. Let's test that out. So put in some details. Tend to spin up and spin this period as the status message came back. So that's working great. Make sure you test the form thoroughly for all use cases and all error scenarios. Before you. On a production site, you got any questions or comments, please leave them in the discussion section below. Happy to help you. Your best option is uploading your code to GitHub and then leave me a link to the code. And I regret to say some screenshots of credit forms that you've made in the project section.