Cách tạo biểu mẫu liên hệ bằng Formspree

Bạn có thể sử dụng nhiều phương pháp trên trang web của mình để cho phép người dùng gửi email cho bạn một cách an toàn. Một ví dụ là sử dụng thuộc tính mailto trên biểu mẫu liên hệ. Thuộc tính mailto mở một ứng dụng thư đã cài đặt để người dùng nhập thư.

Để có trải nghiệm tốt hơn, hãy cân nhắc tích hợp một công cụ như Formspree. Formspree đóng vai trò trung gian, ghi lại dữ liệu biểu mẫu và gửi đến địa chỉ email được chỉ định của bạn.

Formspree là gì? Nó hoạt động như thế nào?

Formspree là một dịch vụ gửi email mà bạn có thể tích hợp vào một biểu mẫu liên hệ tùy chỉnh. Khi bạn đăng nhập vào Formspree, bạn có thể chỉ định địa chỉ email đích cho một biểu mẫu. Formspree thay bạn xử lý việc gửi biểu mẫu. Nó cho phép bạn tạo một biểu mẫu liên hệ miễn phí, như Google Forms, nhưng bạn lưu trữ markup biểu mẫu thực tế trên trang web của riêng mình.

Formspree sẽ tạo một điểm cuối mà bạn cần thêm vào biểu mẫu tùy chỉnh của mình. Khi người dùng nhấn nút “Gửi”, biểu mẫu sẽ sử dụng điểm cuối để gọi dịch vụ API của Formspree. Thao tác này sẽ tạo ra một email có nội dung của biểu mẫu liên hệ.

Formspree sẽ gửi email này đến địa chỉ email đích mà bạn đã liệt kê trong tài khoản Formspree của mình. Sau đó, bạn sẽ nhận được email trong hộp thư đến của mình. Tài khoản Formspree của bạn cũng có một nơi để bạn có thể xem các lần gửi biểu mẫu liên hệ của mình.

Cách đăng ký biểu mẫu liên hệ trong Formspree

Để đăng ký email của bạn với Formspree, hãy đăng nhập và nhập địa chỉ email mục tiêu cho biểu mẫu của bạn.

1. Đăng nhập vào Formspree. Nếu chưa có tài khoản, bạn cần nhập địa chỉ email và mật khẩu. Đăng ký bằng địa chỉ email mà bạn muốn biểu mẫu liên hệ để gửi các email. Bạn cũng có thể cần xác minh địa chỉ email này trong quá trình đăng ký.

2. Khi quá trình đăng ký hoàn tất, trang “Forms” sẽ mở ra. Nhấp vào New Form.

3. Nhập bất kỳ tên nào cho biểu mẫu liên hệ của bạn và để lại cài đặt dự án mặc định. Nhập địa chỉ email mục tiêu vào trường “Send emails to”. Đây là nơi Formspree sẽ gửi biểu mẫu liên hệ của bạn. Sau khi hoàn thành, nhấp vào Create Form.

4. Formspree sẽ cung cấp cho bạn một điểm cuối và các ví dụ về cách sử dụng nó. Bạn sẽ cần thêm điểm cuối này vào biểu mẫu liên hệ tùy chỉnh trên trang web của mình (thêm về điều này sau).

5. Theo mặc định, Formspree lưu trữ biểu mẫu của bạn trong một dự án được gọi là “My First Project”. Nếu bạn muốn thay đổi tên của điều này, hãy quay lại trang “Forms”. Nhấp vào Settings bên cạnh tên của dự án.

6. Tại đây, bạn có thể đổi tên dự án của mình thành tên khác. Ví dụ: bạn có thể đổi tên nó để có cùng tên với trang web của bạn. Bạn cũng có thể thêm URL cho trang web của mình.

Cách tích hợp Formspree vào Biểu mẫu liên hệ của bạn

Bạn sẽ cần thêm điểm cuối do Formspree cung cấp vào biểu mẫu liên hệ trong mã trang web của bạn.

1. Thêm điểm cuối vào thuộc tính “action” cho biểu mẫu. Điều này sẽ khiến trình duyệt của người dùng gửi biểu mẫu đến URL đó khi họ gửi biểu mẫu đó.

   <form action="https://formspree.io/f/xjvlaqpe" method="POST">
       <!-- Your form here -->
       <button type="submit" class="button"> Submit </button>
   </form>

2. Thêm đầu vào cho biểu mẫu của bạn. Bạn có thể sử dụng biểu mẫu ví dụ này sử dụng khung CSS Bootstrap:

   <form action="https://formspree.io/f/mbjqjrdl" class="extra-padding" method="POST">
       <div class="form-group">
           <label for="replyTo"> Your Email address </label>
           <input type="email" class="form-control" id="replyTo" name="_replyto" ngModel="reply" aria-describedby="emailHelp" placeholder="test@example.com">
           <small id="emailHelp" class="form-text text-muted"> Your email will not be shared with anyone else. </small>
       </div>
       <div class="form-group">
           <label for="message"> Your message </label>
           <textarea name="message" style="height:200px" class="form-control" id="message" placeholder="Hey there! I'm contacting you because..."> </textarea>
       </div>
       <button type="submit" class="button"> Submit </button>
   </form>
   

Cách kiểm tra xem Formspree có hoạt động trên biểu mẫu liên hệ của bạn không

Để kiểm tra xem Formspree có hoạt động hay không, hãy gửi tin nhắn cho chính bạn bằng cách sử dụng biểu mẫu liên hệ, nhấn Send và kiểm tra hộp thư đến trong email của bạn.

1. Chạy trang web của bạn và mở trang có biểu mẫu liên hệ. Nhập tin nhắn vào biểu mẫu liên hệ và nhấn Submit.

2. Bạn sẽ nhận được tin nhắn biểu mẫu liên hệ trong hộp thư đến của mình.

3. Nếu bạn quay lại Formspree, hãy nhấp vào tab Submissions. Tại đây, bạn cũng có thể xem các tin nhắn đã gửi từ biểu mẫu liên hệ của mình.

Tìm hiểu thêm về biểu mẫu liên hệ

Formspree là một trong nhiều dịch vụ bạn có thể sử dụng để tích hợp biểu mẫu liên hệ tùy chỉnh vào trang web của mình. Nó cho phép bạn nhanh chóng nhận phản hồi của người dùng mà không cần phải lo lắng về các chi tiết phụ trợ.

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/formspree-create-host-contact-form/