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

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

Thêm một biểu mẫu liên hệ vào trang web của bạn, ngay cả khi nó tĩnh. Tìm hiểu cách Formspree có thể giúp giải quyết các yêu cầu thu thập dữ liệu của bạn.

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ì và 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 mục tiêu của mình cho một biểu mẫu. Formspree thay mặt 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 Biểu mẫu, nhưng bạn lưu trữ đánh dấu 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 email mục tiêu 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.

Để đă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 bài nộp. 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 “Biểu mẫu” sẽ mở ra. Bấm vào Hình thức mới.

  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 “Gửi email tới”. Đâ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, hãy nhấp vào Tạo biểu mẫu.

  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à “Dự án đầu tiên của tôi”. Nếu bạn muốn thay đổi tên của điều này, hãy quay lại trang “Biểu mẫu”. Bấm vào Cài đặt 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.

LÀM VIDEO TRONG NGÀY

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 “hành động” 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>


Để 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 Nộpvà 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 Nộp.

  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 Đệ trình chuyển hướng. 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.

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 bắt đầu chấp 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ợ.

Nếu bạn chưa quen với việc tạo biểu mẫu bằng HTML và JavaScript, bạn cũng có thể tìm hiểu thêm về xác thực biểu mẫu phía máy khách. Điều này giúp đảm bảo rằng biểu mẫu liên hệ của bạn có thể xác thực tất cả thông tin người dùng nhập.


Mẫu giấy nằm trên bàn

Cách triển khai xác thực biểu mẫu phía máy khách với JavaScript

Đọc tiếp


Giới thiệu về tác giả

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *