How to add a placeholder in the registration page

Product Support

AI-generated summary

In a support thread titled “How to add a placeholder in the registration page,” jose.daniel.lardizab asked if it’s possible to add placeholder text or modify instructions beneath input fields on the registration form. Ronny_Gil suggested the Custom Wizard Plugin, which allows creating user wizards post-registration, but jose.daniel.lardizab noted it doesn’t apply to pre-registration forms. keegan then provided a solution for changing instructional text below fields via Admin > Customize > Text, listing keys like email.instructions and user.password.instructions. jose.daniel.lardizab followed up asking about adding placeholder text inside the input fields themselves. keegan clarified that CSS alone can’t add placeholder content (though ::placeholder can style it), and instead shared a JavaScript snippet to inject placeholder text into specific fields (e.g., email, username) via the theme’s </head> section using Discourse’s plugin API. jose.daniel.lardizab confirmed the JS solution works well and thanked keegan for the help.

1

Is there a way to add placeholder texts in the registration page and / or change the texts below the box?

CleanShot 2021-11-17 at 04.48.23
CleanShot 2021-11-17 at 04.48.23351Ă—469 11.5 KB

2

Hey Jose,

I found a user developed plugin that may accomplish what you are after!

The Custom Wizard Plugin lets you make user wizards for your Discourse forum. You can provide information, take user input, and perform actions, like creating topics, updating profiles and much more.

I tested it on my end and it seems to be in working order provided you have the technical knowhow to download and install it. Give it a go and see if that is what you are looking for!

If you are having trouble installing / using then go ahead and ask your question in that thread.

Cheers,
Ron

3

Thank you, Ronny. I really appreciate your help. I’m trying that right now.

But it seems like this is only a form that can be used after the user has signed up. Not before.

But I’ll ask there to be sure if this use case is possible.

4

You can change the text that appears below the input field using the customize text option in the settings.

  1. Navigate to:
  • Admin :arrow_right: Customize :arrow_right: Text
  1. Do a search for each of the following:
  • email.instructions
  • username.instructions
  • name.instructions_required
  • user.password.instructions
  1. Click the Edit button on the right
  2. Replace the text with your desired new text
  3. Click Save Changes
5

Thanks a lot, Keegan! This helps a lot.

Do you also happen to know how to change the CSS to add placeholder texts in the input field?

6

I don’t think it’s possible with just CSS. Although there is a ::placeholder selector, that is used for styling an existing placeholder.

However, it seems you can do it with JavaScript. By adding this to your theme’s </head> tag in the Admin Settings:

<script type="text/discourse-plugin" version="0.11.1">
api.onPageChange(() => {
    document.getElementById('new-account-email').placeholder =
      'Replace with your email placeholder';
    document.getElementById('new-account-username').placeholder =
      'Replace with your username placeholder';
    document.getElementById('new-account-name').placeholder =
      'Replace with your name placeholder';
    document.getElementById('new-account-password').placeholder =
      'Replace with your password placeholder';
  });
</script>
7

Thanks a lot, Keegan! That is a great solution! It works well. :slight_smile: