Tích hợp Biểu mẫu liên hệ với EmailJS trong React

React là một thư viện front-end để xây dựng giao diện người dùng cho các ứng dụng front-end. Ngoài ra, React rất hữu ích khi tạo các ứng dụng của bạn vì nó sử dụng các thành phần có thể tái sử dụng.

Câu hỏi luôn tồn tại đối với các nhà phát triển front-end là làm thế nào để xử lý các yêu cầu từ dữ liệu biểu mẫu mà không cần viết hoặc không có kiến thức về các chức năng phụ trợ. Việc xây dựng một máy chủ phụ trợ có thể khá tẻ nhạt và việc sử dụng dịch vụ của bên thứ ba là bắt buộc đối với nhiệm vụ này để giảm bớt khó khăn trong việc viết logic.

EmailJS là gì?

EmailJS là một dịch vụ giúp gửi email bằng các ứng dụng phía máy khách như React, Vue và Angular mà không cần máy chủ trong quá trình cấu hình và thiết lập.

Trong hướng dẫn này, bạn sẽ học cách kết nối thư viện front-end, React, với EmailJS để nhận tin nhắn của người dùng trên trang web hoặc ứng dụng di động của bạn mà không cần phải xây dựng từ đầu.

Thử nghiệm

Hãy bắt đầu bằng mã khởi động trong kho lưu trữ này hoặc tạo một ứng dụng React mới.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, bạn cần có những điều sau:

• Node> = 14.0.0 và npm> = 5.6 được cài đặt trên máy cục bộ của bạn
• Hiểu biết cơ bản về React
• Một tài khoản EmailJS để dùng thử dịch vụ.

Bắt đầu

Bước đầu tiên của việc xây dựng một dự án mới là có các công cụ để phát triển giúp việc xây dựng trở nên dễ dàng. Trong thiết bị đầu cuối của bạn, hãy chạy lệnh này:

npx create-react-app react-contact-form-with-emailjs

Lệnh trên tạo bảng soạn sẵn bằng lệnh create-react-app có tất cả các tệp và gói cho ứng dụng React.

Cài đặt EmailJS

Như một phần phụ thuộc, hãy chạy lệnh để cài đặt EmailJS SDK vào ứng dụng React.

npm install @emailjs/browser

Chạy dự án

Để chạy ứng dụng React, hãy điều hướng đến thư mục dự án và chạy máy chủ phát triển có tính năng tải lại nóng, từ đó cập nhật ứng dụng với bất kỳ thay đổi nào được thực hiện trong quá trình phát triển.

Chạy lệnh này:

 cd react-contact-form-with-emailjs npm start

Ứng dụng có thể truy cập trên http: // localhost: 3000 .

Tạo biểu mẫu liên hệ

Thu thập và nhận phản hồi từ người dùng của bạn thông qua biểu mẫu liên hệ là một tính năng quan trọng mà một trang web cần phải có, vì nó khiến bạn trở nên đáng tin cậy trong mắt khách truy cập.

Vì vậy, hãy tạo biểu mẫu liên hệ. Trong tệp App.js của bạn, hãy sao chép và dán mã sau:

 // src/App.js import React from 'react' import './App.css'; function App() { return ( <div> <h1>Contact Form</h1> <form className='cf'> <div className='half left cf'> <input type='text' placeholder='Name' name='user_name' /> <input type='email' placeholder='Email address' name='user_email' /> </div> <div className='half right cf'> <textarea name='message' type='text' placeholder='Message'></textarea> </div> <input type='submit' value='Submit' id='input-submit' /> </form> </div> ); } export default App;

Tạo kiểu cho Biểu mẫu liên hệ

Giao diện người dùng ứng dụng cần trông đẹp mắt đối với người dùng, vì vậy trong tệp App.css , hãy sao chép và dán đoạn mã sau:

 // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; }

Trang sẽ trông như thế này với mọi thứ được thực hiện đúng:

Thiết lập EmailJS

