Show Bài viết này mình xin chia sẻ với các bạn cách tạo Form liên hệ không dùng Backend một cách dễ dàng và nhanh gọn nhất có thể bằng cách sử dụng FormSubmit.
Vấn đềNhư thường lệ, khi bạn tạo một mẫu form trong lập trình thì việc kết hợp ngôn ngữ lập trình PHP (hay thậm chí là MySQL) là điều chắc chắn phải làm. Tuy vậy, nếu bạn chỉ rành về Frontend nhưng không rành PHP và MySQL thì làm sao bây giờ? Dùng Google Form? Không chuyên nghiệp! Nhờ người có kinh nghiệm? Có thể sẽ tốn phí, không cần thiết. Vì thế, để giải quyết vấn đề, FormSubmit đã ra đời. FormSubmit là gì?Với FormSubmit, bạn hoàn toàn có thể tự thiết kế form HTML cho chính mình mà không cần phải sử dụng giao diện bên thứ 3 như Google,... Đây có thể coi là giải pháp khá ổn nếu bạn muốn tự tạo form tuỳ chỉnh một cách chuyên nghiệp hơn, không lệ thuộc vào Google hay bên thứ 3 nào khác. Nếu vậy thì FormSubmit có cần bổ sung thêm Javascript không? Hoàn toàn không! Bạn chỉ cần tích hợp nó vào trong một mẫu form đơn giản bằng HTML và mọi thứ đã hoàn tất. Cách FormSubmit hoạt độngCơ chế hoạt động của nó cũng tương đối đơn giản. Bạn thêm một URL vào phần action của một form và thế là xong. Người dùng chỉ cần nhập đủ các yêu cầu Form bạn thiết kế và nhấn Gửi thôi. Tuy vậy, nó chỉ có thể giúp bạn có thể nhận lời nhắn từ người dùng mà thôi, không xử lý các tác vụ phức tạp được. Ngoài ra, nó cũng có hỗ trợ reCaptcha nữa, hạn chế Spam một cách tối đa. Hướng dẫn cách tạo Form không dùng Backend bằng FormSubmitĐể sử dụng, bạn tạo một form theo mẫu sau:
Sau đó, bạn chỉ cần đổi thành email của bạn, rồi nhập dữ liệu giả vào (ví dụ như lần lượt từng ô nhập vào là test, test@test và test) rồi nhấn gửi. Nó sẽ gửi cho bạn một email với tiêu đề "Action Required: Activate FormSubmit on url-cua-ban" để xác nhận sẽ nhận lượt gửi từ url bạn đặt form đó (chú ý là bạn phải đặt trên localhost - host cá nhân dùng XAMPP hoặc AMPPS, hoặc dùng hosting). Bạn vào thư đó và click xác nhận ACTIVATE FORM, sau khi nhấn vào mà nó chuyển sang trang có giao diện như thế này là hoàn tất. Và sau này, người dùng chỉ cần nhập theo form bạn đã thiết kế bằng HTML và CSS là xong. Có điều là người dùng sẽ phải biết chút ít về Tiếng Anh mới dễ thao tác ý :v Một số tính năng nâng caoCác tính năng nâng cao chính như: _replytoCái này thì mặc định form nào cũng có cả rồi, tính năng này sẽ giúp bạn có thể reply (phản hồi) với người đã gửi form. Để kích hoạt tính năng này bạn thêm đoạn mã dưới vào form (trong thẻ <form></form>)
_nextMặc định thì khi gửi form thì người dùng sẽ được chuyển thẳng tới Landing page của FormSubmit luôn, tuy nhiên nếu bạn muốn thay đổi thì chỉ cần thêm đoạn bên dưới vào form là được.
Và nhớ thay URL https://example.com/landingpage.html thành URL của bạn _subjectTính năng này dùng để thêm Tiêu đề của thư bạn muốn gửi đến. Ví dụ bạn không muốn dùng tiêu đề mặc định thì có thể dùng tính năng này. Để kích hoạt bạn thêm đoạn sau vào form:
Trong đó ngay chỗ "Tiêu đề mới!" bạn thay thành tiêu đề bạn chọn là xong. _ccCC này không phải nói tục đâu nghen ) Đây là chức năng của email đó. Dạng như nó sẽ tạo bản sao rồi gửi cho nhiều người cùng lúc. Tính năng này đôi khi cũng khá hữu ích với bạn đó.Ví dụ bạn muốn tạo bản sao cho email đi thì chỉ cần thêm đoạn sau:
Thay thành email bạn muốn là được, nếu bạn muốn tạo nhiều bản sao rồi gửi nhiều email cùng lúc thì phân cách mỗi email bằng dấu phẩy như này:
Nhớ thay với thành các email của bạn! _honeyTính năng này thì cũng không hữu dụng lắm vì chủ yếu khi bạn muốn tắt form đi thì kích hoạt nó là xong. Nhưng dùng reCaptcha của Google rồi thì không cần thêm vào nữa. Nếu thích thì bạn có thể kích hoạt bằng cách thêm đoạn sau:
Nhớ thêm style="display:none" vào tag input để ẩn nó nhé! Tắt reCaptcha bằng _captchaBạn có thể tắt reCaptcha bằng tính năng này nếu không muốn sử dụng tính năng reCaptcha của Google, nhưng mình khuyên bạn không nên tắt reCaptcha vì nó sẽ tạo điều kiện cho các email SPAM vô tội vạ vào hòm thư của bạn. Nhưng nếu bạn vẫn muốn tắt thì thêm đoạn sau vào form:
_autoresponseBạn có thể thiết lập tin nhắn tự động trả lời thông qua kích hoạt tính năng sau bằng đoạn mã:
Thay dòng "Tin nhắn của bạn" thành đoạn văn bản bạn muốn, nhớ thêm tag input email vào mới kích hoạt được nha:
_templateBạn cũng có thể đổi template cho thư mình nhận khi người dùng gửi form nữa đó. Hiện thì FormSubmit hỗ trợ 3 loại: basic (mặc định), table, box. Loại basic Loại table Loại box Để có thể thay đổi thì bạn dùng đoạn mã sau vào form:
Các tính năng nâng cao khác_webhookĐây là tính năng nâng cao dành cho API. Khi gửi form thì sẽ kích hoạt API luôn.
Bạn có thể xem ví dụ về API của FormSubmit tại đây Ẩn emailBạn còn nhớ cái email bạn đầu bạn nhận để Activate form không, nó có gửi bạn một cái dãy dài ngoằn ngay chỗ "Use this email address alias..." đó, đó chính là email của bạn đã mã hoá đó. Với cách này, bạn có thể bảo đảm cho địa chỉ email của bạn an toàn khỏi những Spammer, bạn có thể kích hoạt bằng cách đổi URL ngay chỗ action thành:
Thay doan-ma bằng cái chuỗi mà bạn nhận được trong email đó là xong. Upload fileBạn cũng có thể cho phép người dùng kèm file vào nữa, bạn chỉ cần thêm enctype="multipart/form-data" vào thẻ form (bên cạnh action) và thêm thẻ này vào form:
Tuy vậy, cách này không khuyến khích vì có thể xảy ra các lỗi bảo mật. Form Ajax (động)Nếu bạn không muốn chuyển trang khi nhấn gửi thì tính năng này rất phù hợp với bạn. Chỉ cần thêm đoạn sau vào nơi cuối cùng của file HTML là xong:
Đổi thành email của bạn hoặc chuỗi bạn nhận được trong email ban đầu. Truy cập vào khu lưu trữ form người dùng đã gửiBạn xem thêm về API của họ tại đây Tóm lạiBài viết này tương đối dài, nhưng mình đã tóm gọn lại rồi, hy vọng qua bài này bạn có thể tự tạo một form mẫu và dùng nó để nhận tin nhắn người dùng gửi đến một cách tốt nhất nhé. Chúc các bạn thành công! |