Xin chào bạn! Gần đây, mình có làm một số website static (chỉ gồm HTML5, CSS3 và JavaScript). Trong đó, website có một phần là contact form (liên hệ). Sau một hồi tìm kiếm google, mình đã tìm ra một phương pháp rất hay giúp bạn gửi email bằng HTML bằng cách sử dụng Formspree.io. Vậy cách này có những ưu điểm gì? Show Sau đây là một vài ưu điểm khi gửi mail bằng HTML và Formspree:
Với những ưu điểm trên mình quyết định dùng nó ngay mà không cần tìm kiếm google thêm xem còn cách nào khác nữa hay không. Test thử trên test.formspree.ioViệc đầu tiên cần làm là phải dùng thử xem nó hoạt động như thế nào. Để dùng thử, bạn vào trang test.formspree.io và làm theo hướng dẫn sau:test.formspree.io và làm theo hướng dẫn sau: Bước 1: Sửa nội dung formBạn thay đổi giá trị của thuộc tính action trong form thành dạng:action trong form thành dạng: Với [email protected] là địa chỉ mà bạn muốn dùng để nhận mail.[email protected] là địa chỉ mà bạn muốn dùng để nhận mail. Ví dụ của mình là: Khi đó ta có:
Như vậy là đã hoàn thành phần cài đặt form.
Bước 2: Nhập nội dung vào formTrong bước này, bạn sẽ đóng vai trò là người gửi email đến địa chỉ đã cấu hình trong form ở bước 1. Bạn sẽ nhập địa chỉ email vào mục Your email (chú ý là phải đúng chuẩn, có chữ @) và nội dung mà bạn muốn gửi vào phần Your message. Nhập xong, bạn chọn Send để gửi. Lúc này, trang web thông báo rằng bạn cần xác minh email.
Bước 3: Xác minh emailBạn sẽ cần vào email mà bạn muốn nhận (email đã cài đặt trong form ở bước 1, không phải email vừa nhập ở bước 2) để xác nhận. Bạn nhấn vào button Confirm Form là hoàn thành.Confirm Form là hoàn thành. Từ nay về sau, mọi người có thể gửi email trực tiếp cho bạn thông qua form này mà không cần xác nhận nữa.
Triển khai gửi email bằng HTMLCó lẽ bạn sẽ muốn test thử trên local trước khi làm trên website của mình. Nhưng khi áp dụng cách gửi email bằng HTML và Formspree này, bạn buộc phải triển khai trên một website thật mà không làm trên local được. Giải pháp là bạn có thể sử dụng github.io hoặc codepen.io. Mình thì thích dùng Codepen hơn vì nó nhanh và có thể nhúng vào blog wordpress.github.io hoặc codepen.io. Mình thì thích dùng Codepen hơn vì nó nhanh và có thể nhúng vào blog wordpress. Demo đây nhé: So với ví dụ trên, mình chỉ thêm phần Name để ghi họ tên, còn lại thì hoàn toàn không khác gì hết. Về cơ bản, đến đây, bạn đã hoàn thành được nhiệm vụ gửi email bằng HTML. Sau đây, là một số tính năng nâng cao khác mà bạn có thể xem xét thêm vào. Một số tính năng nâng caoNgoài những tính năng cơ bản như trên, formspree còn hỗ trợ một vài các tính năng nâng cao khác như: _replytoTrường này có thể dùng để thay thế cho phần email. Khi đó, bạn có thể reply trực tiếp cho người đã submit form này.
_nextMặc định, sau khi gửi thành công sẽ có một trang thông báo mặc định của Formspree. Tuy nhiên, bạn có thể thay thế nó bằng một trang khác của riêng bạn.
_subjectDùng để thêm vào tiêu đề mail. Qua đó, bạn có thể reply lại người gửi mà không cần sửa lại phần subject.
_ccDùng để thêm địa chỉ email vào trường cc.cc. Nếu bạn muốn mail này cc cho nhiều người thì có thể thêm vào nhiều email, phân cách nhau bởi dấu phẩy. _formatPhần này cho phép bạn nhận email dạng plain text.
_languageSau khi bạn nhấn gửi, sẽ có phần hiện reCAPTCHA để xác minh bằng tiếng anh. Bạn có thể thay đổi ngôn ngữ tùy thích bằng cách sử dụng thuộc tính này.
Hiện tại, có nhiều ngôn ngữ được support, nhưng chưa có Tiếng Việt. _gotchareCAPTCHA dùng để tránh spam. Tuy nhiên, bạn vẫn có thể sử dụng thuộc tính này để bỏ qua phần hiện reCAPTCHA.
Kết luậnTrên đây, mình đã trình bày cách gửi email bằng HTML sử dụng Formspree. Trước khi kết thúc bài viết, mình muốn nhấn mạnh lại là: ứng với mỗi website triển khai form này, bạn cần phải xác minh một lần đầu tiên.ứng với mỗi website triển khai form này, bạn cần phải xác minh một lần đầu tiên. Hy vọng bài viết này có thể giúp bạn biết cách gửi email bằng HTML để có thể triển khai trên các website của mình. Xin chào và hẹn gặp lại bạn trong bài viết tiếp theo, thân ái! ★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé: |