Playing
06. Let’s customise things
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.
6 episodes• 18 mins•7 months ago
Overview
In this mini-course, we’ll walk through setting up and adding Cloudflare Turnstile to our Livewire forms.
Turnstile is a reCAPTCHA alternative, and thanks to a handy package, we’ll have it set up in no time, ready to apply to any form.
Once we’re done, we’ll take a look at configuring the widget and adding custom validation rules to display to the user if the verification fails.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!