How to Create a Login Form in WordPress

Bringing tweaks to your default WordPress login form with brand identity can significantly increase user experience and trust. Instead of using the generic login screen, you can create a custom login form with a redirection URL, register link, and “Remember me” option.

With ElementsKit, you will get full control over design, functionality, and user flow to ensure you set up the best login experience for your users. From customizing fields to adding redirects and social login, everything is possible through a simple drag-and-drop interface.

So, in this guide, we’ll learn how to create a login form in WordPress with ElementsKit.

How to create a login form in WordPress

To create a custom login page in WordPress, you need to follow a few steps. The prerequisite is to install and activate the WordPress login plugin. Here we’re using ElementsKit for its smooth, user-friendly, and no-code interface. So, before following the method, install and activate the following tools:

• Elementor (grátis)
• ElementsKit (Free & Pro)
• WP Social (For enabling social authentication)

Now, follow the process below to learn how to create a login form in WordPress:

Step 1: Enable the login form widget

First, you have to enable the login form widget provided by ElementsKit. For that, navigate to ElementsKit → Widgets and turn on the “Login Form” widget. Then, press the “Save Changes” button.

Step 2: Add a page for the login form

In this step, visit the “Add Page” under the Pages tab and press the “Edit with Elementor” button. After redirecting to the Elementor editor, you have to follow the next step to create a custom login page in WordPress.

Step 3: Drag-and-drop Login Form widget.

On the Elementor editor, you have to search for the Login Form widget of ElementsKit and drag-and-drop it on the plus icon.

Step 4: Customize the login form.

Now, on the content tab, you will find customization options for form fields, field icons, buttons, reset password, links, and settings. For the form fields, you need to customize the following areas:

• Field Label: Select a label for your fields from the default, hide, or custom.
• Lost Password Instruction: Enter instructions for users who have forgotten their password.
• Show Placeholder: Enable this toggle to show a placeholder for form fields.
• Field Size: Select size for your form fields.
• Remember Me: Turn on this toggle button to show remember me text.
• Remember Me Text: Add label text for the checkbox.

Next, expand the icons tab and turn on the toggle button for the Fields Icons. After enabling, you will find the following fields for adjustments:

• Icon Divider: Enable to show a vertical line between the icon and text.
• Icons Position: Select a position for your icon from the dropdown option.
• Username Icon: Add icon for the username.
• Password Icon: Enter icon for password.
• Lost Icon: Pick an icon for lost password.

Then, move to the Button tab and customize the Button Text, Alignment, Button Size, Button Icon, Icon Position, and Icon Spacing.

After Button adjustments, edit the Alignment, Button Gap, Button Size, Reset Password, and Back to Login for the Reset Password form fields.

Now, you have to add links for lost password and registration. First, enable the toggle button for the Lost Password Link and edit Link Position and Lost Password Text. Then, to add a register link, turn on the toggle button for it and edit the Register Link Text, Link Position, Link Alignment, Text Before/After Link, Description, and Register URL.

At last, expand the Settings tab, and you have to edit:

• Password Toggle: Allow this toggle button to show the password.
• Remember Me Duration: Add how long users stay logged in.
• Redirect After Login: Enable redirecting users after login.
• Redirect URL: Enter the URL for user redirection.
• Hide for Logged-In Users: Disable to hide this option for logged-in users.
• Enable Social Login: Enable social login. For that, you have to install WP Social.

Step 5: Style customize login form

In the fifth step, edit color, typography, spacing, background type, border type, border radius, box shadow, padding, typography, etc. for the Labels, Fields, Fields Icon, Remember Me, Button, Reset Password, and Links.

At last, press the “Publish” button after wrapping up all customizations.

Perguntas frequentes

Do you need to code to integrate a WordPress custom login form?

No, you don’t have to code to integrate a login form using a friendly WordPress plugin like ElementsKit.

Can you redirect users after logging in to WordPress?

You can set the redirection URL from the form settings to send users to a particular page.

Why is the WordPress login form not working?

Common reasons for the WordPress login form not working include plugin conflicts, incorrect redirect settings, caching issues, or misconfigured login URLs.

How to add the “Remember me” option in the login form?

You can enable the “Remember me” toggle from the form settings and further customize the label and duration for it.

Can you add a registration form along with the login form?

Yes, you can enable a register link or create a separate registration form and connect it with your login page.

Empacotando

Creating a login form in WordPress is no longer a technical task. Using ElementsKit, you can add and customize a login form in a drag-and-drop interface. By setting up a tailored login page, you can improve user experience, keep visitors within your branded environment, and add essential features like redirects and social login. The key is to keep your login form clean, secure, and aligned with your website goals. So, create a login form with register, redirection, and remember me options to receive the best result from it.