Borang Perhubungan Menggunakan EmailJS-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Borang Perhubungan Menggunakan EmailJS

Mary-Kate Olsen

Jan 23, 2025 am 02:29 AM

Contact Form Using 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:

git clone https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216
cd contact-form

Langkah 2: Memasang Ketergantungan

Pasang pakej yang diperlukan melalui npm:

npm install

2. Mengkonfigurasi EmailJS

Langkah 1: Membuat Akaun

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

Langkah 2: Menambah Perkhidmatan E-mel

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

Langkah 3: Mencipta Templat E-mel

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

Langkah 4: Mendapatkan Kunci API

Pergi ke Integrasi > Kunci API.
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!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Ganti aksara rentetan dalam javascriptMar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

periksa jQuery jika tarikh sahMar 01, 2025 am 08:51 AM

Fungsi JavaScript mudah digunakan untuk memeriksa sama ada tarikh sah. fungsi isvaliddate (s) { var bits = s.split ('/'); var d = tarikh baru (bit [2] '/' bits [1] '/' bits [0]); kembali !! (d && (d.getmonth () 1) == bit [1] && d.getdate () == nombor (bit [0])); } // ujian var

jQuery mendapatkan padding/margin elemenMar 01, 2025 am 08:53 AM

Artikel ini membincangkan cara menggunakan jQuery untuk mendapatkan dan menetapkan margin dalaman dan nilai margin elemen DOM, terutama lokasi tertentu margin luar dan margin dalaman elemen. Walaupun ada kemungkinan untuk menetapkan margin dalaman dan luar elemen menggunakan CSS, nilai yang tepat boleh menjadi rumit. // Sediakan $ ("div.header"). css ("margin", "10px"); $ ("div.header"). css ("padding", "10px"); Anda mungkin menganggap kod ini

10 Tab Accordion JQueryMar 01, 2025 am 01:34 AM

Artikel ini meneroka sepuluh tab jQuery yang luar biasa dan akordion. Perbezaan utama antara tab dan akordion terletak pada bagaimana panel kandungan mereka dipaparkan dan tersembunyi. Mari kita menyelidiki sepuluh contoh ini. Artikel Berkaitan: 10 JQuery Tab Plugin

10 patut diperiksa plugin jQueryMar 01, 2025 am 01:29 AM

Temui sepuluh plugin jQuery yang luar biasa untuk meningkatkan dinamisme dan daya tarikan visual laman web anda! Koleksi ini menawarkan pelbagai fungsi, dari animasi imej ke galeri interaktif. Mari kita meneroka alat yang berkuasa ini: Posting Berkaitan: 1

HTTP Debugging dengan Node dan HTTP-ConsoleMar 01, 2025 am 01:37 AM

HTTP-CONSOLE adalah modul nod yang memberi anda antara muka baris arahan untuk melaksanakan arahan HTTP. Ia bagus untuk menyahpepijat dan melihat apa yang sedang berlaku dengan permintaan HTTP anda, tanpa mengira sama ada mereka dibuat terhadap pelayan web, Serv Web

Tutorial Persediaan API Carian Google CustomMar 04, 2025 am 01:06 AM

Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y

jQuery tambah bar scroll ke divMar 01, 2025 am 01:30 AM

Coretan kod jQuery berikut boleh digunakan untuk menambah bar skrol apabila kandungan div melebihi kawasan elemen kontena. (Tiada demonstrasi, sila salin terus ke Firebug) // d = dokumen // w = tetingkap // $ = jQuery var contentArea = $ (ini), Wintop = contentArea.scrollTop (), docheight = $ (d) .height (), winheight = $ (w) .height (), Divheight = $ ('#c

See all articles