How To Add SMS Alert In Elementor Forms With OTP Vatification

A smart SMS notification feature can help you receive various important notifications in real time. Additionally, you can always receive updates for your website, such as notifications of new submissions, registrations, or user activity. As a result, even if you're not online, you may quickly generate the report at the end of the month.

Today we are going to cover how to integrate SMS Alert with Elementor Forms and enable OTP verification. Please note that elementor forms are available only in the Elementor Pro version.

Adding SMS Alert In Elementor

You must have a plugin installed in order to enable the SMS feature called SMS Alert Order Notification. This is an add-on for WooCommerce. With the help of this plugin, both the admin and the customer can receive SMS Alert notifications about their orders.

The WooCommerce Order SMS Notification plugin for WordPress is very useful when you want to get notified via SMS after placing an order. After an order is placed, both the buyer and the seller may receive SMS notifications. The admin interface makes it very simple to personalize the SMS notification choices.

On WordPress Dashboard, First, we will create or edit a page where we want to use the elementor form.

Then click on "Edit with Elementor button" on the top.

Under the Pro section, click on the form and drag it to the right-hand side.

Under the form fields, click on add item and select type as an SMS alert. This will add a new phone field to the form.

Then after clicking on Actions after submitting and adding a new SMS Alert action, You will notice a new SMS Alert settings option is now visible.

Here you can opt to enable OTP verification if you want the user to be verified, with an OTP before the form is submitted. Enter the text that you want to be sent to the user automatically as soon as the form is submitted.

If you want the message to be sent to admin as well, you need to enter the admin mobile number here in this field.

And also, you can customize the text to be sent to the admin here. To use variables in customer or admin messages, you can use the Elementor form field shortcodes.

You can find the shortcode for each field by simply double-clicking on the field,  and copying the shortcode from the advances tab.

Paste this shortcode in your message as required,  and these shortcodes will be automatically replaced with real values while sending the message.

Finally, click on Publish because the configuration is complete, and let's see the front-end demo of its working.

Here is an Elementor form that we have just created. Let's quickly fill it up and submit it.

As soon as I submit the form, I am prompted to enter an OTP, which I had just received on my mobile. Let's submit it.

After entering the OTP,  the form gets submitted, and I get another thank you message that I configured.

Wrapping Up

The possibilities with Elementor are endless. Following that, you can easily add SMS notifications on your website. Moreover, You can always check sent SMS logs in your SMS Alert Dashboard. We hope this tutorial was helpful to you, see you soon with more such informative tutorials in the future. Many thanks!