mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

Add placeholder text to MemberPress login form fields

memberpress login form placeholder text cover

Introduction 

Overview

MemberPress is one of the most popular WordPress membership plugins on the market right now. And like many membership plugins, it uses a shortcode to generate the login form for members.

While shortcodes often let you define various parameters (e.g. post login redirect URL, colors, etc) there are often aspects of the shortcode output that you cannot control.

In today’s example, I’m going to show you how to add placeholder text to both the username and password input text fields on your MemberPress login form.

This is something you can’t control via shortcode paramaters so I’m going to demonstrate a slick little workaround instead. 🙂

Video tutorial

MemberPress login form shortcode

The shortcode for the login form is this one: . And the generated result will look like this:

memberpress login form - Add placeholder text to MemberPress login form fields

When we examine the code generated by the shortcode using the “inspect” function of Chrome or Safari, we will see that both the username and password fields have an ID attributed to them: 

memberpress login form code - Add placeholder text to MemberPress login form fields

Looking at the screenshot above, you can see that the ID for the Username input text field is “user_login” and the ID for the Password field is “user_pass”. It is important to know these IDs because to add the placeholder text we will use a bit of jQuery code.

The jQuery code

IMPORTANT: I highly recommend that you first create a child theme, or use the My Custom Functions WordPress plugin whenever you add custom code to your theme files. Otherwise, any time you update your theme your changes will get wiped out.

capisce - Add placeholder text to MemberPress login form fields

***

First of all, we will need to add the below jQuery code right before the </header> closing tag in your header.php file from your theme folder:

<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(‘#user_login’).attr(‘placeholder’, ‘Username or e-mail address’);
jQuery(‘#user_pass’).attr(‘placeholder’, ‘Password’);
});
</script>

You can edit the file by connecting to SFTP or FTP or by going to Appearance > Theme Editor in WordPress Dashboard.

The CSS code

After the jQuery code is added, you will need to add the below CSS code to your styles.css file which can also be found in your theme folder:

form label, form label {

    display: none !important;

}

This CSS code can be also added by going to Appearance > Customise > Additional CSS or, if you are using Divi theme (our preferred WordPress theme), by going to Divi > Theme Options > General > Custom CSS in your WordPress Dashboard.

Why do we need the CSS code…?

Because that code hides the labels above the input text fields. We won’t need those labels since the placeholder text will appear in the Username and Password fields via the jQuery code.

That is all! You have a more elegant MemberPress login form now!

memberpress login form placeholder text - Add placeholder text to MemberPress login form fields

Do you use MemberPress?

What do you like best about it…?

Leave your answer in the comments below!

 

What do you think of MemberPress?

Name: MemberPress

Description: MemberPress is one of the most popular WordPress plugins on the market. Many of our customers use and love it. Like any tech, MemberPress has its issues. But overall, it's one of our top choices for a membership solution.

Offer price: $149

Currency: USD

Application Category: WordPress Plugin

4.2
4.2 of 5 stars 1 review
  • Pricing
  • Extensibility
  • Ease of Use
  • Integrations
  • Availability of Freelancers
  • Documentation / Support
0
1
User Review
100/100 (1 vote)

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
How to get referrer URL using Gravity forms, so you know where the website visitor came from.
Would you like folks to be able to purchase your MemberPress products as a GIFT for somebody else? This tutorial will show you how to set it up!

Introduction Recently one of our customers asked us for advice and help on migrating away from the Wishlist Member membership plugin. Since she uses InfusionSoft for her email marketing and CRM,

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
QUint
QUint
July 30, 2022 5:10 pm

Could you update your js code for the current version of MemberPress?

The default shortcode does not show the label (see attachment)

Cheers,
Quint

Screen Shot 2022-07-30 at 9.06.48 AM.png
QUint
QUint
Reply to  QUint
July 30, 2022 7:54 pm

Never mind. It worked. Thanks!