Want to make your WordPress forms more secure? I’ll show you how to do it using an easy verification code interface using a basic user registration form that you can embed into any page of your site.
Before we get into securing your forms, let’s cover some basics about how to build a custom login form.
Building a WordPress login form with Gravity Forms
Building a custom login form is easy to do. To start, you’ll of course need Gravity Forms and their User Registration Add-on. Once you have those installed and activated, it’s time to build your login form.
I’ll walk you through everything. Let’s get started!
Setting up the Gravity Forms User Registration Add-On
Embed a login form on your site using a shortcode
There are two ways to embed a login form on your site: using a shortcode or a widget. Let’s start with the shortcode. The User registration plugin adds some shortcode actions that make it easy to customize the form. The parameters are listed on their site, and you can start with an example they provide:
[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" /]Inserting that code in a shortcode block gives you a basic login form.
For the front end, you can easily customize the look of the block using WordPress’s built-in design tools.
Embed a login form on your site using a widget
If you still use widgets on your WordPress site, there’s an Add-On Login Widget available. You can customize this just like the shortcode version, but instead of adding parameters in code, you can adjust the settings using a simple UI.
Customizing your Gravity Forms login page
Once your basic shortcode or widget is in place, you can tweak, add, or remove different parameters, customizing the form for your needs. For example, you could use logged_in_message to display a custom message, or logged_in_avatar to show the logged in user’s avatar.
Setting up custom redirects
Another example of customizing your login form is including a redirect parameter that takes the user to a specific page when they successfully log in. A redirect can be a powerful marketing tool. For instance, you could redirect users to a landing page during a new product launch when they log in. Or if you have an e-learning site, students can be taken right to the lessons page upon login.
Integrating user registration with your login form
Of course, the User Registration add-on wouldn’t make sense if you couldn’t create a custom user registration form. Let’s do that now.
Create the form
Using Gravity Forms, start with a blank form — or, you can use an existing form if you like. There are a couple of required fields you’ll need to add:
- Username
As long as you’re creating this form, it’s a good idea to add Name and Password fields to make it a more complete registration.
That’s it on the form for now, but to make it work you need to create a feed.
Create a Feed
In your form editor, navigate to Settings → User Registration, then Click to Add New to get started. Configuring the feed is mostly intuitive, but here are some short explanations for the various settings:
Name
Give your feed a name that works for you, or leave it at the default.
Action
You have the option to either Create User or Update User. You have to choose one or the other for the form, but you can create additional forms and feeds if you want to combine the two functionalities on a single page. In this example, I chose Create User.
User Settings
These settings are fairly self-explanatory. Essentially you’re matching up fields in the feed with fields on your form.
User Meta
A completely optional setting that allows you to map form fields to meta values in the database. For example, you could create a registration_form key and match it with the value Form Title, which adds additional data to User Meta when they submit the form.
Additional Options
Here you can choose to send new account notifications via WordPress or through a form notification that you set up separately.
Note that when User Activation is disabled, an administrator will have to activate new accounts manually from the Pending Activations page.
Custom registration page
Want to bypass the default WordPress registration page for all new users? Create a new page and embed the registration form. Then head over to Forms → Settings → User Registration.
Click to enable the feature, then select your preferred registration page from the dropdown menu.
We’ve covered the basics of creating a login and user registration form to make this a comprehensive tutorial. Now let’s get into the meat of the article and talk about making your registration form more secure!
Making the registration form more secure
Adding a bit of extra security to your registration form is super easy to do. First, enter edit mode on your form. On the right under Advanced Fields, you’ll find the One-Time Password field. Drag it onto your form.
Under Source Field, you’ll decide if you want to send the verification code via Email or SMS. If you don’t see SMS as a choice in the dropdown, make sure you’ve added a Phone field to your form. You’ll also need to have your Twilio account fully configured as I mentioned earlier.
You can customize the code by entering the number of digits for the length, and the amount of time in minutes the code will expire.
Create your custom login solution with Gravity Forms
If you like, you can display both forms together on one page, creating a one-stop User Management page that includes the more secure OTP verification feature.
With Gravity Forms and One-Time Password, you can now create a login form that fits in better with your site’s branding and functionality, combined with a more secure user registration solution.
Stop the bogus form entries and verify your form submissions with One-Time Password!
