워드프레스 양식에 이메일 입력란을 추가하는 방법

이메일은 온라인 소통의 생명선입니다. 모든 문의 양식, 뉴스레터 구독 신청, 회원 가입에는 신뢰할 수 있는 이메일이 필요합니다. 이메일 입력란하지만 단순한 텍스트 입력만으로는 충분하지 않습니다. 오타를 잡아내는 유효성 검사, 정확성을 보장하는 선택적 확인 절차, 그리고 유용한 데이터를 위한 적절한 서식 지정이 필요합니다. 제대로 작동하는 이메일 입력 필드를 추가하는 방법을 알아보겠습니다.

이메일 입력란을 별도로 사용해야 하는 이유는 무엇일까요?

이메일 텍스트 필드 관련 문제

• 형식 유효성 검사 없음
• 오타가 발견되지 않습니다
• 유효하지 않은 입력도 허용됩니다.
• 모바일에서 이메일 키보드를 사용할 수 없습니다.
• 헛된 후속 시도

이메일 필드의 장점

• 내장 형식 유효성 검사
• 흔히 발생하는 오류를 잡아냅니다
• 모바일 기기용 이메일 키보드
• 표준화된 데이터 수집
• 후속 조치의 전달률 향상

이메일 입력란 추가하기

1단계: 필드를 추가합니다

1. 양식을 엽니다. A.F.B.
2. Find 이메일 필드 유형에서
3. 드래그하여 폼에 추가하세요

2단계: 기본 설정 구성

• 레이블 : “이메일 주소” 또는 “귀하의 이메일”
• 자리 표시 자 : "[이메일 보호]"
• 필수 : 일반적으로 문의 양식의 경우에는 그렇습니다.
• 도움말 텍스트: 선택적 지침

3단계: 저장 및 테스트

1. 양식을 저장하세요
2. 프런트엔드 미리보기
3. 유효하지 않은 이메일을 제출해 보세요.
4. 검증 작업이 제대로 작동하는지 확인하세요.

이메일 확인

무엇이 검증되는가

이메일 입력란의 형식이 올바른지 확인하세요.

유효: ✓ [이메일 보호]
✓ [이메일 보호]
✓ [이메일 보호]

유효하지 않음: ✗ userexample.com (@ 누락) ✗ [이메일 보호] (도메인 누락) ✗ user@example (최상위 도메인 누락) ✗ @example.com (사용자 이름 누락)

유효성 검사 오류 메시지

기본값: "유효한 이메일 주소를 입력하세요." 사용자 지정: "이메일 주소가 아닌 것 같습니다. 다시 확인하고 입력해 주세요."

유효성 검사에서 확인하지 않는 사항

• 이메일이 실제로 존재하는지 여부
• 사서함이 활성화되어 있는지 여부
• 전 달성

형식 유효성 검사는 구조의 올바름을 보장하는 것이지 존재 여부를 보장하는 것이 아닙니다.

이메일 확인 필드

그것은 무엇인가?

사용자가 이메일 주소를 다시 입력하는 두 번째 이메일 입력란입니다. 두 입력란의 주소가 일치해야 제출할 수 있습니다.

이메일: [[이메일 보호]    ] 이메일 확인: [[이메일 보호]    ] ✓ 일치

확인 절차를 사용하는 이유는 무엇인가요?

• 오타를 잡아냅니다 (가장 흔한 오타: 잘못된 도메인).
• 사용자가 다시 한번 확인하도록 강제합니다.
• 이메일 통신 실패율을 줄입니다.
• 중요 거래에 필수적입니다

언제 사용 하는가?

• 계정 등록
• 뉴스레터 가입
• 주문 확인
• 이메일 정확성이 매우 중요한 모든 형태

언제 건너뛸 것인가

• 간단한 문의 양식
• 빠른 문의
• 마찰 감소가 최우선 과제일 때

활성화 확인

1. 이메일 주소를 선택하세요
2. "확인 필드" 옵션을 찾으세요
3. 켜기
4. 두 번째 필드가 자동으로 나타납니다.

확증 행동

이메일 : [이메일 보호]
확인 : [이메일 보호]  ← 오타! 오류: "이메일 주소가 일치하지 않습니다."

도메인 제한

도메인 제한이란 무엇인가요?

허용되는 이메일 도메인을 제한합니다.

• 허용 목록: 특정 도메인만 허용
• 블랙리스트 : 특정 도메인을 차단합니다

화이트리스트 사용 사례

특정 도메인에서 온 이메일만 수신하세요:

허용됨: @company.com, @company.org 거부됨: 그 외 모든 경우 사용 용도: - 사내 양식 - 직원 등록 - 조직 전용 접근 권한

블랙리스트 사용 사례

특정 도메인 차단:

