> ## Documentation Index
> Fetch the complete documentation index at: https://docs.withsurface.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Enable Cloudflare Turnstile

> Learn how to enable **Cloudflare Turnstile** and add the widget to your Surface Form to protect your forms from spam and abuse.

## Step 1: Navigate to Cloudflare Turnstile

<Frame>
  <img className="block" src="https://mintcdn.com/surfacelabs/OUhFp3alOSURpecK/images/cf-turnstile/1.png?fit=max&auto=format&n=OUhFp3alOSURpecK&q=85&s=70e0646109a74fcce877acf011941b5c" alt="Cloudflare Turnstile dashboard" width="2678" height="1490" data-path="images/cf-turnstile/1.png" />
</Frame>

1. Login to [Cloudflare Dashboard](https://dash.cloudflare.com/)
2. Navigate to **Protect & Connect > Application security > Turnstile**

## Step 2: Add New Widget

<Frame>
  <img className="block" src="https://mintcdn.com/surfacelabs/OUhFp3alOSURpecK/images/cf-turnstile/2.png?fit=max&auto=format&n=OUhFp3alOSURpecK&q=85&s=8bd1cc0162e49e0ce9ece9eb5a10ec4a" alt="Add new Turnstile widget" width="2678" height="1490" data-path="images/cf-turnstile/2.png" />
</Frame>

Click on **Add new widget** to create a new Turnstile widget.

## Step 3: Configure Widget Settings

<Frame>
  <img className="block" src="https://mintcdn.com/surfacelabs/OUhFp3alOSURpecK/images/cf-turnstile/3.png?fit=max&auto=format&n=OUhFp3alOSURpecK&q=85&s=dec422c4c360b6e5a655fff1d6483d61" alt="Turnstile widget configuration" width="2678" height="1490" data-path="images/cf-turnstile/3.png" />
</Frame>

1. Set up the widget configurations
2. Add `forms.withsurface.com` in the **Hostnames** field for the widget
3. Click `Add` button to add the host

## Step 4: Create Widget and Copy Keys

<Frame>
  <img className="block" src="https://mintcdn.com/surfacelabs/OUhFp3alOSURpecK/images/cf-turnstile/4.png?fit=max&auto=format&n=OUhFp3alOSURpecK&q=85&s=9475361bfe96e5710c8eab5f034d4d98" alt="Turnstile widget created with keys" width="2678" height="1676" data-path="images/cf-turnstile/4.png" />
</Frame>

1. Click **Create** to create the widget
2. After creating the widget, copy the **Site Key** and **Secret Key**
   * These keys will be used to configure Turnstile in your Surface Form settings

## Step 5: Configure Turnstile in Surface Form Settings

<Frame>
  <img className="block" src="https://mintcdn.com/surfacelabs/OUhFp3alOSURpecK/images/cf-turnstile/5.png?fit=max&auto=format&n=OUhFp3alOSURpecK&q=85&s=a747f98811150423a460c4baae9252e1" alt="Surface form Cloudflare Turnstile settings" width="2678" height="1676" data-path="images/cf-turnstile/5.png" />
</Frame>

1. Navigate to your Surface Form settings page
2. Go to **Cloudflare Turnstile** section
3. Paste the **Site Key** and **Secret Key** that you copied in Step 4
4. Click **Save** to save the settings

## Step 6: Add Turnstile Widget to Your Form

<Frame>
  <img className="block" src="https://mintcdn.com/surfacelabs/OUhFp3alOSURpecK/images/cf-turnstile/6.png?fit=max&auto=format&n=OUhFp3alOSURpecK&q=85&s=87596e21c9260ee7946dfa52defa41db" alt="Add Turnstile widget component to form" width="2400" height="1250" data-path="images/cf-turnstile/6.png" />
</Frame>

1. In the Form Builder, navigate to the step where you want to add the Turnstile widget
2. Click **+ Add component** or **Copy existing component**
3. Select the **Turnstile** widget component from the component list
4. The Turnstile widget will now appear in your form and will be validated when users submit the form