How to setup Both Email and Phone Verification Add-on using the OTP Verification plugin?
Overview
The Email and Phone Add-on ensures secure user authentication by verifying phone numbers and email addresses simultaneously. Before submitting a form, users must enter an OTP (One-Time Password) sent to their registered phone and email, adding an extra layer of security to prevent unauthorized access. By confirming the authenticity of contact information, this add-on helps protect data integrity and builds user trust.
This add-on is compatible with popular forms like Gravity Form, Elementor Pro Form, WooCommerce Registration Form, and WooCommerce Checkout forms, and it makes it simple to enable OTP verification across all these forms. This guide will walk you through the steps to set up OTP Verification for your forms effortlessly.
Pre-requisites : Download And Installation
- To configure OTP Verification on Both Email and Phone Verification Add-on, you will need to install the miniOrange WordPress OTP Verification plugin.
Note: If you have any additional questions or further concerns, please don't hesitate to reach out. You can always drop an email to our support team at mfasupport@xecurify.com and we'll be happy to assist you.
Configuration Steps
Follow these steps to setup OTP Verification on the both Email and Phone Verification Add-on.
Step 1: Setup Both Email and Phone Verification Add-on
- Go to the Add-ons tab in the OTP Verification plugin from the left side menu.
- You can see all OTP Verification Add-ons.
- From that select Both Email and Phone Verification Add-on and click on the Settings button.
Step 2: Setup Both Email and Phone Verification on Forms.
Follow the following steps to setup Both Email and Phone Verification on forms.
Select your Form:
Setup Both Email and Phone Verification on WooCommerce Registration Form.
- Select this checkbox to enable OTP Verification on both Phone and Email.
- Select the WooCommerce Registration Form from the dropdown.
- Go to the WooCommerce Registration Form and inspect it.
- Make a note of the Email field ID and Phone field ID from the code.
- Go to the Add-on settings page and enter the Form ID, Email field ID, and Phone Field ID into the respective field.
- Go to the WooCommerce Registration Form and inspect the Text field.
- Make a note of the Text field class and Button class from the code.
- Go to the Add-on settings page and enter the Button class, and Text Field class into the respective field.
- Then, click on the Save Settings button to save settings.
- Go to your WooCommerce Registration form Page. OTP verification is enabled for both phone and email, requiring users to verify both.
- Fill in all the necessary form fields and click on the Send OTP button.
- Enter the OTP that you received in your email in the Verification code field.
- Click on the Verify OTP button to verify your email.
- You have successfully verified your email on the WooCommerce Registration Form.
- Select your country code from the dropdown menu and enter your Phone number.
- Then, click on the Send OTP button.
- Enter the OTP that you received on your phone in the Verification code field.
- Click on the Verify OTP button to verify your Phone.
- You have successfully verified your Phone using the WooCommerce Registration Form.
- Click on the Register button to Register the form.
Setup Both Email and Phone Verification on WooCommerce Checkout Form - Classic Form
- Select this checkbox to enable OTP Verification on both Phone and Email.
- Select the WooCommerce Checkout Form from the dropdown.
- Go to the WooCommerce Checkout Form and inspect it.
- Make a note of the Email field ID and Phone field ID from the code.
- Go to the Add-on settings page and enter the Form ID, Email field ID, and Phone Field ID into the respective field.
- Go to the WooCommerce Checkout Form and inspect the Text field.
- Make a note of the Text field class and Button class from the code.
- Go to the Add-on settings page and enter the Button class, and Text Field class into the respective field.
- Then, click on the Save Settings button to save settings.
- Go to the WooCommerce Checkout form. OTP verification is enabled for both phone and email, requiring users to verify both.
- Fill out all the necessary fields.
- Select your country code from the dropdown, and enter your Phone number.
- Then, click on the Send OTP button.
- Enter the OTP that you received on your Phone in the Verification code field.
- Click on the Verify OTP button to verify your phone.
- You have successfully verified your phone on the WooCommerce Checkout Form.
- Enter your Email ID and click on the Send OTP button.
- Enter the OTP that you received on your email in the Verification code field.
- Click on the Verify OTP button to verify your email.
- You have successfully verified your Email using the WooCommerce Checkout Form.
- Then, click on the Place Order button to place the order.
Setup Both Email and Phone Verification on Elementor Pro Form.
- Select this checkbox to enable OTP Verification on both Phone and Email.
- Select the Elementor Pro Form from the dropdown.
- Go to the edit page of the Elementor Pro form.
- Navigate to Additional Options on the left side. Customers can input the Form ID in the field provided. Enter the form ID and make a note of it.
- Then, click on the Update button.
- Go to the Elementor Pro Form and inspect it.
- Make a note of the Email field ID and Phone field ID from the code.
- Go to the Add-on settings page and enter the Form ID, Email field ID, and Phone Field ID into the respective field.
- Go to the Elementor Pro Form and inspect the Text field.
- Make a note of the Text field class and Button class from the code.
- Go to the Add-on settings page and enter the Button class, and Text Field class into the respective field.
- Then, click on the Save Settings button to save settings.
- Go to your Elementor Pro Form Page. OTP verification is enabled for both phone and email, requiring users to verify both.
- Fill in all the necessary form fields and click on the Send OTP button.
- Enter the OTP that you received in your email in the Verification code field.
- Click on the Verify OTP button to verify your email.
- You have successfully verified your email on the Elementor Pro Form.
- Select your country code from the dropdown menu and enter your Phone number.
- Then, click on the Send OTP button.
- Enter the OTP that you received on your phone in the Verification code field.
- Click on the Verify OTP button to verify your Phone.
- You have successfully verified your Phone using the Elementor Pro Form.
- Click on the Submit button to submit the form.
Setup Both Email and Phone Verification on Gravity Form.
- Select this checkbox to enable OTP Verification on both Phone and Email.
- Select the Gravity Form from the dropdown.
- Go to the Gravity Form and inspect it.
- Make a note of the Email field ID and Phone field ID from the code.
- Go to the Add-on settings page and enter the Form ID, Email field ID, and Phone Field ID into the respective field.
- Go to the Gravity Form and inspect the Text field.
- Make a note of the Text field class and Button class from the code.
- Go to the Add-on settings page and enter the Button class, and Text Field class into the respective field.
- Then, click on the Save Settings button to save settings.
- Go to your Gravity Form Page. OTP verification is enabled for both phone and email, requiring users to verify both.
- Fill in all the necessary form fields and click on the Send OTP button.
- Enter the OTP that you received in your email in the Verification code field.
- Click on the Verify OTP button to verify your email.
- You have successfully verified your email on the Gravity Form.
- Select your country code from the dropdown menu and enter your Phone number.
- Then, click on the Send OTP button.
- Enter the OTP that you received on your phone in the Verification code field.
- Click on the Verify OTP button to verify your Phone.
- You have successfully verified your Phone using the Gravity Form.
- Click on the Submit button to submit the form.
