# Overview

The Clearout **Form Guard** facilitates seamless real-time field validations on forms. Form Guard allows you to quickly collect all valid leads while visitors fill out forms, helping to prevent missed chances and stopping fake leads from getting into your **CRM** (Customer Relationship Management system) and keeping setup easy even for **non-developers**. 

<div data-with-frame="true"><figure><img src="/files/hBseJ4ZHKHbmVXVOrWo8" alt="Overview of Form Guard Real-Time Validation on Name, Phone number and Email address" width="362"><figcaption><p>Form Guard in Action. <a href="https://youtu.be/5T7ZalNoLFw?si=yYNqQhJTegxHl05S">Video version</a> </p></figcaption></figure></div>

## Supported Form Field Validators <a href="#supported-form-field-validators" id="supported-form-field-validators"></a>

<table><thead><tr><th width="174.9296875">Form Fields</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/LxUClVYtdMlYtXyxwSUJ"><strong>Email</strong></a></td><td>Validates email addresses for deliverability status and identifies business, disposable, role, and gibberish addresses.</td></tr><tr><td><a href="/pages/oQ43K99awC8WDpRhlK9N"><strong>Phone</strong></a></td><td>Validates phone numbers of all types for correct format, length, and structure.</td></tr><tr><td><a href="/pages/t7AVWn34CHS0givm8nnp"><strong>Name</strong></a></td><td>Validates a given name for profanity, gibberish, special characters, or numbers and disallows submission if found invalid.</td></tr></tbody></table>

## Create Your Form Guard

To create and configure a Form Guard, follow these steps using Clearout's Form Guard Creation Wizard:

