Quizell

The Clearout Form Guard supports the simple integration of real-time validation on Quizell 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

1

Prepare your Quizell quiz

Log in to Quizell and either edit an existing quiz or create a new one.

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.

2

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.

3

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).

4

Assign a custom class to the Name field

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

Since Name is not a standard field in Quizell's form structure, assigning a custom class helps Form Guard correctly target and validate it.

5

Create a Form Guard

Log in to your Clearout Dashboard, navigate to Form Guard, and click "Create Guard". Give it a name and a suitable description, then click Continue.

6

Configure validation settings

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

You can revisit this page anytime to customise your validation settings.

7

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:

div.clearout_name input

Then click Next.

8

Configure Advanced settings

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

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

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.

9

Generate and copy the snippet

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

10

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.

Make sure to remove the <script> and </script> tags before saving — Quizell's Custom Script block does not need them.

Then click "Compile and save".

11

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.

12

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.

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 — control checks for disposable, role-based, spam-trap, gibberish, and free email addresses, along with typo suggestions.

• Name Validation — detect gibberish, fake, or incomplete names entered into the Name field.

• Phone Validation — 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.