회원가입 페이지에 플레이스홀더 추가하는 방법

제품 지원
1

회원가입 페이지에 플레이스홀더 텍스트를 추가하거나 상자 아래에 있는 텍스트를 변경하는 방법이 있을까요?

CleanShot 2021-11-17 at 04.48.23
CleanShot 2021-11-17 at 04.48.23351×469 11.5 KB

2

요세님,

원하시는 기능을 구현할 수 있는 사용자 개발 플러그인을 하나 찾았어요!

Custom Wizard 플러그인을 사용하면 Discourse 포럼에 사용자 마법사(wizard)를 만들 수 있습니다. 정보를 제공하고, 사용자 입력을 받으며, 주제 생성이나 프로필 업데이트와 같은 작업을 수행할 수 있습니다.

제 환경에서 테스트해 봤는데, 다운로드와 설치를 위한 기술적 지식이 있다면 정상적으로 작동하는 것 같습니다. 한번 시도해 보고 이것이 원하는 기능인지 확인해 보세요!

설치나 사용 중에 문제가 발생하면 해당 스레드에서 질문을 남겨 주시면 됩니다.

감사합니다,
론

3

로니, 감사합니다. 도움을 정말 감사히 생각합니다. 지금 바로 시도해 보고 있습니다.

하지만 이것은 사용자가 가입한 후에만 사용할 수 있는 양식인 것 같습니다. 가입 전에는 사용할 수 없어요.

그래도 이 사용 사례가 가능한지 확실하게 확인하기 위해 해당 곳에 문의해 보겠습니다.

4

설정에서 텍스트 커스터마이징 옵션을 사용하여 입력 필드 아래에 표시되는 텍스트를 변경할 수 있습니다.

  1. 이동 경로:
  • 관리자 :arrow_right: 커스터마이징 :arrow_right: 텍스트
  1. 다음 항목 각각을 검색합니다:
  • email.instructions
  • username.instructions
  • name.instructions_required
  • user.password.instructions
  1. 오른쪽의 편집 버튼을 클릭합니다.
  2. 텍스트를 원하는 새 텍스트로 대체합니다.
  3. 변경 사항 저장을 클릭합니다.
5

케건, 정말 감사해요! 큰 도움이 됐어요.

입력 필드에 플레이스홀더 텍스트를 추가하려면 CSS를 어떻게 수정해야 하는지도 혹시 아세요?

6

CSS만으로는 불가능할 것 같습니다. ::placeholder 선택자가 있지만, 이는 기존 플레이스홀더의 스타일을 지정하는 데 사용됩니다.

다만, JavaScript를 사용하면 가능해 보입니다. 관리자 설정의 </head> 태그에 다음 코드를 추가해 보세요:

<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

키건, 정말 고마워요! 아주 좋은 해결책이에요! 잘 작동해요. :slight_smile: