How to Embed a Login Form on Your WordPress Site (No Code)

Do you want to learn how to easily embed a login form on your WordPress site? It might sound like it would be a complicated process requiring coding knowledge, but it’s actually very easy. No coding necessary!

Adding a login form to your website boosts security and provides a better user experience. After all, giving your users a page with a URL like yoursite.com/login is much easier to remember than integrating a login form in a less intuitive location.

In this post, I’m going to walk you through the process of creating and embedding a login form for your WordPress site. I’ll tell you everything you need to get started. Your custom login page will be up and running in 3 easy steps.

Create Your WordPress Form Now

How to Embed a Login Form on Your WordPress Site

In addition to an improved user experience, a custom login form can also add an extra layer of security to your site through the use of advanced anti-spam protection.

You can use it to display notices or offers to your users, as you see above. Plus, when you add a custom login form to your site, you create the page where it lives, so you can make sure it matches your site’s style and colors. This boosts your branding and creates a more cohesive site.

Let’s go!

Setup: What You’ll Need

Like I said, I’ll be using WPForms for this tutorial because it’s just so easy to use. If you’re using another platform or tool, you’re still welcome to follow along. I just can’t promise that it will be as easy as if you were using WPForms 🙂. If you want to register for WPForms, just use the links below!

Please take the time to set these up now because the tutorial assumes these steps are already done.

• WPForms Pro account
• User Registration addon installed and activated
• A page set up on your website where you’ll embed the login form

Need some help with how to install a WordPress plugin? This guide will show you how.

Not sure how to install and activate an addon in WPForms? Check out this doc.

Difficulty Level: Beginner

Step 1: Create Your Login Form

Before we can embed a login form, we have to create it. WPForms has 2,000+ form templates available. You can use them as-is or customize them as needed.

After you’ve installed WPForms and activated the User Registration addon, open your WordPress dashboard and navigate to WPForms » Add New.

Enter a name for your form. We’re going to use the User Login Form template, so if you search for that in the search box, it should come up. Hover over it and a Use Template button appears. Click that.

The form template will load in the form builder, and you’ll see 3 fields:

• Single Line Text for the username or email
• Password for the password
• Checkbox for ‘Remember Me’ (the field name will be hidden by default on the live form)

This template is very minimalistic. While you can add other fields to it if you like, I recommend that you keep it simple. Users only need to log in here.

One thing you might want to add to personalize your form is a logo. To do this, you can drag the Content field over to where you want the logo to appear. Remove the dummy text and upload your logo using the Add Media button. Then click Update Preview to see your changes reflected in the form builder.

When you’re happy with the form, click Save in the upper right corner.

Step 2: Configure Your Settings

For your login form to work the way you want it to, there are several settings, notifications, and confirmations that you need to configure. This is where the bulk of the work is in setting it up, but don’t worry. I’ll break each one down for you.

Configure Form Settings

With your form still open in the form builder, click on Settings in the navigation on the left side.

Some of the settings options are universal and others will depend on which addons you’ve installed. You should see User Registration in your list since you set that up at the start of this walkthrough.

You can click around these settings and make updates as you see fit, but there are a few I want to call out specifically for you to look at.

Spam Protection and Security

The first one to look at is the Spam Protection and Security settings. Make sure the toggle switch is set to Enable modern anti-spam protection.

You can stop contact form spam with the WPForms anti-spam protection. It’s built right into the plugin and works in the background so you don’t even have to think about it. Plus, you can use it alongside other anti-spam features like CAPTCHA.

If you scroll down a little further, you’ll see that you can enable filters. You can also get started setting up a CAPTCHA to add that extra layer of security to your login form. This is going to help you prevent form spam.

If you’ve previously set up one of these services, you’ll see the option to add it to your form. If not, you can start the setup process.

Form Notifications

Next, click on the Form Notifications option. You’ll see that notifications are off by default on this form template. You can change that if you want to, but you probably don’t want to receive an email every time someone logs in. If you do want to receive an email for some reason, you can enable that and make any adjustments to those settings.

Form Confirmations

When you’re comfortable with your form notification settings, click on the Form Confirmations option. Form confirmations are messages that are displayed to users once they’ve submitted a form. In this case, it’s the message a user will see once they’ve logged in to your website.