Với việc hoàn thành trang biểu mẫu liên hệ mà không có bất kỳ chức năng nào để gửi tin nhắn, hãy thiết lập dịch vụ sẽ gửi nội dung của biểu mẫu đến email của bạn.

Thêm dịch vụ email

Phần này nói về sự tích hợp giữa EmailJS và máy chủ email của bạn. Trên trang tổng quan EmailJS của bạn, hãy chọn dịch vụ Gmail từ tab Dịch vụ Email , tab này sẽ mở ra một trang mới được gọi là dịch vụ cấu hình .

Tiếp theo, thay đổi tên và các thông số id dịch vụ . Id dịch vụ sẽ được sử dụng sau này trong khi khởi tạo biểu mẫu liên hệ để kết nối nó với EmailJS. Đảm bảo nhấp vào nút Kết nối Tài khoản và Tạo Dịch vụ để xác nhận các thay đổi của bạn.

Tạo Mẫu Email

Mẫu email rất cần thiết khi bạn muốn bao gồm chủ đề của email, nội dung mà nó sẽ chứa và đích của nó trong hộp thư đến của bạn khi người dùng gửi thư từ phía máy khách của trang web của bạn.

Trên trang tổng quan, nhấp vào tab Mẫu Email và Tạo Mẫu Mới .

Tiếp theo, bạn phải nhấp vào tab Cài đặt và thay đổi Tên và ID Mẫu thành bất kỳ thứ gì bạn muốn. ID mẫu sẽ được sử dụng sau này, như thể hiện trong hình ảnh bên dưới:

Quay trở lại tab Nội dung, các giá trị bên trong dấu ngoặc nhọn là các biến động phải có cùng giá trị như được xác định trong phần tử <form> trong biểu mẫu liên hệ, như message , user_name và user_email .

Tạo các biến môi trường

Các biến môi trường .env là một tệp lưu trữ các khóa công khai của bạn và các giá trị khác mà bạn không muốn chia sẻ và là riêng tư đối với một mình bạn.

Trong thư mục gốc của thư mục dự án của bạn, hãy tạo một tệp, .env và dán thông tin sau:

 // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY

Đối với khóa công khai, bạn có thể tìm thấy nó bằng cách nhấp vào tab Account và sao chép giá trị như được hiển thị trong phần public key :

Khởi tạo EmailJS

Trong ứng dụng React, nhập gói đã cài đặt, @emailjs/browser .

Sao chép và dán nội dung sau:

 // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( <div> // form element </div> ); } export default App;

Xử lý việc gửi biểu mẫu

useRef xử lý việc gửi biểu mẫu liên hệ.

Sao chép và cập nhật mã trong tệp App.js :

 // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } export default App;

Điều sau xảy ra trong đoạn mã trên:

• useRef được nhập và khởi tạo với một biến có tên là biểu mẫu
• Hook, useRef , được sử dụng làm tham chiếu và được gán cho phần tử <form>
• Trên chức năng sendEmail , biểu mẫu có phương thức preventDefault ngăn trang làm mới
• Tuy nhiên, trong hàm sendEmail , hàm sendForm được gọi và khởi tạo với service ID template ID , thuộc tính form .current của tham ref và public key
• Một hàm gọi lại cho các trường hợp thành công và thất bại xảy ra với phương thức .then()

Bây giờ chúng ta hãy xem kết quả của dự án này:

Email xác nhận

Sự kết luận

Sử dụng EmailJS để xử lý các yêu cầu dữ liệu ở phía máy khách của ứng dụng của bạn là một cách tuyệt vời để nhận phản hồi từ biểu mẫu liên hệ. EmailJS cung cấp các tính năng khác để khám phá và mang đến cho bạn trải nghiệm mạnh mẽ mà không cần phải xây dựng máy chủ của bạn hoặc có kiến thức về phát triển phụ trợ. Nó làm mọi thứ cho bạn dưới mui xe.

Bạn đã sử dụng EmailJS trước đây chưa? Bạn nghĩ gì về cách tiếp cận của tôi ở trên? Cho chúng tôi biết trong các ý kiến dưới đây!