WordPress is an amazing platform for eCommerce, membership sites, courses within learning management systems, and other data-driven uses. This interactivity allows for customized user experiences and happier site visitors. Often when we develop sites with such interactivity, we want to show something other than the standard WordPress login form. We might even want to create a login form within a widget on the sidebar of a page or blog post.
The Ninja Forms User Management add-on has a number of features and tools that allow site owners to create custom registration forms, custom user account management forms, as well as login forms.
Unfortunately, hackers have a keen interest in creating automated bots to take advantage of these login forms, whether they’re targeting the standard wp-login.php page or a login form embedded as a widget on any page on your site.
We’re accustomed to protecting the administrative login page, but the user login pages are just as interesting for hackers. In some cases, logging into a site as a customer, member, or subscriber is almost as attractive. These types of logins can present a security risk if there is a plugin installed with a privilege escalation vulnerability. On poorly protected sites, logging in as a subscriber is all that an attacker needs to escalate their privileges to that of an administrator.
What is a brute force attack?
Brute force attacks, often called credential-stuffing attacks, happen when a malicious attacker attempts to use lists of passwords to login. These lists are found in a breach from another compromised system or sometimes they are a dictionary file. Attackers use these collections of possible passwords to attempt entry to a website or other systems.
For WordPress sites, attackers attempt to use these stolen credentials to access the wp-admin portion of your site to take over the site for malicious purposes. These attackers may try to infect WordPress pages with malware, redirecting site visitors to malicious websites. Or, they may try to use a compromised site to host phishing pages to collect passwords for bank accounts, or even email accounts.
These attacks are always automated, so foiling them is fairly simple with some layered approaches to security.
Ninja Forms recommended layered security approach
The Ninja Form Honeypot
All forms created using Ninja Forms, even the free version, come with a honeypot. The Ninja Forms honeypot traps annoying spam and bot submissions much like a flytrap filled with honey traps annoying flies.
Google reCAPTCHA
Where bot traffic might be most intense, we also recommend using reCAPTCHA. We previously wrote about the benefits of reCAPTCHA v2 and v3, and advances in reCAPTCHA over the years. Today, we’re looking at specifically protecting login forms.
Protecting Login Forms with Ninja Forms and reCAPTCHA
First, you’ll want to ensure that you have User Management installed. This full featured add-on allows you to provide forms to allow users to register, manage their profile, and login to your WordPress site. The great thing about these tools is that you can set up a form anywhere you can publish a WordPress page or post. If you’re looking to create a login within a widget, it’s fairly simple to do so.
Let’s get started creating a beautiful public login form in a widget, protected with reCAPTCHA.
Install and activate the Ninja Forms User Management add-on
If you’re using the Ninja Forms Agency or Professional plan, you have this available as a part of your plan in the downloads area of your account. For those using the Ninja Forms Personal plan, you can purchase User Management add-on à la carte at a 20% discount.
Download the add-on zip file, and upload it to your website. Activate it with your license number, also available in the license area of your account.
Once activated, you’ll see three new options in the Ninja Forms area of your WordPress site: Login Form, Register User, and Update Profile.
Set up reCAPTCHA
Follow our recommendations for setting up reCAPTCHA for Ninja Forms as outlined here. If you haven’t used reCAPTCHA before, you’ll want to ensure you’ve turned off caching, and that you set up your account with Google reCAPTCHA where you can obtain your reCAPTCHA site key and secret key. You’ll enter these into your Ninja Forms settings where they are available to all of your forms, whether you’re using Ninja Forms free, the Agency, Professional, or Personal plan.
Create the Login Form
Now that you’ve got reCAPTCHA ready to use for all of your forms, let’s create the login form. From your Ninja Forms dashboard, click “Add New” and then choose “Login Form.” Your login form will automatically populate a username and password field. If you’re having users login using email addresses, you can change the label of the field to “Email” instead of “Username.”
Next, click the button on the lower right hand side to add a new field. When the sidebar opens, scroll to the “Miscellaneous Fields” at the bottom and choose reCAPTCHA. Drag that to the form.
If you’re using reCAPTCHA v2, you can customize the reCAPTCHA to either use visible or invisible reCAPTCHA.
For invisible reCAPTCHA v2, users will see a badge on the side of the screen.
When using reCAPTCHA v3
If you’re using reCAPTCHA v3, you’ll need to add that to your form as well. There are some benefits to using reCAPTCHA v3, namely that you have a little more control over how submissions are blocked. For more details, you can refer to our article about reCAPTCHA.
reCAPTCHA v3 does require an extra step. Next, go to the “Emails & Actions” section of your form. On this screen, you’re going to add another action to trigger reCAPTCHA v3.
Publish your secured login form. Now we’re ready to use it!
Populate the login form on your site using widgets
Next, let’s think about the best place to populate the login form for your users. The design and layout of your site will dictate where you might want to place the login form. If you’re doing usability testing, this may inform you of your placement.
For our example site, we plan to have a significant footer area on each public facing page of our membership site. We want our users to be able to find the login form quickly and easily, so we’re including it on every footer.
Widgets are a great way to add functionality or even text to your site and have it populated in numerous locations on your site.
To set up a login form in a widget, go to the Appearance > Widgets area of our wp-admin area. Let’s add the Ninja Forms block and our secured login form to our footer.
Save the widget.
Populate the login form on your site in a single page
Alternatively, you can populate your login form on a single page. This works much the same way on sites using the block editor. Find the Ninja Forms block, and choose which form you’d like to populate.
Test your login form
As always, test your login form with a variety of browsers to make sure it is working properly. Always ensure that you clear your browser’s cache before testing.
If you’re using the widget, you’ll want to test on a variety of pages on which the form is populated.
We recommend using a different browser than where you’re logged in. For example, if you’re logged into your site using Chrome, use Safari, Firefox, or Opera to test the login form.
Now your site’s login is protected by not only the Ninja Forms honeypot, but it also has additional protections with reCAPTCHA.
