Form liên hệ có file đính kèm PHP

Các biểu mẫu liên hệ luôn là một giải pháp thay thế khá hiệu quả cho các liên kết mailto lan truyền khắp các trang web. Và đó vẫn là trường hợp vào năm 2022.  

Chúng dễ sử dụng đối với khách hàng và khó phát hiện hơn đối với những người thu thập email. Như bạn mong đợi, việc xây dựng một biểu mẫu liên hệ email PHP hiệu quả không khó chút nào. Chúng tôi sẽ giải thích quy trình từng bước trong bài viết này

Về cơ bản chúng ta sẽ làm điều này

• Tạo một biểu mẫu liên hệ HTML đơn giản với các trường nhập [và CSS tùy chọn] và nhúng nó vào trang web của chúng tôi
• Viết một tập lệnh PHP sẽ xử lý hiệu quả việc gửi email
• Lưu các chi tiết đã chèn vào bảng tính
• Gửi thư trả lời tự động cho người dùng, cho họ biết chúng tôi sẽ xử lý yêu cầu của họ
• Cung cấp tổng quan về một số vấn đề phổ biến với việc gửi biểu mẫu email PHP

Chúng tôi sẽ không chỉ giải thích cách tạo biểu mẫu email php mà còn chỉ cho bạn cách bảo mật biểu mẫu thư bằng reCaptcha và cách thực hiện xác thực biểu mẫu cũng như cách xử lý các lỗi phổ biến. Vì vậy, hãy bắt đầu

Hướng dẫn xây dựng biểu mẫu liên hệ PHP đơn giản

Để bắt đầu, chúng ta sẽ cần xây dựng một biểu mẫu đơn giản chỉ bằng mã HTML. Nếu bạn không quan tâm nhiều đến khía cạnh trực quan của nó, nó có thể đơn giản như thế này

Contact us
First Name: 

  


Email Address: 
Message:   

Tất nhiên, không có bất kỳ CSS nào, nó trông rất xấu

Nhưng nó sẽ tốt cho mục đích trình diễn. Nếu bạn không thích viết CSS vào lúc này, bạn có thể sử dụng bất kỳ mẫu nào trong số hàng trăm mẫu và trình tạo biểu mẫu email có sẵn với thiết kế đẹp mắt cho các trường nhập của dữ liệu biểu mẫu, các nút gửi hấp dẫn và thiết kế UX tổng thể hấp dẫn.  

Một số tùy chọn bao gồm Simfatic, 123FormBuilder và PHP Jabbers. CodeCanyon có hàng trăm công cụ với các đánh giá cho từng công cụ để giúp bạn lựa chọn dễ dàng hơn.   

Được rồi, chúng tôi đã có biểu mẫu liên hệ, nhưng bất kỳ dữ liệu nào người dùng chèn vào đều đi thẳng vào lỗ đen. Vì vậy, chúng ta sẽ cần thêm hai thành phần nữa vào biểu mẫu–ACTION và METHOD

Trong trường hợp của chúng tôi, chúng tôi muốn tải một trang PHP mới ở chế độ nền mà chúng tôi sẽ đề cập trong chương tiếp theo. Vì chúng tôi sẽ xử lý dữ liệu nên chúng tôi có nghĩa vụ pháp lý phải bảo vệ thông tin chi tiết của người dùng [tên và địa chỉ email], khiến phương thức POST trở thành một lựa chọn an toàn hơn. Sử dụng GET có nghĩa là những chi tiết này được đưa vào URL của trang tiếp theo, điều mà chúng tôi muốn tránh. Hãy nhớ rằng URL có giới hạn của nó [giá trị dấu gạch chéo ở cuối không được vượt quá 2.048 ký tự], do đó, phương thức GET thực sự không thể được sử dụng cho biểu mẫu liên hệ do giới hạn URL

Tất cả những gì chúng ta cần làm bây giờ là đưa hai thuộc tính này vào mã mà chúng ta đã sử dụng trước đây

Contact us
First Name: 
Email Address: 

  


Message:   

Xác thực và xác minh dữ liệu

Để loại bỏ một số kẻ gửi thư rác, nhưng cũng để bảo vệ người dùng của bạn khỏi vô tình nhập nhầm chi tiết liên hệ của họ, bạn nên thêm một số thuật toán xác thực vào biểu mẫu liên hệ. Để có cơ hội thành công cao nhất, hãy cân nhắc thực hiện việc này trên cả phía máy khách và phía máy chủ.  

Xác thực phía máy khách sẽ nhanh chóng trả về bất kỳ lỗi nào trên giao diện người dùng, cho phép người dùng khắc phục chúng ngay lập tức. Xác minh phía máy chủ cũng sẽ bắt được những người đã vượt qua bài kiểm tra ban đầu [ví dụ: bằng cách tắt JavaScript trong trình duyệt] nhưng không nên

Mặc dù bạn có thể viết tập lệnh của riêng mình nhưng việc sử dụng những gì đã được xây dựng và thử nghiệm thường rất đáng giá. Chúng tôi sẽ sử dụng giải pháp chống đạn để xác thực lược đồ – https. // xác thực js. tổ chức/. Để đơn giản, chỉ cần thêm thư viện từ CDN

   const constraints = {
       name: {
           presence: { allowEmpty: false }
       },
       email: {
           presence: { allowEmpty: false },
           email: true
       },
       message: {
           presence: { allowEmpty: false }
       }
   };

   const form = document.getElementById['contact-form'];

   form.addEventListener['submit', function [event] {
     const formValues = {
         name: form.elements.name.value,
         email: form.elements.email.value,
         message: form.elements.message.value
     };

     const errors = validate[formValues, constraints];

     if [errors] {
       event.preventDefault[];
       const errorMessage = Object
           .values[errors]
           .map[function [fieldValues] { return fieldValues.join[', ']}]
           .join["\n"];

       alert[errorMessage];
     }
   }, false];

Để xác thực phía máy chủ, bạn có thể sử dụng đoạn mã sau