차단: @mailinator.com, @tempmail.com, @guerrillamail.com 허용: 그 외 모든 주소 사용 목적: - 일회용 이메일 방지 - 스팸 가입 감소 - 실제 연락처 주소 확인

도메인 제한 구성

1. 이메일 필드를 선택하세요
2. 도메인 제한 설정 찾기
3. 화이트리스트 모드 또는 블랙리스트 모드를 선택하세요.
4. 도메인을 입력하세요(한 줄에 하나씩).

예시: 회사 이메일만

모드: 화이트리스트 도메인: company.com company.org 오류: "회사 이메일 주소를 사용하세요."

예시: 일회용 이메일 차단

모드: 블랙리스트 도메인: mailinator.com tempmail.com guerrillamail.com 10minutemail.com throwaway.email 오류: "영구 이메일 주소를 사용하십시오."

구성 예

예시 1: 기본 문의 양식

레이블: "이메일 주소" 자리 표시자: "[이메일 보호]필수: 예 확인: 아니요 도메인 제한: 없음

예시 2: 뉴스레터 가입

레이블: "이메일 주소" 자리 표시자: "이메일 주소를 입력하세요..." 필수: 예 확인: 예 도메인 제한: 일회용 차단 도움말 텍스트: "귀하의 이메일 주소는 절대 공유되지 않습니다."

예시 3: 계정 등록

레이블: "이메일(사용자 이름이 됩니다)" 자리 표시자: "[이메일 보호]필수: 예 확인: 예 도메인 제한: 없음 도움말: "정기적으로 확인하는 이메일 주소를 사용하세요."

예시 4: 직원 양식

레이블: "업무용 이메일" 자리 표시자: "[이메일 보호]필수: 예 확인: 아니요 도메인 제한: company.com만 허용 목록에 추가 도움말 텍스트: "공식 회사 이메일을 사용하세요"

예시 5: 잠재 고객 발굴

레이블: "업무용 이메일" 자리 표시자: "[이메일 보호]필수: 예 확인: 아니요 도메인 제한: gmail.com, yahoo.com 차단(B2B 전용) 도움말 문구: "업무 관련 문의는 회사 이메일을 사용해 주세요."

모바일 최적화

이메일 키보드

이메일 입력란이 모바일 전용 키보드를 작동시킵니다.

• @ 기호를 쉽게 사용할 수 있습니다.
• 많은 키보드에서 .com 바로가기 키를 사용할 수 있습니다.
• 자동 수정 간섭 감소
• 더 빠른 입장

모바일 모범 사례

• 선명하고 읽기 쉬운 라벨
• 유용한 자리 표시자 텍스트
• 적절한 탭 타겟 크기
• 오류 메시지를 지우세요

이메일 입력란에 흔히 저지르는 실수

1. 이메일 형식 대신 텍스트 형식 사용

잘못된: 오른쪽:

이메일 유형을 선택하면 유효성 검사 및 모바일 키보드가 활성화됩니다.

2. 필요할 때 필요한 것을 제공하지 않음

답장을 보내려면 이메일을 사용해야 합니다.

3. 레이블을 나타내는 혼란스러운 자리 표시자

잘못된 예: 레이블 없이 플레이스홀더만 있음. 올바른 예: 명확한 레이블 + 유용한 플레이스홀더

4. 지나치게 엄격한 검증

유효한 이메일 중 일부가 비정상적으로 보일 수 있습니다.

유효하지만 흔하지 않음: - [이메일 보호]
- [이메일 보호]
- [이메일 보호]

유효한 형식을 거부하지 마세요.

5. 오류 메시지 컨텍스트 없음

잘못된 예: "잘못된 입력입니다." 올바른 예: "유효한 이메일 주소를 입력하세요(예: [이메일 보호])"

이메일 필드 레이블

좋은 라벨 예시

• "이메일 주소"
• "귀하의 이메일 주소"
• "이메일"
• “업무용 이메일”
• "연락처 이메일"

문맥별 레이블

• "이메일 (주문 확인용)"
• "이메일 주소(다운로드 파일을 보내드릴 주소)"
• 회사 이메일
• 선호하는 이메일 주소

자리 표시자 예시

• "[이메일 보호]"
• “이메일 주소를 입력하세요…”
• "[이메일 보호]"
• "[이메일 보호]"

도움말 텍스트 아이디어

개인정보 보호

"고객님의 이메일 주소는 절대 누구와도 공유하지 않습니다." "고객님의 이메일 주소는 기밀로 유지됩니다." "고객님의 개인정보를 존중합니다."

사용법 설명

"확인 메일을 이 주소로 보내드리겠습니다." "다운로드 링크는 어디로 보내드릴까요?" "업데이트 소식은 이 주소로 받아보실 수 있습니다."

형식 안내