There are 3 different kinds of confirmations:

• Message – displays a simple message upon login
• Show Page – takes your user to a specific page of your choice on your site, such as a Thank You page.
• Go to URL (Redirect) – takes your user to a specific page that may or may not be on your website.

The Go to URL (Redirect) option should be the default if you’re using the form template that we selected above. Otherwise, you’ll need to make your selection about where you want to send your users.

For this example, let’s say you’re giving users access to the WordPress dashboard as blog contributors, so you want to send them to your /wp-admin page.

Once you’re done, click Save. For help with other confirmation types, see our documentation on setting up form confirmations.

User Registration

Finally, you should see an option for User Registration if you have that addon installed and activated. If you click on that, you’ll be able to set up a message to show to users who are already logged in.

You can use the default message the way it is or make changes. When you’re done, click Save.

The good news is that this was the most complicated step, and you made it through! Hopefully it only took you a few minutes to make all of the necessary settings adjustments.

Now all you have to do is add the form to your website.

Step 3: Add Your Login Form to Your WordPress Site

Once you’ve built your login form, you need to add it to your WordPress website. WPForms allows you to embed your forms in various locations, including your blog posts, pages, and even sidebar widgets.

Recall that in the setup section above, I recommended that you already have a page created to house your login form. I’m going to operate under the assumption that your page is set up, styled to your liking, contains all the content you need it to contain, and is just waiting for you to add the login form.

There are 3 ways to embed a form on your website with WPForms. For this tutorial, we’re going to use my favorite method: the WPForms embed button.

Why is it my favorite? It’s my favorite because not only is it stupid simple to use, but it’s also incredibly convenient. It’s right in your form builder, so there’s very little work involved in placing your login form where you want it.

When you’ve made all the adjustments to the form that you need to make, first click Save. Then click the Embed button.

When you click that, a modal window opens and gives you 2 options for embedding your form. You can either embed it in an existing page, or you can create a new page.

Since we’re assuming you that you have a page set up with the complete design you want, we’ll choose the Select Existing Page option.

When you click Select Existing Page, you’ll get a dropdown box of all the pages on your site. Scroll until you find the one that you created for your login form and select it.

Once you’ve made your selection, click Let’s Go! You’ll be taken directly to that page in your WordPress editor.

Once there, add a block on the page where you want to insert the form and search the block options for WPForms. Once you select it, it will open on your page editor.

From the dropdown list, select the form you wish to embed on the page. As soon as you select it, it appears on the page.

Once you do that, Publish your page if you haven’t yet, and Save your work.

Quick Note: If you try to visit the page after publishing it and you’re already logged in, you won’t see the login form. Instead, you’ll see whatever message you set up in the User Registration addon settings.

You can click on Log out if you want to get back to the form.

Congratulations! You’ve just created your own custom login form on your WordPress site, and it probably only took you a few minutes.

FAQ — Embed a Login Form

How can I ensure my form is secure?

It’s a good idea to use a CAPTCHA service or Akismet when creating an online form because they help prevent spam submissions. You should also always use a Secure Sockets Layer (SSL), meaning that your page’s URL will begin with HTTPS://. Finally, if you’re using WPForms, make sure you enable the modern anti-spam protection to run automatically in the background of your forms!

Will this work if I’m not using WPForms?

WPForms makes is so easy to complete this process quickly, and no coding skill is necessary. However, if you’d prefer to embed a login form on your site without using a plugin like WPForms, you can. It requires coding knowledge. You’d need to create a custom PHP file and use WordPress functions like wp_login_form().

Can I further customize the look of my form?

You can absolutely further customize the look of your form, no matter what it is. With WPForms’ form styles, beautiful forms are only a few clicks away. Check out our documentation to learn more about form styles.

Can I redirect the WordPress login page to my own custom login page?

Yes, you can redirect the WordPress login page to your own custom login page. Check out this resource to learn more about how to do that.

Next, Create a WordPress User Registration Form

And there it is! You now know exactly how to embed a login form on your WordPress site. Be sure to check out our post on the user registration and login forms for WordPress, which you can embed on your site as well.

You might also want to see our guide on WordPress login page plugins.

Create Your WordPress Form Now

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.