Skip to main content

Adding ID Verification to Ninja Forms

You can add ID verification to your Ninja Forms on your WooCommerce website with just a few clicks.

An example WooCommerce / WordPress page that features a Ninja Form with an ID verification field that requires an ID check before the customer can submit the Ninja Form

Ninja Forms is a great plugin for creating custom forms to collect rich data from your customers. You can easily create a form to collect text, dates, and more. You can require ID verification to submit the form, and the ID photos and optional selfies from your customers will be verified and displayed within the Real ID plugin.

Prerequisites​

Before we get started, make sure you have these plugins installed on your WordPress site:

  1. WooCommerce
  2. Real ID
  3. Ninja Forms

Getting Started​

First, you'll need to activate Real ID to verify IDs with the Before Checkout flow. It just takes a few clicks, and this guide will show you how.

Activating Ninja Forms Developer Mode​

To create the ID verification field in your Ninja Form, you'll need to enable Development Mode in Ninja Forms. This will give us extra options to use when creating the form.

To enable developer mode, open the Ninja Forms Settings page:

Opening the Ninja Forms settings page from within WordPress

Then scroll down to the Advanced settings, and enable Developer Mode. Don't forget to click Save as well.

Enabling Dev Mode on Ninja Forms which allows you to modify your Ninja Forms in more technical ways such as include CSS classes on your form fields which is need for creating the ID verification field on your NinjaForm

Adding the ID Verification Field to Your Ninja Form​

Next, create a new Ninja Form, or edit your existing form. This will open the Ninja Form builder.

Within the builder, if you haven't yet, add a Submit field. This will allow forms to be submitted:

Adding a Submit button to a Ninja Form

Click the gear icon on the right-hand side of the Submit button to open its settings in the right-hand panel.

Then open the Display option and under the Container field, enter verify-id-prompt.

This change will add the CSS class .verify-id-prompt to the Submit button's HTML. This triggers Real ID to replace the Submit button with an ID verification prompt for unverified customers.

Adding Real ID verification to the submit button which will override the submit button until the customer is verified

Then click Done in the top-right corner to save these changes to the Submit button.

And that's it! Your form will now have an ID verification field. Customers will be required to verify their ID to submit the form.

ID verification won't show in the Ninja Form builder

If you don't see the ID verification prompt in the form builder in Ninja Forms, don't worry—this is normal.

The ID verification field will appear in the live form. Try it on a page in your WordPress site to view it.

Frequently Asked Questions​

Will ID verification show for already verified customers?​

No, the Submit button will appear for already verified customers, either if they're logged in or if their browser has been remembered.

Is this compatible with the blocks and/or shortcodes version of Ninja Forms?​

Yes, you can use this method of integrating Real ID using the shortcode or the blocks version of Ninja Forms in your WordPress pages or whereever shortcodes are supported.

Can I change the placement of the ID verification field?​

Yes, this example shows how to place ID verification at the very end of your form, just before submission. However, you can add the verify-id-prompt class to any field in your form. Real ID will replace that field with ID verification.

We recommend using the HTML field for this, so you can place an empty field or show a successfully verified message to your customer that's only shown after they verify their ID.

I'm still having trouble, can I get help?​

Of course! We're happy to help. Please contact us for assistance.