Wagtail CMS: How to Add a Recaptcha To Your Contact Forms

Hello and welcome back to another lesson on learning Wagtail. In the last lesson, if you're following along with this course, we added a contact page to our Wagtail website, and it was great! But at the end of the video I mentioned how the contact form is somewhat naked. And by naked I mean it's unprotected Like anyone could submit that form, and for accessibility purposes, that's okay. But bots and spam bots and all sorts of things can also get in there, all sorts of automated tools, and all of a sudden your email is flooded with spam And I would like for everybody to be able to avoid that. So in this lesson we're going to learn how to install a thing called recapture. And you have No doubt run into this at some point on the internet and basically all it is is a little checkbox that you click

and it shows a few images and you select all the stop signs or you select all the cars or the storefronts or something like that And basically it's just a Google product that tries to determine are you a bot or are you a human? So we are going to get started with that right now. So before anything, you're going to need some API credentials. It's a free service, so if you head on over to google. com slash recapture, you can see that in the URL bar right here. And if you have a Google account, you can just log into your console and click this little icon that says create. And this is going to create a brand new site for you. Your label is going to be, let's put this one as learnwagtail. com example. We want our recapture type to be v2, although v3 is really really cool.

We actually just want v2 because that's what the package that we're going to install actually works with. And we want to make sure that the I'm not a robot checkbox is that's the option that we want. Domains, we can add any sort of domain, so we can add like localhost. Can we add another one here? Let's make sure that we can add one with our port. I wonder if they're gonna allow us to do that. And then let's add our own website, Wagtail. LearnWagtail. com. Something like that. Accept the recapture terms of service. Send alerts to owners if you really want them to. Uh I'm gonna disable that because this is just an example, but you might want to keep that enabled. Click submit and as we can see here uh the following domains are not valid localhost 8000. Let's get rid of that one.

Let's hit submit again And here we go, we have some API credentials. So we've got a site key and we've got a secret key. We need these. So let's copy that site key. And I'm going to open up VS Code and just make a new file And throw that in here. Call it site key. We're going to use this later, so just hold on to these. Don't get rid of this yet. And this one is going to be a secret key. So the next thing we need to do is we need to install a package called Wagtail Django Recapture. So if you open up your terminal and go into your website, so I'm going to CD into my website. And I'm going to get into my pip environment. And all I'm going to do is type pip install

wagtail Django Recapture And that didn't find anything because I had a typo in there. Recap child. There we go. Alright, so that's installed. What if we ran a pip show wagtail Django Recapture? This will tell us our version. Version is 1. 0, the name, all sorts of good stuff in here. What we want to do with this is we want to grab that version and throw it into our requirements. txt file. So again, open up the file called requirements. txt and at the bottom you can add

Wagtail Django Re -capcha is equal to 1. 0. And I got that 1. 0 from this version right here. And just as a little shout out, our friends over at Springload, springload. co. nz actually make and maintain this package, so it's pretty good actually. They make a lot of really good things. Definitely friends of the Wagtail community. So we're gonna save that requirements file and shut her down. Next we need to open up our base. py base. py And in our installed apps, we need to make sure that we're actually installing the CAPTCHA. So there's two things we need to do here, and as far as I'm aware, uh the documentation

I'll make that a little bigger here. The documentation for this package actually says you only need to install one app, but in fact we need to install two. So uh let's go down to the very bottom here and let's add Wagtail, captcha, and above it, let's put captcha. So this one here So this one here comes from a package called Django Captcha. And we can see that in here, where is it? Django Recaptcha version 2. 0. 2. That's what this is depending on. And so we're just going to install that there. or rather enable it and the Wagtail Wagtail Recapture or Wagtail Captcha. This is the Wagtail package itself. So this one depends on this one, installs it with uh

pip install Wagtail Django CaptCha And we just need to make sure that both of them are enabled. So again, I know that the docs at this current time do not say that, but it should be mentioned that you do need captcha and you do need Wagtail Captcha. And next we actually need to set our recapture keys and one more additional setting to actually make this work. So uh somewhere inside of your base. py file, what you can do is do do do do do. Let's scroll down to the bottom here I guess. Wagtail settings, let's call this recapture settings. And I will There we go. Scroll that up so you can see it. And we need three settings. So we need Recapture

