Cách tạo Biểu mẫu liên hệ HTML5 / CSS3 dựa trên Ajax

 
 
  
Email của bạn đã được gửi. Huzzah!
  

  
Lỗi khi gửi biểu mẫu
  
 
 Tên   
  
 
 E-mail   
  
 
 Thông điệp <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 Gửi thư cho chúng tôi!  
 
  

Bạn có thể nhận thấy có một cái khác khối điều kiện trực tiếp sau khi bắt đầu hình thức. Điều này kiểm tra một biến có tên $ hasError và sẽ hiển thị một thông báo lỗi sau khi xác nhận. Phương pháp dự phòng này là chỉ được sử dụng nếu JavaScript bị tắt trong trình duyệt và do đó không thể tạo ra lỗi động.

Tất cả các cách chúng ta có thể tìm thấy các biến PHP riêng lẻ đang được kiểm tra Các báo cáo đang điều chỉnh nếu biểu mẫu đã được gửi với chỉ một phần dữ liệu được điền vào. Đây là một hệ thống dự phòng khác hiển thị nội dung của các trường đã được điền - một mẹo hay cho trải nghiệm người dùng thích hợp!

Ngay sau khi hoàn thành mẫu của chúng tôi là một vài Các hàm jQuery chúng tôi đã viết. Chúng tôi sẽ nói về những điều này trước vì chúng là cài đặt mặc định trên pageload. Tuy nhiên, nếu trình duyệt không chấp nhận JavaScript thì theo mặc định, chúng tôi có thể dựa vào mã PHP của mình.

Mở ra jQuery

Cách dễ nhất để bắt đầu nói về chủ đề này là lặn ngay. Tôi sẽ chia nhỏ từng khối từng dòng một để bạn có thể thấy kịch bản đang thực sự kiểm tra.

Tuy nhiên nếu bạn bị lạc xem lại các tập tin mã dự án. Tất cả các khối đầy đủ được viết sẵn và được ghi lại tốt trong trang web jQuery. Để bắt đầu, chúng tôi mở mã của chúng tôi tương tự như bất kỳ khác:

Nếu bạn quen thuộc với gọi lại bạn có thể nhận thấy bài đăng() Hàm có một bộ tham số tích hợp. Gọi lại là các chức năng nhỏ hơn được gọi là dựa trên phản hồi của dữ liệu từ chức năng khác.

Vì vậy, ví dụ, khi chúng ta jQuery.post () Chức năng bắn thành công một e-mail, nó sẽ gọi chức năng bên trong của chính nó để hiển thị hình ảnh động trượt. Tất cả các mã này có thể được viết trong khối riêng của nó và di chuyển đi nơi khác. Tuy nhiên, vì mục đích của hướng dẫn này, việc viết hàm gọi lại như là một hàm nội tuyến dễ dàng hơn nhiều.

Vượt qua PHP của chúng tôi

Rào cản cuối cùng phải kể đến là logic đằng sau bộ xử lý PHP của chúng tôi. Đây là hệ thống phụ trợ thực sự sẽ gọi một chức năng thư và gửi tin nhắn. Tất cả các mã được sử dụng trong các ví dụ dưới đây có thể được tìm thấy trực tiếp ở đầu chính của chúng tôi .php tệp, trước bất kỳ đầu ra HTML nào.

Ngoài ra còn có một vài phong cách nội bộ làm mới trang. Không có gì mới đặc biệt ở đây vì vậy chúng tôi sẽ không đi sâu vào bất kỳ chi tiết nào. Tuy nhiên style.css tài liệu được bao gồm trong mã dự án và chứa các kỹ thuật CSS3 thô sơ.

 
Để bắt đầu, chúng tôi mở mệnh đề PHP và kiểm tra nếu mẫu đơn thậm chí đã được gửi. Các BÀI ĐĂNG biến “đã nộp” thực sự là một trường đầu vào ẩn được thêm vào cuối mẫu của chúng tôi. Đó là một cách hữu ích để kiểm tra xem người dùng đã gửi gì chưa Tuy nhiên, vì vậy chúng tôi không lãng phí tài nguyên máy chủ.
 
