How to Embed a Login Form on Your WordPress Site

Do you want to easily embed a login form on your WordPress site? Having an embedded login form on your website boosts security and provides a better user experience. Even if you know nothing about coding, you can embed a beautiful login form in minutes!

In this tutorial, we’ll show you how to embed a login form on your WordPress site.

Create Your WordPress Login Form Now

What Is a Login Form?

A login form lets users sign in to your website using their username and password, so they can access content that’s hidden from regular visitors.

Using WPForms, you can easily create a custom login form in WordPress. With WPForms you can:

• Add, delete, or change any of the form fields using the drag & drop features
• Embed a login form on posts, pages, even the sidebar widget area
• Create a link to the user registration form for your site so people can sign up easily
• Allow users to reset their passwords by including a link on the form
• Auto-fill your users’ names and email addresses to improve your user’s experience

Custom login forms are just one of many types of WordPress forms you can create.

Why Embed a Login Form on Your WordPress Site?

WordPress is the best blogging platform because it’s so customizable. As a WordPress site owner, you want to keep your website secure, improve your user’s experience, and keep the same look of your brand.

So why not try embedding a login form on your WordPress site? Using a login form is a great idea for lots of reasons that include:

• Boosting User Engagement: You can embed a login form on a special page making it more convenient for users. But, that’s not all, you can use that page to make them aware of special sales, notices, and more.
• Improve Your Branding: Your users will feel more at ease when the login page looks like the other pages on your WordPress website. By creating a custom login form on WordPress, your site will look more professional and build user trust.
• Add a Layer of Security: You can use several types of security measures on your login page to reduce spam and prevent brute force attacks to your site. You can even change your WordPress login page.

How to Embed a Login Form on Your WordPress Site

Are you asking yourself how do I embed a login form on your WordPress site? Here is a step-by-step tutorial that shows you how.

Step 1: Embed a Login Form on WordPress

Using WPForms is the easiest way to embed a login form on your WordPress site. WPForms Pro has a tremendous variety of pre-built templates for every type of niche, business, and industry, including tons of different online form templates.

The first thing you’ll want to do is install and activate the WPForms plugin. For more details, check out this step-by-step guide on how to install a plugin on WordPress.

Next, you must install and activate the User Registration addon.

To do this, go to WPForms » Addon and find the one labeled User Registration Addon.

Click on Install Addon.

Now that the plugin is active, you must create a new form.

To do this, go to WPForms » Add New and name your form. Then, scroll down to the section labeled Select a Template and type “user login form” into the search bar. Then, click Use Template.

Once the pre-made form template loads, most of the work is done for you. The username and password fields are already in the form.

If you’d like, you can add additional fields to your form by dragging them from the left-hand panel to the right-hand panel.

Then, click on any field to make changes to it. You can also click on a form field and drag it up or down in the preview area to rearrange the order of your login form.

When your form looks the way you want it, click Save.

Step 2: Configure Your Form Settings

To start, go to Settings » General.

Here you can configure:

• Form Name: Rename your form here if you choose to.
• Form Description: Place some information in this field to describe the form.
• Tags: Organize your WordPress forms by adding tags.
• Submit Button Text: Customize the copy on the submit button.
• Submit Button Processing Text: Change the text that shows while your form is submitting.

Under the Advanced section, you’ll also find the following options:

• CSS Classes: Add custom CSS to your form or submit button.
• Enable Prefill by URL: Automatically fill some fields using a custom URL.
• Enable AJAX form submission: Enable AJAX settings with no page reload. This option is automatically turned on for all new forms.
• Disable storing entry information in WordPress: You can disable the storing of entry information and user details, such as IP addresses and user agents, in an effort to comply with GDPR requirements. In addition, check out our step-by-step instructions on how to add a GDPR agreement field to your simple contact form.

Next, go to the Spam Protection and Security settings.

Here the options include:

• Enable anti-spam protection: Stop contact form spam with the WPForms anti-spam token. The anti-spam setting will be automatically enabled on all forms you create in WPForms.
• Enable Akismet anti-spam protection: If you use the Akismet plugin, you can connect it to your form to prevent spam.
• Enable country filter: Block submissions from certain countries.
• Enable keyword filter: Prevent entries if they include specific words or phrases.

You can also set up your preferred CAPTCHA. See our form spam prevention guide for more details.

When you’re done, click Save.

Step 3: Configure Your Form Notifications

The notifications feature is off by default since getting an email each time someone logs in may fill your email inbox up quickly. But, if you would like to send out an email when someone logs in, it’s easy to set up. To learn more about this feature, see our documentation on setting up notifications.

If you want to keep the branding of your emails consistent, you can check out this guide on adding a custom header to your email template.

Step 4: Configure Your Form Confirmations

Form confirmations are messages that display to users once they’ve logged in to your website.

WPForms has 3 confirmation types to choose from:

1. Message: This is the default confirmation type in WPForms. When a user logs in, a simple message will appear welcoming them to your site, informing them of the next step they need to make, or offering an incentive. Check out some great success messages to help boost user happiness.
2. Show Page: This confirmation type will take your users to a specific web page on your site, like a landing page, sales page, or any other page on your WordPress website. You can check out our handy tutorial on redirecting customers to a “Thank You” page. While you’re at it, be sure to check out our article on creating effective Thank You pages.
3. Go to URL (Redirect): This option is for when you want to send site visitors to a specific page on your website or a different website.

Now, let’s see how to set up a simple form confirmation in WPForms so you can customize the message visitor to your site see when they log in using your embedded form.

To start, click on the Confirmations tab under Settings.

For our example, we’ll send users to our homepage after they log in.

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

Now, you’re ready to add your login form to your WordPress site.

Step 5: 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 add your forms in various locations, including your blog posts, pages, and even sidebar widgets.

To create a login page, add a new page in WordPress, or open an existing one for editing.

After that, add a new block and select WPForms.

The handy WPForms block will appear on the page. Click on the WPForms dropdown and pick the login form you want to embed into your page.

Now just Publish or Update the so your login form appears on your website.

Create a WordPress Login Widget

Want to make a WordPress login widget? WPForms makes it super easy to embed your login form in a widget.

To get started, go to Appearance » Widgets. The options here will vary depending on your theme. For our example, we’ll add a login form to our site’s sidebar.

First, add the WPForms block to your chosen widget area and select our login form just like we would when embedding it in a page.

Make sure you click Update at the top of the screen to save your widgets.

Go to your site and refresh the page, and you’ll see your login form embedded in the widget area sidebar.

Create Your WordPress Login Form Now

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.

So what are you waiting for? Get started with the most powerful WordPress forms plugin today. WPForms Pro includes a free login form that you can embed on your WordPress site and offers a 14-day money-back guarantee.

And if you enjoyed this post, follow us on Facebook and Twitter for more free WordPress tutorials.