# Enable Cloudflare Turnstile



## Step 1: Navigate to Cloudflare Turnstile [#step-1-navigate-to-cloudflare-turnstile]

<Frame>
  <img className="block" src="/docs/images/cf-turnstile/1.png" alt="Cloudflare Turnstile dashboard" />
</Frame>

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

## Step 2: Add New Widget [#step-2-add-new-widget]

<Frame>
  <img className="block" src="/docs/images/cf-turnstile/2.png" alt="Add new Turnstile widget" />
</Frame>

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

## Step 3: Configure Widget Settings [#step-3-configure-widget-settings]

<Frame>
  <img className="block" src="/docs/images/cf-turnstile/3.png" alt="Turnstile widget configuration" />
</Frame>

1. Set up the widget configurations
2. In the **Hostnames** field, add `forms.withsurface.com` or the [verified custom domain](https://www.withsurface.com/docs/platform/traffic/custom-domains) used by your form
3. Click `Add` button to add the host

## Step 4: Create Widget and Copy Keys [#step-4-create-widget-and-copy-keys]

<Frame>
  <img className="block" src="/docs/images/cf-turnstile/4.png" alt="Turnstile widget created with keys" />
</Frame>

1. Click **Create** to create the widget
2. After creating the widget, copy the **Site Key** and **Secret Key**

## Step 5: Configure Turnstile in Surface Form Settings [#step-5-configure-turnstile-in-surface-form-settings]

<Frame>
  <img className="block" src="/docs/images/cf-turnstile/5.png" alt="Surface form Cloudflare Turnstile settings" />
</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 [#step-6-add-turnstile-widget-to-your-form]

<Frame>
  <img className="block" src="/docs/images/cf-turnstile/6.png" alt="Add Turnstile widget component to form" />
</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 widget now appears in your form and is checked when someone submits it