x-captcha-button Component

The x-captcha-button component serves as the submit button specifically designed for forms integrated with invisible-captcha services. This Laravel Blade component comes pre-packaged with a callback function; however, it can also be customized according to your needs.

Usage

To include the x-captcha-button, embed it in a form where you want the Submit button to appear:

<form action="" method="post">
    ...
    <x-captcha-button />
</form>

Custom Callback

The x-captcha-button component comes with a pre-defined callback function. But you can also customize it by adding your own functionality. To do that, simply define a callback method and bind it to the x-captcha-button:

<x-captcha-button callback="myCustomCallback" />

In this code snippet, myCustomCallback is a method in your Javascript that will be invoked when the Captcha button is clicked.

Styling

Being a Laravel component, x-captcha-button can be customized and styled as you wish. You can style it with Tailwind CSS or any other CSS framework of your preference.

Here is an example of using x-captcha-button with Tailwind CSS button styles:

<x-captcha-button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"/>

Turnstile Captcha Service

For applications leveraging Turnstile Captcha service, it's important to note that you do not need to use the x-captcha-button component. Turnstile is already configured within the key and is pre-setup for invisible captcha.

All you need to do is to set the key for invisible captcha and then use the x-captcha-container component. Here is how you do it:

<form action="" method="post">
    ...
    <x-captcha-container />
</form>

In the above code snippet, the x-captcha-container takes care of the necessary Turnstile configurations.