diff --git a/resources/views/components/turnstile.blade.php b/resources/views/components/turnstile.blade.php
index bc2c03e..9c1fb9f 100644
--- a/resources/views/components/turnstile.blade.php
+++ b/resources/views/components/turnstile.blade.php
@@ -1,4 +1,5 @@
 @php
+    $id = $getId();
     $statePath = $getStatePath();
     $fieldWrapperView = $getFieldWrapperView();
 
@@ -12,6 +13,21 @@
     <div x-data="{
             state: $wire.entangle('{{ $statePath }}').defer 
         }"
+        x-init="(() => {
+            let options= {
+                callback: function (token) {
+                    $wire.set('{{ $statePath }}', token)
+                },
+
+                errorCallback: function () {
+                    $wire.set('{{ $statePath }}', null)
+                },
+            }
+
+            window.onloadTurnstileCallback = () => {
+                turnstile.render($refs.turnstile, options)
+            }
+        })"
         wire:ignore
     >
         <div id="turnstile-widget"
@@ -19,29 +35,12 @@
             :data-theme="$theme"
             :data-language="$language"
             :data-size="$size"
+            x-ref="turnstile"
             >
         </div>
     </div>
 
     @push('scripts')
         <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" defer></script>
-        <script>
-            let options = {
-                callback: function(token) {
-                    window.Livewire
-                        .find('{{$this->id}}')
-                        .$set('{{$statePath}}', token);
-                },
-                errorCallback: function () {
-                    window.Livewire
-                        .find('{{$this->id}}')
-                        .$set('{{$statePath}}', 'error');
-                }
-            }
-
-            window.onloadTurnstileCallback = () => {
-                turnstile.render('#turnstile-widget', options)
-            }
-        </script>
     @endpush
 </x-dynamic-component>
\ No newline at end of file
diff --git a/src/Forms/Components/Turnstile.php b/src/Forms/Components/Turnstile.php
index 73df2e4..9f14ccf 100644
--- a/src/Forms/Components/Turnstile.php
+++ b/src/Forms/Components/Turnstile.php
@@ -3,9 +3,9 @@
 namespace Coderflex\FilamentTurnstile\Forms\Components;
 
 use Coderflex\LaravelTurnstile\Rules\TurnstileCheck;
-use Filament\Forms\Components\Field;
+use Filament\Forms\Components\TextInput;
 
-class Turnstile extends Field
+class Turnstile extends TextInput
 {
     protected string $viewIdentifier = 'turnstile';
 
diff --git a/tests/Fixtures/ContactUs.php b/tests/Fixtures/ContactUs.php
index c9675c7..533adb0 100644
--- a/tests/Fixtures/ContactUs.php
+++ b/tests/Fixtures/ContactUs.php
@@ -5,6 +5,7 @@
 use Coderflex\FilamentTurnstile\Forms\Components\Turnstile;
 use Coderflex\FilamentTurnstile\Tests\Models\Contact;
 use Filament\Actions\Action;
+use Filament\Actions\Concerns\InteractsWithActions;
 use Filament\Forms;
 use Filament\Forms\Form;
 use Filament\Pages\Concerns\InteractsWithFormActions;
@@ -13,6 +14,7 @@
 
 class ContactUs extends SimplePage
 {
+    use InteractsWithActions;
     use InteractsWithFormActions;
 
     public ?array $data = [];
@@ -42,8 +44,7 @@ protected function getForms(): array
                         Forms\Components\TextInput::make('content')
                             ->label('Content')
                             ->required(),
-                        Turnstile::make('turnstile')
-                            // ->id('cf-captcha-field')
+                        Turnstile::make('cf-captcha')
                             ->theme('auto'),
                     ])
             )
@@ -52,6 +53,11 @@ protected function getForms(): array
         ];
     }
 
+    public function send()
+    {
+        Contact::create($this->form->getState());
+    }
+
     /**
      * @return array<Action | ActionGroup>
      */
@@ -74,13 +80,6 @@ protected function hasFullWidthFormActions(): bool
         return true;
     }
 
-    public function send()
-    {
-        dd($this->form->getState());
-
-        Contact::create($this->form->getState());
-    }
-
     public function render(): View
     {
         return view('fixtures.contact-us');
diff --git a/tests/TestCase.php b/tests/TestCase.php
index 88d7551..0686c58 100644
--- a/tests/TestCase.php
+++ b/tests/TestCase.php
@@ -32,8 +32,6 @@ protected function setUp(): void
         );
 
         config()->set('app.key', '6rE9Nz59bGRbeMATftriyQjrpF7DcOQm');
-        config()->set('turnstile.turnstile_site_key', '2x00000000000000000000AB');
-        config()->set('turnstile.turnstile_secret_key', '2x0000000000000000000000000000000AA');
 
         $this->setCurrentFilamentPanel();
     }
diff --git a/tests/TurnstileTest.php b/tests/TurnstileTest.php
index 9a3540d..fc9490b 100644
--- a/tests/TurnstileTest.php
+++ b/tests/TurnstileTest.php
@@ -1,6 +1,8 @@
 <?php
 
 use Coderflex\FilamentTurnstile\Tests\Fixtures\ContactUs;
+use Coderflex\FilamentTurnstile\Tests\Models\Contact;
+use Illuminate\Support\Facades\Config;
 
 use function Pest\Livewire\livewire;
 
@@ -13,3 +15,51 @@
     livewire(ContactUs::class)
         ->assertFormFieldExists('cf-captcha', 'form');
 });
+
+it('can send a message', function () {
+    /**
+     * Setting Turnstile keys to always pass the request
+     *
+     * @see https://developers.cloudflare.com/turnstile/reference/testing/#dummy-sitekeys-and-secret-keys
+     */
+    Config::set('turnstile', [
+        'turnstile_site_key' => '1x00000000000000000000AA',
+        'turnstile_secret_key' => '1x0000000000000000000000000000000AA',
+    ]);
+
+    livewire(ContactUs::class)
+        ->fillForm([
+            'name' => 'John Doe',
+            'email' => 'john@example.com',
+            'content' => 'This is a simple message',
+        ])
+        ->call('send')
+        ->assertHasNoFormErrors();
+
+    expect(Contact::get())
+        ->toHaveCount(1);
+});
+
+it('cannot send a message', function () {
+    /**
+     * Setting Turnstile keys to always block the request
+     *
+     * @see https://developers.cloudflare.com/turnstile/reference/testing/#dummy-sitekeys-and-secret-keys
+     */
+    Config::set('turnstile', [
+        'turnstile_site_key' => '2x00000000000000000000AB',
+        'turnstile_secret_key' => '2x0000000000000000000000000000000AA',
+    ]);
+
+    livewire(ContactUs::class)
+        ->fillForm([
+            'name' => 'John Doe',
+            'email' => 'john@example.com',
+            'content' => 'This is a simple message',
+        ])
+        ->call('send')
+        ->assertHasFormErrors(['cf-captcha']);
+
+    expect(Contact::get())
+        ->toHaveCount(0);
+});