# Quizell

The [Clearout Form Guard](/form-guard/overview.md) supports the **simple integration of real-time validation on** [**Quizell**](https://quizell.com/) **quizzes and forms**. Alongside **email verification**, Form Guard also validates **phone numbers** and **names** at the point of entry, ensuring every lead captured through your Quizell quizzes is accurate, reachable, and genuine.

By verifying leads in real-time, Form Guard helps you **capture only high-quality leads**, **improve email  deliverability**, and **drive stronger engagement** from your Quizell lead pages, keeping your CRM and marketing lists clean from the very first submission.

## How It Works

{% embed url="<https://youtu.be/nNpYztdWdhI?si=1MmEQfrSP3QJXeWW>" %}

{% stepper %}
{% step %}

### Prepare your Quizell quiz

Log in to [**Quizell**](https://app.quizell.com/login) and either **edit an existing quiz** or **create a new one**.

<div data-with-frame="true"><figure><img src="/files/463xcqAmloJRWXYbUDg7" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Since Quizell uses non-standard HTML tags for its \*\<FORM/>\* container and the name input field does not use a standard HTML name attribute, the setup requires custom configurations to help Form Guard to detect and validate fields correctly.
{% endhint %}
{% endstep %}

{% step %}

### Enable Custom CSS

On the left side panel, click on the **"Code"** button and toggle **"Enable CSS"** to active. Click **"Save"** and refresh the page.

<div data-with-frame="true"><figure><img src="/files/DvvbbSwj5Cyn2PRDDWaB" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### Set up your Lead Page

In the form builder, navigate to the **Lead Page** step and add the necessary fields (for example, **Email**, **Name**, and **Phone**).

<div data-with-frame="true"><figure><img src="/files/gcIFCCm0jcqVHLnYZrPI" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### Assign a custom class to the Name field

Select the **Name** field and set the **"Custom Class"** to `clearout_name`.

<div data-with-frame="true"><figure><img src="/files/rgPVhUtBedEIuqSx5pto" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Since **Name is not a standard field** in Quizell's form structure, assigning a custom class helps Form Guard correctly target and validate it.
{% endhint %}
{% endstep %}

{% step %}

### Create a Form Guard

Log in to your **Clearout Dashboard**, navigate to [**Form Guard**](https://app.clearout.io/form-guard/list), and click **"Create Guard"**. Give it a **name** and a **suitable description**, then click **Continue**.

<figure><img src="/files/ek5ZfmT1iGvdneVunNKU" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Configure validation settings

On the validation settings page, enable all the validations you need.

<div data-with-frame="true"><figure><img src="/files/ioSdNoztf6W0ro0Z6ydf" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
You can revisit this page anytime to customise your validation settings.
{% endhint %}
{% endstep %}

{% step %}

### Configure the Name field selector

If you have enabled **name validation**, click on **"Name"** and select **"Custom"** under **"Name Field Selection"**. Enter the following selector:

```javascript
div.clearout_name input
```

<div data-with-frame="true"><figure><img src="/files/LVMjChPEob7GYAiTZHSM" alt=""><figcaption></figcaption></figure></div>

Then click **Next**.
{% endstep %}

{% step %}

### Configure Advanced settings

On the **Advanced settings** page, select **"Custom"** under **"On Ready hook"** and enter the following code:

```javascript
window.clearout.options.form_discovery_duration = -1
window.clearout.options.form_elements = [
  {
    selector: 'div.quizell-page-main',
    options: { submit_button_selector: 'button.quizell-nextButton' }
  }
]
```

<div data-with-frame="true"><figure><img src="/files/AsCoqYDyKMcAUgK4cLb2" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Since Quizell uses a non-standard form structure, we explicitly point Form Guard to the **form container** and the **submit button** using these jQuery selectors.
{% endhint %}
{% endstep %}

{% step %}

### Generate and copy the snippet

Click **"Create"** and then copy the generated **Code Snippet**.

<div data-with-frame="true"><figure><img src="/files/0CpQL0gts2IaCg6zJD39" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### Embed the snippet in Quizell

Go back to the Quizell form builder and insert a **"Custom Script"** block. Paste the contents of the snippet you just copied.

<div data-with-frame="true"><figure><img src="/files/gsA03zMfU6yAeBKgRXQL" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/DPdq1T8uTFVcReKIC1PC" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Make sure to **remove the `<script>` and `</script>` tags** before saving — Quizell's Custom Script block does not need them.
{% endhint %}

Then click **"Compile and save"**.
{% endstep %}

{% step %}

### Save and preview

**Save** the quiz and **Preview** it to test that Form Guard's real-time validation is working correctly on your form fields.

<div data-with-frame="true"><figure><img src="/files/B5wGXdiVg8ZhZovbs81i" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### Verify the validation behaviour

A **tick** or **cross** mark will appear next to each field based on the validation outcome. The form will be **prevented from submitting** until all entered data is valid.

<div data-with-frame="true"><figure><img src="/files/baZ9txLGuRPaGo4NYAAC" alt=""><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

Integrating Quizell quizzes with the Clearout Form Guard adds caliber to your lead capture flow, ensuring only verified, high-quality leads make it into your CRM or email list.

## Customising Validation Settings

You can fine-tune how Form Guard validates each field type from the **Settings** page of your Guard. The validations can be enabled, disabled, or configured individually based on your lead quality requirements:

* [**Email Validation**](/form-guard/email-field-validation.md) — control checks for disposable, role-based, spam-trap, gibberish, and free email addresses, along with typo suggestions.
* [**Name Validation**](/form-guard/name-field-validation.md) — detect gibberish, fake, or incomplete names entered into the Name field.
* [**Phone Validation**](/form-guard/phone-field-validation.md) — verify phone number format, country, and line type to filter out invalid entries.

These settings can be updated at any time, and the changes take effect immediately without needing to re-embed the snippet.


---

# 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/integrations/forms/quizell.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.