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.
In This Article
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:
- 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.
- 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.
- 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.
In the paragraph above… “Once the pre-made form template loads, most of the work is done for you, the username and password fields are already on the form.”
My Question: How is the password first established? In this type of form, do I create one password for all users? Thus only giving out the password to a pre-approved group of people.
Hey Frank – Great question! Once you’ve installed and configured the login form, a site visitor would have to select their own unique password when they register to your site. They’ll need this password the next time they need to log into your site.
If you need any further help on this please feel welcome to reach out to our support team.
I hope this helps! π
How can a 2FA field be added to the login form?
Hey Chris- Thanks for reaching out!
Currently, we do not have integration with 2 Factor Authentication. I do agree it would be super helpful, though. I’ve made a note of the feature request and we’ll keep it on our radar as we plan out our roadmap for the future.
If you have any questions, please feel free to get in touch with our team.
Thanks π
I followed your instructions and I can see the form on the page I created in preview but when I publish and go to the actual page the page title appears but the login form is not there. Any clues as to what might be wrong ?
Hi Rafik! It sounds like you may have the “Hide the form if a user is already logged in” option enabled. Could you try viewing your login page from a different browser or logging out of your WordPress site first?
I hope this helps to clarify π If you have any further questions about this, please contact us if you have an active subscription. If you do not, donβt hesitate to drop us some questions in our support forums.
Hi, it says above ” Allow users to reset their passwords by including a link on the form” but I don’t see any instructions on how to add that forgot your password link to the form, it’s not mentioned again in the whole article and i can’t find it in WP Forms form builder. i can’t use the login form without a forgot password link. I don’t see it as a fancy field to drag nor do i see it as a checkbox or option anywhere in WP forms and it is not showing up as a default part of the WP forms template. How do i do this? Thank you!
Hi Kato! We have another article that provides details on how to add the “Forgot your Password?” link here. Please take a look π
I hope this helps to clarify π If you have any further questions about this, please contact us if you have an active subscription. If you do not, donβt hesitate to drop us some questions in our support forums.