Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

Mẹo nhỏ: Thêm một Formspree vào các trang web tĩnh của bạn

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hướng dẫn này chúng ta sẽ tìm hiểu một vấn đề—cách dễ dàng để thêm các form động, linh hoạt vào các trang web tĩnh của bạn.

Đặt vấn đề

Hãy tưởng tượng bạn vừa mới tạo một trang web bằng cách sử dụng các trang tĩnh, cho dù đó là với sự trợ giúp của Jekyll hoặc đơn giản là sử dụng một số tập tin HTML, nhưng bây giờ bạn muốn thêm một form liên lạc. Bạn có thể liên kết tới một dịch vụ online, cài đặt vài thứ được xây dựng sẵn vào trong máy chủ của bạn, hoặc xây dựng thứ gì đó từ đầu sử dụng PHP. Điều này có nghĩa là bạn hoàn toàn bị hạn chế trên thiết kế, hoặc bạn mất quá nhiều công sức cho một form hơn là cho toàn bộ trang web.

Giải pháp

Điều gì xảy ra nếu bạn có thể sử dụng một dịch vụ cho phép bạn kiểm soát đầy đủ lên form, không yêu cầu bạn cài đặt bất cứ thứ gì lên máy chủ? Hãy truy cập Formspree, một dịch vụ online cung cấp cho bạn khả năng tạo các form HTML đầy đủ chức năng mà không cần sử dụng PHP hoặc JavaScript.

Cho phép tôi cung cấp cho bạn một giới thiệu vắn tắt các bước cần thiết để có được form của bạn.

Tạo Form của bạn

Điều đầu tiên mà bạn sẽ cần là một form mà chúng ta sẽ xây dựng từ đầu trong HTML. Form của tôi sẽ là cách đơn giản nhất để cho mọi người liên hệ với tôi — Tôi sẽ có một trường dành cho tên của họ, email, và thông điệp của họ. Dưới đây là mã đánh dấu của form:

Bạn thấy tôi đã thêm một nút submit và bao tất cả các trường lại bên trong một phần tử <form>.

Chúng ta có thể định phong cách cho form tuỳ ý: Không có iframe hoặc bất kỳ thứ gì khác hạn chế giao diện của nó.

Thêm thuộc tính

Để cho Formspree xử lý form của bạn, bạn sẽ cần thêm thuộc tính action sau đây vào phần tử <form> của bạn:

Bạn sẽ cần thay đổi "your@email.com" thành email mà bạn muốn nhận.

Điều tiếp theo cần phải làm là cho mỗi trường một thuộc tính name; những cái này sẽ là nhãn xuất hiện mỗi khi bạn nhận một liên hệ từ form. Bạn cũng có thể sử dụng các giá trị Formspree đặc biệt được thêm vào đằng trước một dấu gạch dưới.

Lưu ý rằng trường name và message được đặt tên tương ứng, nhưng tôi đã sử dụng giá trị đặt biệt "_replyto" cho trường email. Formspree sẽ nhận biết giá trị thuộc tính này, và sau đó cho phép tôi trả lời trực tiếp đến email được nhập vào form khi nó được gởi.

Gi nhớ phương pháp của bạn

Tôi có thể thêm _next vào một input ẩn khác để thiết lập url nào mà tôi muốn người dùng được chuyển đến khi họ đã gởi form.

Chủ đề

Để tôi biết các liên hệ đến từ đâu, tôi sẽ thêm một dòng chủ đề. Tôi có thể làm điều này bằng cách thêm input ẩn sau đây:

Trường này sẽ không xuất hiện khi một người dùng xem form, nhưng giá trị sẽ được sử dụng cho dòng chủ đề khi tôi nhận một liên hệ.

Bảo mật Form của bạn

Tích hợp trong Formspree có một phương thức "honeypot" để hạn chế spam. Kỹ thuật honeypot là khá đơn giản; bạn ẩn một trường bên trong form của bạn mà người dùng không nhìn thấy, nhưng spambot thì thấy. Spambot sẽ điền vào trường, trong khi người dùng thì không. Bất kỳ liên hệ nào mà có trường này sẽ bị xem là spam.

Bạn có thể sử dụng kỹ thuật này bằng cách thêm code sau đây vào form của bạn:

Điều quan trọng là bạn sử dụng một thuộc tính style để ẩn trường. Trình duyệt của người dùng sẽ ẩn trường bằng cách sử dụng CSS, nhưng spambot sẽ (chắc chắn) bỏ qua CSS và tiếp tục điền vào trường. Bằng cách đặt tên trường là "_gotcha", Formspree sẽ nhận biết nó và bỏ qua bất kỳ liên hệ nào được thực hiện với trường này.

Để thêm bảo mật bạn có thể gói email của bạn trong JavaScript. Việc này sẽ giảm khả năng spambot sẽ tìm kiếm và lấy email của bạn từ HTML. Hãy xem những gì tôi đã thực hiện:

Ở đây tôi đã loại bỏ thuộc tính action khỏi phần tử <form>, và sau đó sử dụng một mẫu nhỏ JavaScript để thiết lập cho nó. Tôi cũng đã phân đoạn email để che nó khỏi spambot. Bạn có thể tự do sao chép điều này và thay thế các phân đoạn của email bằng cái của bạn.

Kiểm tra Form của bạn

Bước cuối cùng là đảm bảo form của bạn hoạt động. Truy cập trang chứa form của bạn trong trình duyệt web, điền vào form và gởi nó như bình thường.  Bạn sẽ nhận được một email từ Formspree yêu cầu bạn xác nhận email của bạn.

Nhấp vào liên kết xác nhận và bạn sẽ hoàn tất!

Lưu ý: bạn sẽ cần trải qua quá trình xác nhận này mỗi khi bạn thêm form vào một trang mới.

Tổng kết

Formspree API cung cấp một cách dễ dàng và rất linh hoạt để thêm form vào trong một trang web. Rất phù hợp cho các trang web tĩnh!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.