EmailJS를 사용한 문의 양식

React, Tailwind CSS 및 EmailJS로 구축된 이 현대적인 문의 양식은 실시간 이메일 기능을 제공합니다. 제공된 코드와 지침은 귀하의 웹사이트에 대한 전문적인 문의 양식을 만드는 과정을 안내합니다.

라이브 데모: https://www.php.cn/link/3dcc0806127ac6878b990a079e4f8c77

소스 코드: https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216

1. 프로젝트 설정 및 설치

1단계: 저장소 복제

Git을 사용하여 GitHub에서 프로젝트를 복제합니다.

<code class="language-bash">git clone https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216
cd contact-form</code>

2단계: 종속성 설치

npm을 통해 필수 패키지를 설치하세요.

<code class="language-bash">npm install</code>

2. EmailJS 구성

1단계: 계정 생성

1. 무료 EmailJS 계정에 가입하세요.
2. 로그인 후 EmailJS 대시보드에 액세스하세요.

2단계: 이메일 서비스 추가

1. 이메일 서비스로 이동하여 이메일 서비스 추가를 선택합니다.
2. 이메일 제공업체(Gmail, Outlook 등)를 선택하고 연결 지침을 따르세요.

3단계: 이메일 템플릿 만들기

1. 이메일 템플릿으로 이동하여 새 템플릿 만들기를 클릭하세요.
2. {{name}}, {{email}}, {{message}} 등의 자리 표시자를 사용하여 이메일 템플릿을 맞춤설정하세요.
3. 템플릿을 저장하고 템플릿 ID를 적어두세요.

4단계: API 키 받기

1. 통합으로 이동 > API 키.
2. 서비스 ID, 템플릿 ID, 사용자 ID를 복사하세요. 이는 다음 단계를 위해 매우 중요합니다.

3. 환경변수 설정

프로젝트의 루트 디렉터리에 .env 파일을 만들고 다음 줄을 추가하고 자리 표시자를 EmailJS ID로 바꿉니다.

<code>VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_USER_ID=your_user_id</code>

your_service_id, your_template_id 및 your_user_id를 EmailJS에서 얻은 실제 값으로 바꿔야 합니다. 이것으로 설정이 완료됩니다. 자세한 코드 세부정보는 GitHub 저장소를 참조하세요.

위 내용은 EmailJS를 사용한 문의 양식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!