{% stepper %}
{% step %}
Navigate to the [Form Guard](https://app.clearout.io/form-guard/lists).​
{% endstep %}

{% step %}
Click on Create Guard

<div data-with-frame="true"><figure><img src="/files/S1eFjtfjMVTY8zV4DVge" alt="Create Guard" width="563"><figcaption></figcaption></figure></div>

You can provide the guard a meaningful name and description. This will reveal credit usage across guards. It also lets you categorize lead sources by guard name to see activity breakdown on the [activities](https://app.clearout.io/activities) page.
{% endstep %}

{% step %}
Follow the step-by-step wizard to configure your Form Guard

Here, you can decide which of your form's fields need to be validated. You can also take into account advanced settings to stop submissions that are fake or from bots.

<figure><img src="/files/CGzZsDXRLRh89fnBiyE4" alt="Configure Form Guard Settings for Name, Phone Number and Email Validation" width="528"><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Generate a Form Guard code snippet.&#x20;

Once you configure the field-level validation and advanced settings, Form Guard will generate a JavaScript code snippet that you can embed into your form page. This code snippet will validate each form input in real time, preventing bad lead data from entering your CRM.

<div data-with-frame="true"><figure><img src="/files/fJllBHrLz76uQ64R3zP7" alt="Generate a Form Guard code snippet and Copy to validate on Forms" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**How is my Form Guard script protected from unauthorized use?**&#x20;

Form Guard only accepts validation requests from domains you've allowlisted in [Advanced Settings](/form-guard/advanced-settings.md#add-form-urls-optional). Requests from any other domain are rejected automatically, so your credits stay protected.
{% endhint %}
{% endstep %}

{% step %}
Installing Form Guard Script

Once your Form Guard code is generated, copy the snippet and paste it into the page containing your form. Form Guard will automatically load, detect your forms, and attach real-time validation to them. For other installation methods, see the section below.
{% endstep %}
{% endstepper %}

## Installing Form Guard Script <a href="#form-guard-live-demos" id="form-guard-live-demos"></a>

Form Guard can be installed on virtually any website or platform. Choose the installation method that matches your setup below.

* #### [Standard HTML Forms](#standard-html-forms-1)
* #### [WordPress](#wordpress-1)
* #### [Google Tag Manager (GTM)](#google-tag-manager-gtm-1)

{% hint style="success" %}
**Need a custom install?**&#x20;

If your setup requires custom configuration or doesn't fit the standard installation flow, reach out to our [support team](/help-and-support/how-to-work-with-support.md) and we'll help you get set up.
{% endhint %}

{% hint style="info" %}
**Note on Content Security Policy (CSP)**

If your site enforces a Content Security Policy, add the following directives so the Form Guard script can load and run:

* **`script-src`**: `https://clearout.io`
* **`connect-src`**: `https://api.clearout.io`
* **`img-src`**: `https://clearout.io`

The script behaves similarly to Google Analytics — if your CSP already permits GA, add Clearout the same way.
{% endhint %}

### Standard HTML Forms

For static sites or any page where you have direct access to the HTML, paste the Form Guard snippet inside the \<head> tag (preferred) or just before the closing \</body> tag.

Form Guard is designed to work reliably in either location. Placing it in the \<head> is recommended for the cleanest setup, but adding it before \</body> works just as well and can be a good choice if you're optimizing page load order.

### WordPress

WordPress users have two straightforward options for adding the Form Guard snippet.

You can edit your theme's header.php file directly and paste the snippet inside the \<head> section. Keep in mind that this approach may be overwritten when your theme updates, so it's best suited for custom or child themes.

Alternatively, and recommended for most users, install a header and footer scripts plugin such as WPCode or Insert Headers and Footers. These plugins let you add the snippet through the WordPress admin without touching theme files, and your script will persist across theme updates.

### Google Tag Manager (GTM)

If you manage multiple forms across your website, Google Tag Manager is the cleanest way to deploy Form Guard site-wide from a single dashboard.

{% stepper %}
{% step %}
Go to your [GTM dashboard](https://tagmanager.google.com/#/home)
{% endstep %}

{% step %}
Create a New Tag

<div data-with-frame="true"><figure><img src="/files/FFQjxlxA7guowWFZfIzP" alt="Site-wide Integration of Form Guard with Google Tag Manager"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Choose Tag Type as Custom HTML and Name the tag (eg, Clearout Form Guard)

<div data-with-frame="true"><figure><img src="/files/GVEHEJMSt8pGdAm6OFZU" alt="Choose tag type as &#x22;Custom HTML&#x22;"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Paste the entire Clearout’s Form Guard Snippet into the HTML box

<div data-with-frame="true"><figure><img src="/files/YxrsAlbfxx3VJ2zK46XK" alt="Add Form Guard Snippet in the &#x22;custom HTML&#x22;"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Choose when the Form Guard script is to be triggered (for example, All Pages). By default, Google Tag Manager is configured to trigger on all pages.

If you want more control over where Form Guard loads, you can customize this trigger to limit execution to specific pages or conditions.

<div data-with-frame="true"><figure><img src="/files/3qR09mIGzr4fHGnzqLe1" alt="Choose the trigger to Run Form Guard"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Once the configurations are completed, click Save and then Submit to publish the changes to your website.
{% endstep %}
{% endstepper %}

## Form Guard Live Demos <a href="#form-guard-live-demos" id="form-guard-live-demos"></a>

Use the **live demos** to see Form Guard in action on **HubSpot**, **Unbounce**, and **Leadpages** forms, and test how real-time validation behaves with valid, invalid, disposable, and gibberish email entries. This lets you preview the exact inline error messages and blocked submissions your visitors will see before deploying Form Guard on your forms.

<table><thead><tr><th width="212.68359375">Form Provider + Form Guard</th><th>What it shows</th></tr></thead><tbody><tr><td>HubSpot + Form Guard </td><td>Inline email, phone, and name validation checks on a HubSpot landing page form.​<br><a href="https://datacept-technologies-private-limited-47097729.hubspotpagebuilder.net/co-js-widget-3.0">Try Live Demo</a> </td></tr><tr><td>Unbounce + Form Guard </td><td>Real-time validation on a high-conversion Unbounce page​<br><a href="https://clearout.io/formguard/v3/demos/unbounce.html">Try Live Demo</a></td></tr><tr><td>Leadpages + Form Guard </td><td>Email verification on Leadpages opt-in and signup forms<br><a href="https://clearout.io/formguard/v3/demos/leadpages.html">Try Live Demo</a>​</td></tr></tbody></table>

{% hint style="info" %}
**Did you know?**&#x20;

* The **default configurations in the setup wizard will suffice** for the majority of standard web forms to enable real-time validation support.
* Changes to the **Form Guard settings take effect right away**. You **don't need to re-embed the code** snippet. (Don't forget to refresh the page to see the changes.)
* If you don't use Google reCaptcha, you can **turn on built-in bot detection**. <br>
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.clearout.io/form-guard/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.