Public Key. We need Recapture Secret Key. This is what we got from Google. And we also need no captcha and I'll explain that one in just a second. So our public key is going to be a string and If you don't want to put this into a string, you could put this into some sort of environmental variable and uh get the environmental variable whatever method you like. I'm just gonna throw this into a string uh because Because we have a goal for this video, and that is to get a capture up and running. The recapture secret key is going to be, I'm going to go back to this file here, grab this secret key, copy that. Throw that into a string. And lastly, we have no captcha.

And what no captcha means Do we show the capture or not? And I actually don't know the reason behind this one. I just know that this one works. Is if you put no capture is equal to true, then your Google Recapture V2, the one that we got API credentials for, will work. Otherwise, without this, I find it doesn't work. That may may be situational, but I found that uh after installing this package several of several times It's just sort of a necessary thing that you need. Okay, save that file and let's go into our terminal and let's do python manage. py run server. Alright, and this is throwing me a little error here.

It says uh recapture private key or recapture public key is making use of Google test keys. Uh okay, um so this is a problem. And let's just live debug this. Uh recapture private key. Is that what we have in here? No, we got secret key. This is supposed to be private key. Private key. Let's save and refresh. There we go. Little typo, my bad. Was working with stripe and it's called a secret key in Stripe, so uh forgive the mistake there So now if we open up localhost port 8000 slash admin, we will have our admin in here. And okay, so we have our We've got a website. We have a contact form in here, so let's edit this contact form. And you can see that we have a name, an email, and a message.

So let's view this live and see what this looks like. So we have a regular contact form. In the last lesson, uh behind the scenes, I did a little bit of CSS styling. That's why we see this sort of I'm not gonna say nicely formatted, but it's formatted nicer than it was before. And there's nothing fancy here. This is a regular form. And we can see that our captcha actually doesn't show up at all. So what we need to do is we need to open up our editor and let's go find our contact app and in our models. We have a contact page which is an abstract email form. And what we need to do here is we need to change this from an abstract email form to a Wagtail capture email

form. And we also need to import that. So let's import that right here. From Wagtail Captcha. models import Wagtail Capture email form Let's save and no module named WagtailCapcha. model. It's models. No issues. Life looks okay. Let's go ahead and Ta -da! There it is! And all we have to do is check this box and we can submit our form as humans instead of robots. And honestly, that's all there is to this. So what I'm going to do is I'm actually going to take learnwagtail.

com off of this API and I'm going to leave this as localhost so that you can use this in your own localhost settings Just don't forget to change this in production to whatever your public and your private keys are going to be. So you're going to have to go and set up your own RecapTcha account, which is totally fine. It only took a few seconds to set up anyways Lo and behold, we have RecapTcha, everyone. So within 15-ish minutes, I suppose we actually got a recapture up and running so that our website's not getting spammed by bots anymore This is actually a super super fantastic way to protect yourself from sending too many emails, getting caught in spam traps, and really just being annoyed with bots trying to submit and fish you all the time. As always, my name is Caleb Tollen.

I'm the voice behind the video. I'm an author on learnwagtail. com where you can find all of these videos. If you like this video, don't forget you can share, you can subscribe, and you can comment. Tell me what you liked about this video. I love hearing from everybody. And don't forget you can always check out the source code on github. com. I'll leave the description down below And the link to the repo that we're using, the package that we're using, can be found at github. com slash springload slash wagtail dash Django dash recapture. And that is again that is a spring load made package. They maintain it and it's really, really good. But if you have more questions about setup or installation, you can always go over there. They have pretty good installation documentation.

It's also based on another Django package called uh Django Recapture. And that one also has good documentation. So you'll be totally covered to use either repo for Uh learning more about how to add recapture to your website. Thanks for tuning in and I'll see you in the next video