Borang Perhubungan Menggunakan EmailJS

Borang hubungan moden ini, dibina dengan React, Tailwind CSS dan EmailJS, menawarkan fungsi e-mel masa nyata. Kod dan arahan yang diberikan membimbing anda membuat borang hubungan profesional untuk tapak web anda.

Demo Langsung: https://www.php.cn/link/3dcc0806127ac6878b990a079e4f8c77

Kod Sumber: https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216

1. Persediaan dan Pemasangan Projek

Langkah 1: Mengkloning Repositori

Klon projek daripada GitHub menggunakan Git:

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

Langkah 2: Memasang Ketergantungan

Pasang pakej yang diperlukan melalui npm:

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

2. Mengkonfigurasi EmailJS

Langkah 1: Membuat Akaun

1. Daftar untuk mendapatkan akaun EmailJS percuma.
2. Akses papan pemuka EmailJS anda selepas log masuk.

Langkah 2: Menambah Perkhidmatan E-mel

1. Navigasi ke Perkhidmatan E-mel dan pilih Tambah Perkhidmatan E-mel.
2. Pilih pembekal e-mel anda (Gmail, Outlook, dll.) dan ikut arahan sambungan.

Langkah 3: Mencipta Templat E-mel

1. Pergi ke Templat E-mel dan klik Buat Templat Baharu.
2. Sesuaikan templat e-mel anda, menggunakan ruang letak seperti {{name}}, {{email}} dan {{message}}.
3. Simpan templat dan catat ID Templat.

Langkah 4: Mendapatkan Kunci API

1. Pergi ke Integrasi > Kunci API.
2. Salin ID Perkhidmatan, ID Templat dan ID Pengguna. Ini adalah penting untuk langkah seterusnya.

3. Menetapkan Pembolehubah Persekitaran

Buat fail .env dalam direktori akar projek anda dan tambah baris berikut, menggantikan ruang letak dengan ID EmailJS anda:

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

Ingat untuk menggantikan your_service_id, your_template_id dan your_user_id dengan nilai sebenar yang diperoleh daripada EmailJS. Ini melengkapkan persediaan. Rujuk repositori GitHub untuk butiran kod lanjut.

Atas ialah kandungan terperinci Borang Perhubungan Menggunakan EmailJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!