2.6 Add a Contact Form

Welcome back to the course. In this final lesson, we'll add a contact page to our blog, and we'll also build a working contact form. Let's begin. First of all, let's create our contact page. So if we go to Pages, we actually don't have to do anything because we do have a contact page created by default with Ghost. And I'm only gonna make a quick change here. I'm gonna remove this image, and I'm gonna to change this text to this. And this is where we'll build our contact form. Now, we're not gonna build this from scratch, instead, we're gonna keep things super simple by using Formspree. This is a nice service that works really well with Ghost. And, for now, let's click Update, on this page. We'll come back to it in just a little bit. And then we'll go to Formspree. We'll create an account. And once we have our account created, we can create a project or a new form directly. Let's create a new form. Let's call it Contact for Ghost, Create Form. So, here, you can customize that form. You can see the HTML code here. You can also see several other examples for an AJAX form, React, HTML with file uploads, and so on. In my case, I'm just gonna simply copy this code, and I'm gonna go back to my contact page here. I'm gonna click the + sign and choose HTML, which inserts a raw HTML card. We're gonna paste in that HTML code that we got from Formspree. And then, we can actually see a nice preview here, we're gonna hit Update. And let's see our new contact form page. And there it is. So it's a simple contact form. And let's go ahead and send it. Cool, so we just sent that email. And now, in my inbox, I just received an email that says, new submission from contact for Ghost, and it tells me the email address I entered and the message. So our form works. Now, if we go back to this, we don't actually have a link to the contact page in the main navigation. We have one in the secondary navigation, but not in our main navigation. So let's go and quickly change that. Let's close some of these things here. So we go to Settings > Navigation, and we'll just copy this, but we're gonna paste it here, and we're gonna say Contact. And then we're gonna add it to our primary navigation. We can also use these handles, To move it up or down, and that's gonna affect its order right here. See, we now have a link to the contact page. All right, and that's about it, folks. Ghost is a great platform for building blocks, and you saw just how easy it is to get started, and how easy it is to add new themes and customize those themes to your liking. With that said, thank you very much for watching this course. I am Adi, and until next time, take care.