Displaying WordPress login and registration forms together on a single page provides a seamless user experience for engagement and conversion. This also allows new users to quickly sign up while simplifying the navigation to log in easily.
Let’s look at how you can implement this solution using the User Registration plugin.
Prerequisite:
☑️ User Registration plugin installed and activated on active WordPress site (Free or Pro)
☑️ Registration Form (Installed at the time of User Registration plugin activation)
☑️ Login Form (Installed at the time of User Registration plugin activation)
Here’s a video guide to display WordPress login and registration form together.
How to Display WordPress User Registration and Login Forms Together? #
At the time of User Registration plugin activation, you’ll be asked to install the registration and login page. So, registration and login forms will be automatically added to the respective page.
Hence, you’ll have a user registration page and login page with individual forms. Meanwhile, you can tweak these settings by switching between registration and login forms on a single page.
The User Registration plugin for WordPress provides a simple shortcode to display the registration and login forms side by side on a single page. Here’s how:
Step 1: Create a New WordPress Registration and Login Page to Display Forms #
You first need to create the page where you want to display the registration and login form. For that, visit your WordPress dashboard and navigate to Pages > Add New Page.
Give an appropriate title to the page and save the page.
If you have an existing page where you have decided to show these forms, you can ignore this step.
Step 2: Combine Registration and Login Form Using a Shortcode #
To add the registration form together with the login form, insert the shortcode given below into the new page using the page editor:
[user_registration_my_account form_id="5"] In the above shortcode, we have used a random form ID as 5, assuming it to be the registration form ID.
Now, you need to replace the form ID in the above shortcode with your registration form ID. Open your dashboard in a new tab, and you can find the form ID through User Registration > All Forms > Registration Forms.
Look for the registration form that you want to display and note/copy its ID.
Now, go to the page where you had pasted the above shortcode. In the form ID, replace the dummy ID with your registration form ID.
Publish the page after you add the necessary details, and you’re good to go.
The User Registration plugin has tons of shortcodes that you can use. These shortcodes help to display different entities of the form or the form itself. You can access these shortcodes through User Registration > Help > Shortcodes.
Final Frontend View of WordPress Registration and Login Forms #
At the frontend, you’ll see the login and registration form together in a similar way as shown below:
You can customize these forms using style customizer.
Best Practices: #
- Add a Strong CTA in the above forms
- Enable reCAPTCHA to prevent spam registration
Get More with User Registration Pro: #
✔️ Advanced form fields and field customization
✔️ Allow users to log in with social platforms like Facebook, LinkedIn, and more.
✔️ Integrate two-factor authentication.
✔️ Premium users get Premium Support with high-priority
