How to add a placeholder in the registration page

Support
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

1 Like
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

2 Likes
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
4 Likes
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>
3 Likes
7

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

1 Like
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.