Say you want create or build a WordPress custom login form page with the below codepen login design. Continue reading to see how easy it is to do with ProfilePress plugin.

See the Pen Login Form by Agbonghama Collins (@collizo4sky) on CodePen.

First off, install and activate ProfilePress plugin.

Click the Login Form menu as show in the image below.

ProfilePress Menu

Click the Add New button.

Get started creating a login form

Enter a name for the login form in Template Name field.

Paste the HTML and CSS code for the login form into the Login Design and CSS Stylesheet textareas respectively.

HTML code for the login form

CSS for the login form

Note: Error messages generated by login forms powered by ProfilePress are wrapped in a div as follows <div class="profilepress-login-status"> thus the CSS class in the login stylesheet.

Click the Preview Design button to see how the login form will look.

Login form preview

For ProfilePress to make this a functional WordPress login form, the form components which in this case are the username, password text field and the submit button will have to be replaced by their ProfilePress shortcode equivalents

Below is the final revision of the Login form code.

<div id="sc-login">
  <h1>Log in</h1>
  <div class="sc-container">
     [login-username placeholder="Username"]
     [login-password placeholder="Password"]
     [login-submit value="Log In"]

Replace the HTML form code earlier entered into the Login Design textarea with the code above.

To make the login form available as a WordPress widget that can be drag and drop into a widgetized area / sidebar, check the Make this a Widget check box.

Creating WordPress login Widget

Save and then click the Back to Catalog button.

Copy the created login form shortcode, paste it to a WordPress page and publish.

Login form catalog

Preview the page and you will see the login form in action.

A live demo of this login form is available here.

We also have building a custom login form for WordPress covered here