이메일 필드
안심하고 이메일 주소를 수집하세요. 문의 양식부터 이중 입력 확인, 도메인 제한, 브라우저 자동 완성 기능을 갖춘 회원가입까지, 이메일 필드는 내장된 유효성 검사 및 오타 방지 기능을 통해 정확한 이메일 주소 수집을 지원합니다.
스마트 유효성 검사를 통한 전문적인 이메일 수집
완벽하게 :
모든 사용 사례에 적합한 강력한 기능
✅ 이메일 확인 입력란
이중 입력 오타 방지:
사용자가 이메일 주소를 다시 입력해야 하는 두 번째 "이메일 확인" 필드를 추가합니다. 이렇게 하면 오타를 방지하고 정확한 이메일 주소 수집을 보장할 수 있습니다.
그것은 작동하는 방법 :
- 기본 이메일 필드가 먼저 표시됩니다.
- "이메일 확인" 입력란이 아래에 나타납니다.
- 시스템은 두 항목이 일치하는지 확인합니다.
- 시각적 피드백은 일치 상태를 보여줍니다(녹색 = 일치, 빨간색 = 불일치).
- 이메일 주소가 일치해야 양식이 제출됩니다.
확인 절차를 사용하는 이유:
- 값비싼 오타를 방지합니다.[이메일 보호] (gmail.com 대비)
- 중요 이메일의 전달률을 보장합니다.
- 반송률 감소
- 중요 양식에 대한 전문가 모범 사례
- 사용자는 스스로 실수를 발견합니다.
완벽한 용도 :
- 계정 등록(비밀번호 재설정 이메일)
- 주문 확인 (수령 및 배송)
- 이벤트 등록 (티켓 이메일)
- 결제 알림
- 이메일 정확성이 매우 중요한 모든 형태
사용자 경험:
색상으로 구분된 피드백을 통해 실시간으로 유효성을 검사합니다. 사용자는 양식 제출을 기다리지 않고도 이메일이 일치하는지 즉시 확인할 수 있습니다.
🏢 도메인 제한
특정 이메일 도메인을 화이트리스트에 추가하세요:
"허용되는 이메일 도메인 제한" 기능을 활성화하여 특정 도메인에서 온 이메일만 수신하도록 설정할 수 있습니다. 회사 전용 양식, 비공개 등록 또는 접근 제어에 적합합니다.
그것은 작동하는 방법 :
- 허용되는 도메인을 입력하십시오(한 줄에 하나씩).
- 시스템은 제출 시 이메일 도메인을 검증합니다.
- 일치하는 도메인만 허용됩니다.
- 거부된 도메인에 대한 명확한 오류 메시지
일반적인 사용 사례:
회사 이메일 주소만 보내주세요:
내부 양식, 직원 설문 조사 또는 직원 등록에는 `@yourcompany.com` 이메일 주소만 허용하십시오.
교육기관:
학생 전용 양식, 캠퍼스 설문 조사 또는 학적 등록의 경우 `@university.edu`로 접근을 제한하십시오.
여러 파트너:
파트너 포털이나 B2B 양식에 `company1.com`, `company2.com`, `partner3.com`과 같이 여러 도메인을 허용하세요.
인증된 기관:
회원 전용 콘텐츠, 특별 혜택 또는 인증된 액세스를 위해 특정 조직을 화이트리스트에 추가하세요.
예 :
- 직원 의견 제출: `yourcompany.com`에서만 가능
- 학생 포털: `school.edu`, `university.edu`
- 파트너 등록: `partner1.com, partner2.com, partner3.com`
- 회원 접근 권한: `org1.org, org2.org, nonprofit.org`
이점:
- 적법한 제출을 보장합니다
- 무단 액세스 방지
- 조직 소속을 검증합니다
- 공용 이메일에서 스팸 메일을 줄여줍니다.
- 제한된 양식에 대한 접근을 제어합니다.
🔄 브라우저 자동 완성
이메일 입력 속도 향상:
"브라우저 제안 허용"을 활성화하면 브라우저에서 이전에 사용했던 이메일 주소를 제안합니다. 사용자는 저장된 이메일 중에서 한 번의 클릭으로 선택할 수 있습니다.
그것은 작동하는 방법 :
브라우저가 이메일 입력란을 인식합니다.
저장된 이메일 주소를 제안합니다
사용자가 자동 완성 제안을 클릭합니다.
양식 즉시 작성 완료
이점:
양식 작성 속도 향상 (클릭 한 번 vs 직접 입력)
오타를 줄여줍니다 (수동 입력 필요 없음)
사용자 경험 향상
더 높은 완료율
특히 모바일에서 유용합니다.
개인 정보 보호:
사용자가 브라우저에 저장되는 내용을 제어합니다. 자동 완성 기능은 브라우저의 개인정보 보호 설정과 사용자 기본 설정을 존중합니다.
활성화 시점:
문의 양식 (재방문 고객용)
뉴스레터 가입 (기존 사용자)
빠른 문의 양식
반복적으로 사용되는 공개 양식
비활성화 시점:
민감한 등록
공유 컴퓨터 시나리오
고보안 양식
이메일을 수동으로 입력해야 하는 경우
✉️ 내장 이메일 유효성 검사 기능
자동 형식 검사:
이메일 입력란에는 HTML5 유효성 검사 기능이 내장되어 있습니다. 브라우저는 제출 전에 이메일 형식을 자동으로 확인합니다.
검증 규칙:
반드시 `@` 기호를 포함해야 합니다.
`@` 앞에 텍스트(사용자 이름)가 있어야 합니다.
`@` 뒤에 도메인이 있어야 합니다.
유효한 도메인 확장자(.com, .org 등)를 보유해야 합니다.
공백이나 유효하지 않은 문자가 없습니다.
실시간 피드백:
브라우저는 "이메일 주소에 '@'를 포함하세요" 또는 "'@' 뒤에 이메일을 입력하세요"와 같은 유효성 검사 메시지를 표시합니다.
흔히 발생하는 오류 발견 사례:
`@` 누락: `useremailcom` ✗
도메인이 누락되었습니다: `user@` ✗
확장자가 누락되었습니다: `user@domain` ✗
공간: `[email protected]` ✗
잘못된 문자: `user@@email.com` ✗
📝 기본 이메일 값
이메일 주소를 미리 입력하세요:
폼이 로드될 때 표시될 기본 이메일 주소를 설정합니다. 고객 지원 이메일, 기본 연락처 또는 데모 폼에 유용합니다.
사용 사례:
- 콜백 요청을 위한 지원 이메일을 미리 입력하세요.
- 이메일 형식 예시를 보여주세요([이메일 보호])
- 데이터베이스에서 알려진 사용자 이메일을 설정합니다.
- 조직의 기본 연락처
편집 가능:
사용자는 기본값을 쉽게 변경하거나 교체할 수 있습니다. 기본값은 시작점일 뿐 고정된 값이 아닙니다.
🎯 향상된 사용자 경험
내장된 스마트 기능:
- 이메일 전용 키보드 - 모바일 기기에서는 @ 및 . 키가 포함된 최적화된 키보드가 표시됩니다.
- 자동 완성 속성 – 이메일 필드에 대한 올바른 HTML5 자동 완성 기능
- 공백 제거 - 의도치 않은 공백을 자동으로 제거합니다.
- 소문자 변환 – 일관성 유지를 위해 선택적으로 소문자로 변환할 수 있습니다.
- 시각적 검증 – 색상으로 구분된 피드백을 통해 일치 여부를 확인
- 명확한 오류 메시지 - 구체적인 유효성 검사 피드백
- 필수 유효성 검사 – 이메일 입력을 필수 항목으로 설정
- 도움말 텍스트 지원 - 이메일 서식 힌트 추가
- 사용자 지정 CSS 클래스 – 사용자 지정 스타일 적용
- 접근성 지원 - ARIA 라벨, 화면 낭독기 호환
- 자리 표시자 텍스트 – 이메일 형식 힌트 표시
- 복사 붙여넣기 용이 - 전체 이메일 주소가 깔끔하게 붙여넣어집니다
🔀 조건 논리
동적 이메일 필드 표시:
다른 양식 값에 따라 이메일 입력란을 표시하거나 숨깁니다. 관련성이 있는 경우에만 이메일 수집 항목을 표시합니다.
고급 논리 규칙:
- AND 논리 – 모든 조건이 충족되어야 합니다
- OR 논리 – 어떤 조건이든 해당 동작을 트리거할 수 있습니다.
- 8가지 연산자 - 같음, 같지 않음, 보다 큼, 보다 작음, 포함, 비어 있음 등
사용 사례:
- 고객 유형이 "기업"인 경우에만 "업무용 이메일"을 표시합니다.
- 사용자가 "보조 연락처 추가"를 선택하면 "대체 이메일"을 표시합니다.
- 등록 유형이 "기업"인 경우 "회사 이메일"을 표시합니다.
- 연락 선호도가 "전화만"인 경우 "개인 이메일" 항목을 숨깁니다.
간단한 3단계 설정
몇 분 만에 이메일 입력란을 준비하세요
이메일 필드 추가
기본 필드 섹션에서 이메일 필드를 드래그하여 양식에 놓으세요.
확인 활성화 (선택 사항)
중요한 양식에서 오타를 방지하고 이중 입력 유효성 검사를 요구하려면 "확인 필드 추가"를 선택하십시오.
제한 사항 구성 (선택 사항)
회사 전용 이메일에 대한 도메인 제한을 설정하고, 편의를 위해 브라우저 자동 완성 기능을 켜고, 필요한 경우 기본값을 설정하세요.
🎉 이제 끝입니다! 스마트 유효성 검사 및 오타 방지 기능이 탑재된 이메일 입력란이 준비되었습니다.
실제 애플리케이션
문의 양식
* 일반 문의 이메일
* 지원 요청 연락처
* 연락처 정보 수집
* 콜백 요청 이메일
사용자 등록
* 계정 생성 이메일
* 로그인 자격 증명 이메일
* 비밀번호 재설정 이메일
* 인증 이메일 주소
뉴스레터 및 마케팅
* 뉴스레터 구독 이메일
* 마케팅 동의 수집
* 이메일 캠페인 가입
* 프로모션 이메일 수집
이커머스
* 주문 확인 이메일
* 영수증 배송 이메일
* 배송 알림 이메일
* 고객 계정 이메일
비즈니스 응용 프로그램
견적 요청 이메일
* 제안서 알림 이메일
* 프로젝트 관련 이메일
* 고객 연락처 수집
교육 및 행사
* 이벤트 등록 이메일
* 수강 신청 이메일
* 웨비나 알림 이메일
* 증명서 발송 이메일
필드 옵션 완료
기본 구성
- 필드 레이블 – 이메일 입력란 위에 표시되는 제목
- 설명/도움말 텍스트 – 사용자를 위한 추가 안내
- 필수 입력 항목 – 이메일 입력을 필수로 설정합니다.
- 자리표시 텍스트 – 사용자가 입력하기 전에 표시되는 힌트(예: “)[이메일 보호]")
기본값
기본값 – 양식이 로드될 때 미리 채워진 이메일 주소
이메일 확인
- 확인 입력란 추가 – 사용자가 이메일 주소를 다시 입력해야 하는 두 번째 입력란을 추가하여 오타를 방지합니다.
- 두 항목이 일치하는지 자동으로 검증합니다.
- 실시간으로 색상으로 구분된 피드백을 표시합니다.
- 이메일 주소가 일치할 때까지 양식 제출을 방지합니다.
브라우저 통합
브라우저 제안 허용 - 더 빠른 입력을 위해 이전에 사용했던 이메일 주소를 브라우저에서 제안하도록 허용합니다.
도메인 제한
허용할 이메일 도메인 제한 – 특정 도메인의 이메일 주소만 허용합니다(예: 회사 이메일만).
- 허용된 이메일 도메인 – 각 허용 도메인을 새 줄에 입력하십시오(@ 기호 제외).
- 예시: `gmail.com`, `outlook.com`, `yourcompany.com`
- 한 줄에 도메인 하나씩
- 시스템은 제출 시 도메인을 검증합니다.
조건부 논리
- 조건부 로직 활성화 - 조건에 따라 표시/숨기기
- 논리 유형
- 모든 조건이 충족되어야 합니다(AND)
- 어떤 조건이든 충족될 수 있습니다(또는)
- 조건 규칙
- 표시/숨기기 – 취할 조치
- 필드 – 어떤 필드를 선택할지
- 연산자 – 같음, 같지 않음, 포함, 보다 큼, 보다 작음, 비어 있음, 비어 있지 않음
- 가치 – 비교 가치
- 다중 조건 – 규칙을 무제한으로 추가 가능
고급 옵션
- 숨겨진 필드 - 필드를 숨기되 제출물에 이메일 주소를 포함합니다.
- 사용자 지정 CSS 클래스 – 사용자 지정 스타일 적용
- 접근성 속성 – 화면 판독기를 위한 ARIA 레이블
- 텍스트 변환 - 선택적 소문자 변환
- 공백 다듬기 - 자동 공백 제거
왜 저희 이메일 입력란을 선택해야 할까요?
✅ 오타 방지 -
확인란은 이메일 주소 수집의 정확성을 보장합니다.
✅ 도메인 제한 -
접근 제어를 위해 특정 도메인을 화이트리스트에 추가하세요.
✅ 브라우저 자동 완성 -
저장된 이메일 추천 기능을 통해 더 빠르게 등록하세요.
✅ 내장 유효성 검사 – HTML5 이메일 형식 자동 검사
✅ 모바일 최적화 – 모바일 기기용 이메일 전용 키보드
✅ 시각적 피드백 – 확인을 위한 실시간 매칭 검증
✅ 스팸 감소 도메인 제한으로 가짜 이메일을 방지합니다.
✅ 사용하기 쉬운 – 명확한 유효성 검사 메시지 및 힌트
✅ 완전 통합 – 모든 폼 기능과 완벽하게 호환됩니다
자주 묻는 질문
질문: 이메일 확인 필드는 무엇에 사용되나요?
사용자가 이메일을 다시 입력해야 하는 두 번째 "이메일 확인" 입력란을 추가합니다. 이렇게 하면 오타를 방지할 수 있습니다. [이메일 보호] gmail.com 대신 gmail.com을 입력하세요. 제출하려면 두 필드가 일치해야 합니다.
질문: 도메인 제한은 어떻게 작동하나요?
해당 기능을 활성화하고 허용할 도메인을 (한 줄에 하나씩) 입력하세요. 예: yourcompany.com. 입력된 도메인으로 끝나는 이메일만 허용됩니다.
질문: 여러 도메인을 허용할 수 있나요?
네. company1.com, company2.com, partner.com처럼 한 줄에 도메인을 하나씩 입력하시면 됩니다. 어떤 도메인이든 입력 가능합니다.
질문: 모든 양식에 이메일 확인을 사용해야 할까요?
회원가입, 주문, 이벤트 티켓 예매와 같은 중요한 양식에 사용하세요. 간단한 문의 양식에서는 사용자 편의성을 위해 생략하는 것이 좋습니다.
질문: "브라우저 제안 허용"은 어떤 기능을 하나요?
이 기능은 브라우저 자동 완성 기능을 제공하여 사용자가 이메일 주소를 직접 입력하는 대신 저장된 이메일 주소 중에서 선택할 수 있도록 합니다.
질문: 사용자가 이메일 인증을 우회할 수 있나요?
아니요. 브라우저는 이메일 형식 규칙을 자동으로 적용하여 user@ 또는 @domain.com과 같은 잘못된 형식을 차단합니다.
질문: 회사 이메일만 수신하도록 제한하려면 어떻게 해야 하나요?
"허용되는 이메일 도메인 제한"을 켜고 회사 도메인을 입력하세요. 해당 도메인을 사용하는 이메일만 허용됩니다.
질문: 확인란이 같은 줄에 표시되나요?
아니요. 이메일 확인란은 기본 이메일 입력란 바로 아래에 "이메일 확인"이라는 이름으로 표시됩니다.
질문: 모바일 화면에 어떤 키보드가 나타나나요?
모바일 기기에서는 @, 마침표 및 일반 도메인 바로가기 키가 포함된 이메일 친화적인 키보드가 표시됩니다.
질문: 이메일 필드를 조건부 논리와 함께 사용할 수 있나요?
네. "비어 있음", "비어 있지 않음", "같음"과 같은 조건을 사용하여 사용자 선택에 따라 이메일 필드를 표시하거나 숨길 수 있습니다.
질문: 도메인이 일치하지 않으면 어떻게 되나요?
사용자는 "이메일 도메인이 허용되지 않습니다. 승인된 도메인을 사용하십시오."와 같은 메시지를 받게 됩니다.
질문: 보안상의 이유로 자동 완성 기능을 활성화해야 할까요?
상황에 따라 다릅니다. 공용 양식에서는 편의를 위해 활성화하고, 수동 입력이 선호되는 공유 시스템이나 민감한 시스템에서는 비활성화하는 것이 좋습니다.
