Cloudflare Turnstile with Livewire
Playing
06. Let’s customise things

Episodes

0%
Your progress
  • Total: 18m
  • Played: 0m
  • Remaining: 18m
Join or sign in to track your progress

Transcript

00:00
So to customize the widget itself, this has a bunch of data properties that we can pass down to it.
00:06
Let's just look at two here. The first one is going to be the data action. This allows Cloudflare to categorize what you're doing. So in our case, we're signing up for a newsletter.
00:16
If you were to apply this to your login or register forms, you could set these as login and register. And that would just allow you under the Cloudflare analytics to see what has a bigger failure rate
00:27
or how many requests are being sent. For us, let's just go ahead and name this newsletter, and that nicely categorizes what we're doing with this widget.
00:35
The next one is going to be the theme. Our theme is light, so I'm just going to go ahead and change this over to a light theme.
00:41
And when we come over and give that a refresh, you can see that that has changed. So all of these options are in the documentation for this package.
00:48
So go ahead and check them out if you need to do anything else. The next thing we want to customize is the error that we get back.
00:55
So ideally, what we don't want to do is show any kind of response back from Cloudflare. So we saw that in the last episode. Let's go ahead and customize the validation messages
01:05
that we get back here. And again, because we're not using attributes and we can't here with this custom rule class, we're going to have to go ahead
01:12
and add in a method into our component here called messages. So we can do this for the email. I'm not going to bother doing that. Let's specifically do this for the turnstile response.
01:24
Now, the question is, what error message are we trying to handle? As an example, if we were doing this for the email address and the required field,
01:33
we would do email.required, and then we would say something like, please enter an email address. Now, we're not going to do that.
01:41
We want to do that for the turnstile response. If we take a look at this, the actual response that we get back is going to be the turnstile rule just here
01:51
and the fully qualified class name. So I'm just going to say something like invalid turnstile response. You can obviously change that to say,
02:00
it failed the capture or whatever you wanted to say. So this class here is this just here. And that allows us to map up the response we get back from this rule
02:09
and customize the error message here. So let's go ahead and try this out. And we can do the same thing for required as well, if we wanted to,
02:16
in which case you would do turnstile response.required. And that would work in exactly the same way as a normal rule. So in here, we would just put anything
02:26
and I'll let you decide. Okay, let's go ahead and just change this around again. So we don't have a wire model and let's go back over to our newsletter to index
02:34
and let's set this to ABC. And we should see our custom rule invalid turnstile response come through. So let's go over, give this a refresh.
02:43
We'll try and submit this off and hopefully we get a custom rule. Let's hit subscribe and there we go. Invalid turnstile response.
02:52
I'll let you go ahead and customize that to say whatever you want. For now though, let's just bring back the wire model here and let's go over and just make sure we get rid of this.
03:02
And there we go. Couple of customization options, both within our validation messages and also within the widget itself.

Episode summary

In this episode, we're diving into customizing both the Cloudflare Turnstile widget and the error messages it can generate for your users. We start off by looking at some of the widget's data properties, like data-action, which helps you categorize user activities (such as newsletter sign-ups, logins, or registrations) for better analytics in Cloudflare.

Next up, we tweak the visual theme of the widget—switching it to 'light' to match our page, but you can change it to whatever suits your site best. All of these customization options are documented for the package, so feel free to explore further.

After tweaking the widget, we move on to handling the validation error messages that your users might see. Instead of displaying the default Cloudflare responses, we set up a messages method in our component to define custom feedback. For example, when the Turnstile response is invalid, we set a more user-friendly message, like "Invalid turnstile response." You can personalize this to fit your application's tone or requirements. We also show how to use custom messages for required fields if you want even more control.

To wrap things up, we test these changes to make sure the custom messaging shows up as expected. At the end, you'll have learned how to make the widget and your form validation feel much more tailored to your exact needs, both visually and in terms of user feedback.

Episode discussion

No comments, yet. Be the first!