"유효한 이메일 형식을 사용하세요(예: [이메일 보호])" "정기적으로 확인하는 이메일 주소를 사용해 주세요." "계정과 연결된 이메일 주소를 입력하세요."

여러 개의 이메일 입력란

언제 여러 개를 사용해야 할까요?

• 1차 및 2차 접촉
• 개인 및 업무용 이메일
• 청구 및 배송 알림

예시: 초등/중등

기본 이메일: [________________] (필수) 보조 이메일: [________________] (선택 사항) 도움말: "보조 연락처용 이메일 주소"

예시: 계정 + 알림

계정 이메일: [________________] 알림 이메일: [________________] ☐ 계정 이메일과 동일

제출물 처리

이메일 알림에서

이메일 필드 값은 알림에 표시됩니다.

문의 양식을 통해 새 제출된 내용: 이름: 존 스미스 이메일: [이메일 보호]  ← 답글을 달려면 클릭하세요: ...

답장 설정

이메일 필드를 답장 주소로 설정하세요:

• "답글 달기"를 클릭하면 게시자에게 답글이 전송됩니다.
• 간편한 후속 소통

수출 부문에서

CSV 열: 이메일 값: [이메일 보호], [이메일 보호]...

모범 사례 요약

Do

• ✓ 전용 이메일 입력란을 사용하세요
• ✓ 투명 라벨 추가
• ✓ 유용한 자리 표시자를 포함하세요
• ✓ 필요할 때 필수 항목으로 지정하세요
• ✓ 중요한 양식에는 확인 기능을 사용하세요
• ✓ 개인정보 보호를 위한 도움말 문구를 추가하세요
• ✓ 모바일 기기에서 테스트

마

• ✗ 이메일 주소를 입력하려면 텍스트 필드를 사용하세요
• ✗ 유효성 검사 건너뛰기
• ✗ 자리 표시자를 레이블로만 사용
• ✗ 유효 도메인을 과도하게 제한합니다
• ✗ 모바일 키보드 최적화는 잊어버리세요

문제해결

유효한 이메일이 거부되었습니다

• 도메인 제한 설정을 확인하세요
• 이메일 형식이 표준인지 확인하십시오.
• 일부 특이한 TLD는 테스트가 필요할 수 있습니다.

확인 내용이 일치하지 않습니다

• 추가 공간이 있는지 확인하세요
• 대소문자 구분 (대개 문제가 되지 않음)
• 복사 붙여넣기에는 숨겨진 문자가 포함될 수 있습니다.

모바일 키보드가 이메일 입력 형식이 아닙니다.

• 이메일 필드 유형이 사용되었는지 확인하십시오.
• 브라우저/기기에 따라 다를 수 있습니다.
• 코드에서 입력 유형을 확인하세요

제출된 이메일 주소가 유효하지 않습니다.

• 유효성 검사가 활성화되어 있는지 확인하십시오.
• 클라이언트 측 유효성 검사가 제대로 작동하는지 확인하세요.
• 서버 측 유효성 검사 백업을 추가합니다.

제품 개요

워드프레스 양식에 이메일 입력란 추가하기:

1. 이메일 필드 추가 - 드래그하여 형태를 만드세요
2. 레이블을 설정하세요 – 명확하고, 구체적입니다
3. 자리 표시자를 추가하세요 – 형식 예시
4. 필요한 것을 만드세요 – 후속 조치가 필요한 경우
5. 확인을 활성화합니다 – 매우 정확한 정보를 위해
6. 도메인 제한 설정 - 도메인을 제한하는 경우
7. 도움말 텍스트를 추가하세요 – 개인정보 보호 또는 이용 관련 참고 사항
8. 철저한 테스트 – 유효, 무효, 모바일

맺음말

이메일 입력란은 양식에서 가장 중요한 입력란인 경우가 많습니다. 양식을 제출한 사람에게 연락할 수 있는 유일한 수단이기 때문입니다. 이메일 입력란 유형을 제대로 설정하면 유효성 검사, 모바일 최적화, 데이터 품질 향상을 보장할 수 있습니다. 정확성이 중요한 경우에는 확인 이메일을 추가하고, 특정 도메인에 대한 제한을 설정하여 제출된 이메일을 필터링하는 것도 고려해 보세요. 잘 구성된 이메일 입력란은 반송되는 이메일을 줄이고 원활한 소통을 가능하게 합니다.

자동 양식 작성기 유효성 검사, 선택적 확인 및 도메인 제한 기능이 내장된 완벽한 기능을 갖춘 이메일 입력란이 포함되어 있습니다. 안심하고 이메일 주소를 수집하세요.

이메일 입력란을 추가할 준비가 되셨나요? 자동 양식 작성기 다운로드 지금 바로 유효한 이메일 주소 수집을 시작하세요.