Sau này chúng ta có 3 cái riêng. nếu khác kiểm tra tuyên bố để xem nếu mỗi trường đầu vào đã được điền. Tôi sẽ không bao gồm từng bit logic ở đây vì tất cả chúng đều rất lặp đi lặp lại trong tự nhiên. Tuy nhiên, để cho bạn một ví dụ ngắn gọn, tôi đã bao gồm điều khoản xác minh e-mail bên dưới:
 
// cần email hợp lệ if (trim ($ _ POST ['email']) === ") $ emailError = 'Quên nhập địa chỉ email của bạn.'; $ hasError = true; khác if (! preg_match ("/ ^ [[: alnum: [[[a-z0-9_.- [* @ [a-z0-9.- [+ \. [j [] [2] _POST ['email']))) $ emailError = 'Bạn đã nhập địa chỉ email không hợp lệ.'; $ HasError = true; khác $ email = trim ($ _ POST ['email']); 
 
PHP sẽ cắt tất cả các khoảng trắng từ giá trị và kiểm tra xem có gì còn sót lại không. Nếu vậy chúng tôi có một chi tiết Biểu thức chính quy (Regex) để xem chuỗi đầu vào của người dùng của chúng tôi có khớp với mẫu e-mail không.
 
Bạn chắc chắn không cần phải hiểu preg_match () hoạt động để xây dựng kịch bản này. Nó là một chức năng hữu ích để xác định các quy tắc và yêu cầu cho một loại dữ liệu thành công, nhưng ra lệnh kiến ​​thức lập trình nâng cao để thực sự nắm bắt. Trong kịch bản này, chúng tôi đảm bảo người dùng chỉ nhập một vài ký tự được chọn, bao gồm một @ biểu tượng theo sau 2-4 ký tự đại diện cho một Tên miền cấp cao.
 
Sau khi tất cả logic của chúng tôi trôi qua và chúng tôi trả lại không có lỗi, đã đến lúc gửi tin nhắn của chúng tôi! Bit mã này sẽ đặt các biến riêng lẻ để tùy chỉnh thông điệp email của chúng tôi và thiết lập một số tiêu đề thư cho quá trình.
 
// khi không có lỗi thất bại, hãy gửi email ngay bây giờ! if (! [et ($ hasError)) $ emailTo = '[email protected]'; $ topic = 'Tin nhắn được gửi từ'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Tên: $ name \ n \ nEmail: $ email \ n \ nComments: $ bình luận"; $ tiêu đề = 'Từ:'. ' <'.$emailTo.'>'. "\ r \ n". 'Trả lời: ' . $ email; thư ($ emailTo, $ chủ đề, $ body, $ tiêu đề); // đặt giá trị hoàn thành boolean của chúng tôi thành TRUE $ emailSent = true;  
 
Nếu bạn đang tự hỏi làm thế nào mã sẽ tìm ra địa chỉ e-mail của bạn, thì đây là phần để điền vào. Biến đầu tiên trong bộ của chúng tôi có tiêu đề $ emailĐể và nên chứa bất cứ điều gì địa chỉ email sẽ nhận được tin nhắn.
 
Bên trong chúng ta $ cơ thể biến chúng ta tận dụng \ n dấu phân cách để thêm dòng mới vào tin nhắn. Điều này thêm các vị trí nhỏ cho tên người gửi, địa chỉ email, tiếp theo là nghỉ ngơi cho họ Nội dung tin nhắn. Tất nhiên bạn có thể dành thời gian làm đẹp màn hình, nhưng cấu trúc này hoạt động tốt.
 
Phần kết luận
 
Điều này đóng hướng dẫn của chúng tôi cho một hình thức liên lạc nâng cao. Nếu bạn muốn tạo kiểu cho các yếu tố của mình liên quan đến tôi, bạn có thể xem ví dụ của tôi style.css trong mã dự án. Tuy nhiên, trang được cấu trúc đủ tốt để bạn có thể thiết kế giao diện của riêng mình & cảm nhận rất dễ dàng.
 
Vui lòng tải xuống mã nguồn và kiểm tra những gì tôi đã làm gần hơn một chút. Thật tốt khi làm theo hướng dẫn nhưng có quyền truy cập trực tiếp vào nguồn dự án có thể là vô giá. Tôi cũng đã bao gồm một biểu định kiểu ngắn gọn để làm cho các tùy chỉnh trở nên dễ dàng, cảm ơn vì quan điểm của bạn!