Adding One-Time Password to the Login Form Shortcode

The User Registration Add-On for Gravity Forms provides a handy shortcode to inject a simple login form into your pages and posts, but have you ever wanted to add an extra layer of security to that to make sure people logging in are really they say they are?

With the release of One-Time Password 3.0, you can now do so, adding either SMS or email one-time password verification to this login form.

Note: The Login Form requires both the Gravity Forms User Registration Add-On and also a Professional tier One-Time Password license.

Getting Started

To get started, navigate to the Forms > Settings > One-Time Password page and then over to the Login Form settings tab.

If you have access to this feature as part of your license tier, you’ll see a toggle to activate One-Time Password on the User Registration Add-On’s login form. If you you do not have access, you’ll be greeted with a message to upgrade your license.

With access to the feature, activating this toggle will add One-Time Password to the form, and allow you to further configure the specifics of how that will function.

Once toggled on, give your One-Time Password field the desired label, select if you’d like to use SMS or email for the one-time password, and then take a look below at the specific sections for your selected delivery method.

Setting Up Email Verification

The email related settings here will be populated by default values right away, so most of the initial configuration will already be most of the way along, but we’d recommend reviewing them and tweaking them based on your specific needs.

Remember that when sending emails from your site, it is important to use a valid From Address that your site and server are authorized to send from. Other settings available in this module are generally up to your specific preferences, but make sure you keep the default merge tag that will be replaced with the actual one-time password in whatever custom content you add.

Setting Up SMS Verification

Before getting started here, we’d recommend taking a look at our general documentation on setting up SMS verification in One-Time Password as it will run you through setting up a Twilio account and adding your API credentials to the product, which is required to use this delivery method on the User Registration Add-On’s login form.

Once you’re all set up with Twilio in the product’s settings, you’ll be able to configure this delivery method.

You’ll have a few settings at your disposal here, and they’re all pretty vitally important to ensuring the SMS is being processed and delivered successfully to your users.

User Phone Number

This will be the number the one-time password is sent to via SMS. As the login form shortcode does not supply a field for a phone number, this number will need to be sourced from existing user data you have on your site already.

To use this delivery method, you need to already be storing the user’s phone number in their user profile. Using this setting you will then instruct the product which user meta field you are already storing the phone number in.

There is no other way to source the user’s phone number with this delivery method, and the product itself will not handle collecting the number for you, your existing setup will have already needed to be collecting and storing the user’s phone number; we are simply pulling that already stored number based on the meta key you provide here.

The meta key selected in the screenshot below is just an example, if you are storing user phone numbers in your site’s user meta, it will likely be a differently named user meta key.

From Phone Number

This is a dropdown filled with a list of from numbers pulled directly in from your connected Twilio account. Choose the number appropriate for your needs.

Message

The actual SMS content going to the user’s phone number. Feel free to customize this to your needs, but we’d recommend keeping the content short and to the point, and be sure to always keep the default inserted merge tag somewhere in the message as that is what will be replaced with the actual one-time password when the SMS is sent to the user.

Wrapping Up

After configuring one of the delivery methods above and saving your settings, if all looks good, you can then embed the login form shortcode anywhere shortcodes are supported similar to the below.

[gravityform action="login" description="false" logged_in_message="Yay! You are logged in!" registration_link_text="Register for my super awesome site" forgot_password_text="Stop forgetting your password" /]

Now, when viewing the page or post the above shortcode is embedded on, you should see a One-Time Password related input in addition to the standard fields for username and password.