Thực đơn
trang chủExcel

Gửi email modx. Trình diễn cách thức hoạt động của biểu mẫu phản hồi. Tạo một tài liệu mới có tên “Email đã gửi thành công”

Bài học chúng ta sẽ xem xét việc tạo biểu mẫu phản hồi trong CMF Cuộc cách mạng MODX sử dụng các thành phần AjaxForm và FormIt.

Mục đích của các thành phần FormIt và AjaxForm

FormIt là một thành phần (đoạn mã) cho MODX Revolution được thiết kế để xử lý các biểu mẫu ở phía máy chủ. Nó có thể kiểm tra các trường biểu mẫu (xác thực) trước hành động hơn nữa, bảo vệ trang web khỏi nhận thư rác, gửi dữ liệu biểu mẫu qua email, lưu trữ bản sao của các biểu mẫu đã hoàn thành, chuyển hướng đến một trang khác (ví dụ: sau khi gửi thành công biểu mẫu qua email), hoạt động như một công cụ trả lời tự động, v.v.

Nhưng để làm việc với FormIt qua AJAX bạn cần sử dụng thành phần bổ sung AjaxForm.

Cách thức hoạt động của biểu mẫu phản hồi

Trước khi chuyển sang phát triển biểu mẫu phản hồi trong MODX Revolution, chúng ta hãy xem xét thuật toán cơ bản hoạt động của nó.

Sau khi mở một trang có biểu mẫu (nó được lấy từ đoạn được chỉ định trong tham số &form của lệnh gọi đoạn mã AjaxForm khi tạo trang trên máy chủ), người dùng sẽ tiếp tục điền vào. Sau khi hoàn tất, người dùng nhấp vào nút "Gửi" và thành phần AjaxForm ( Mã JavaScript) gửi nó đến máy chủ thông qua AJAX. Trên máy chủ thành phần này chạy đoạn mã FormIt và chuyển dữ liệu biểu mẫu cho nó. Sau khi xử lý dữ liệu này, đoạn mã FormIt sẽ tạo phản hồi, phản hồi này được truyền đến máy khách thông qua thành phần AjaxForm và hiển thị trên trang cho người dùng. Câu trả lời có thể là tích cực (điều này có nghĩa là biểu mẫu đã được xác thực và ví dụ: dữ liệu đã được gửi thành công qua email) hoặc tiêu cực (ví dụ: người dùng đã mắc một số lỗi khi điền biểu mẫu).

Tạo biểu mẫu phản hồi

Để tạo biểu mẫu phản hồi trong MODX Revolution, bạn cần làm theo các bước cơ bản sau:


Hãy xem xét bước 2 và 4 chi tiết hơn.

Tạo một biểu mẫu HTML trong một đoạn

Việc tạo biểu mẫu phản hồi HTML có thể được thực hiện bằng cách sao chép mẫu tpl.AjaxForm.example. Ví dụ: hãy đặt tên cho đoạn được sao chép là tpl.AjaxForm . Đoạn này đã chứa một biểu mẫu HTML tạo sẵn bao gồm 3 trường: Tên, E-mail và Tin nhắn. Các hành động chính cần thực hiện với biểu mẫu sẽ chủ yếu là thêm danh mục mới hoặc xóa danh mục hiện có. Theo danh mục, chúng tôi muốn nói đến một nhóm các phần tử được kết nối với nhau: nhãn, phần tử biểu mẫu (đầu vào, chọn, vùng văn bản) và phần tử span (được sử dụng để hiển thị lỗi xác thực).


Những khoảnh khắc cơ bản:

  • Văn bản của nhãn (phần tử nhãn). Thường được lấy từ từ điển (đối với các trang web đa ngôn ngữ) hoặc được biểu thị trực tiếp bằng văn bản.
  • Phần tử span phải có thuộc tính lớp với giá trị error_name trong đó cụm từ tên phải được thay đổi thành giá trị thuộc tính tên phần tử biểu mẫu mà sau đó nó được đặt.

Lưu ý: sử dụng phần giữ chỗ [[+fi.name]] làm giá trị thuộc tính value của phần tử biểu mẫu và phần giữ chỗ [[+fi.error.name]] làm nội dung của phần tử span chỉ phù hợp với tác phẩm cổ điển với FormIt , tức là không có AJAX. Chúng được sử dụng để điền vào biểu mẫu khi nó được gửi lại nhằm lưu các giá trị mà người dùng đã nhập và hiển thị các lỗi xác thực.

Ví dụ: hãy thêm vào biểu mẫu HTML trường đầu vào số điện thoại:

Điện thoại:

Kết quả là đoạn này sẽ chứa mã HTML sau:

Tên* Email* Tin nhắn điện thoại* Xóa Gửi

Tạo mã chứa lệnh gọi đoạn mã AjaxForm

Chúng tôi mở mẫu sẽ sử dụng tài nguyên và nhập mã sẽ triển khai tất cả điều này.

[[!AjaxForm? &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,email` &emailSubject=`Kiểm tra tin nhắn` &emailTo=` [email được bảo vệ]` &emailTừ=` [email được bảo vệ]` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=`Biểu mẫu có lỗi!` &successMessage=`Đã gửi tin nhắn thành công` ] ]

Hãy xem xét các thông số chính:

  • &form – chịu trách nhiệm về đoạn chứa biểu mẫu (tpl.AjaxForm).
  • &snippet - đoạn mã xử lý biểu mẫu (FormIt).
  • &hooks – các hook mà đoạn mã FormIt sẽ thực thi sau khi xác thực biểu mẫu thành công (1 - FormItSaveForm, 2 - email). Móc là các tập lệnh được khởi chạy sau khi biểu mẫu đã vượt qua quá trình xác thực. Chúng được chỉ định cách nhau bằng dấu phẩy và chạy tuần tự lần lượt. Nếu xảy ra lỗi ở một trong số chúng thì những lỗi khác sẽ không khởi động được. Trong hướng dẫn này chúng ta sẽ sử dụng 2 hook. Móc FormItSaveForm được thiết kế để lưu biểu mẫu vào cơ sở dữ liệu. Móc email được thiết kế để gửi dữ liệu biểu mẫu qua email.
  • &emailSubject , &emailTo , &emailFrom , &emailTpl – các tham số có giá trị được hook email sử dụng. Chúng nhằm mục đích chỉ ra chủ đề của bức thư (&emailSubject), địa chỉ gửi (&emailTo), tiêu đề From (&emailFrom) và mẫu thư (&emailTpl).
  • &validate – tham số dựa trên giá trị mà biểu mẫu được xác thực. Giá trị tham số là danh sách các phần tử được phân tách bằng dấu phẩy. Mỗi phần tử bao gồm tên của phần tử biểu mẫu (cần kiểm tra) và quy tắc (các yêu cầu đối với phần tử đó), được phân tách bằng dấu hai chấm. Ví dụ: trình xác thực name:minLength=^2^ sẽ kiểm tra xem trường tên có chứa ít nhất 2 ký tự hay không. Trình xác thực email:email:required kiểm tra xem trường thư có chứa địa chỉ không E-mail. Bạn có thể tìm thấy các quy tắc cơ bản để tạo trình xác thực trên trang "Trình xác thực FormIt".
  • &validationErrorMessage - chứa thông báo sẽ được hiển thị nếu biểu mẫu có lỗi.
  • &successMessage - thông báo người dùng sẽ thấy nếu tin nhắn được gửi thành công.

Tất cả những gì còn lại là tạo một đoạn tpl.email, đoạn này sẽ chứa mẫu thư.

Tin nhắn

Từ: [[tên]]

Email: [[+email]]

Điện thoại: [[điện thoại]]

Tin nhắn: [[+tin nhắn]]

MODX - Tách tpl.email

Chú ý: Để hiển thị các giá trị của các trường biểu mẫu, phần giữ chỗ được sử dụng.

Minh họa cách thức hoạt động của biểu mẫu phản hồi

Chúng tôi sẽ trình bày những điểm chính khi làm việc với biểu mẫu phản hồi trên trang bằng các hình ảnh sau.


MODX - Biểu mẫu phản hồi không được xác thực



Chào buổi chiều Hôm nay tôi sẽ giới thiệu với bạn cách tạo một biểu mẫu phản hồi cho Modx Revolution, tính năng của nó sẽ là một hình ảnh xác thực khác thường (vì qaptcha của Google quá phức tạp và cồng kềnh). LÀM nhận xét chúng tôi sẽ sử dụng tiện ích bổ sung Formit. Chắc các bạn có thể tự cài được, nhưng với những ai chưa biết cách thì mình vẫn ghi bài từ đầu đến cuối. Bắt đầu!

Tôi sẽ bỏ qua tất cả những phần liên quan đến cài đặt MODX Revolution, thiết lập hệ thống, nhúng thiết kế trang web, v.v. Hãy bắt đầu bằng cách cài đặt gói Formit.

1. Vào Hệ thống - Quản lý gói

2. Nhấp vào "Tải xuống tiện ích bổ sung"

3. Chọn từ danh sách Hình thức

Nhấp vào "tải xuống". Sau khi tải xuống Formit bạn sẽ thấy các gói đã tải xuống, nhấp vào nút cài đặt. Biểu mẫu đã được cài đặt!

4. Tiếp theo, tạo một đoạn mới

Hãy gọi nó là "biểu mẫu" và dán đoạn mã sau:

[[!Qaptcha]] [[!FormIt?&hooks=`spam,email,redirect` &emailTpl=`sentEmailTpl` &emailSubject=`Yêu cầu gọi lại` &emailTo=`địa chỉ email của bạn` &redirectTo=`page id "Email đã được gửi thành công "` &validate=`contact_name:required,contact_phone_NA_format:required` &customValidators=`qaptcha.Slider`]] Tên\Công ty* Điện thoại* E-mail [[+qaptcha.Slider]]

Đây là lệnh gọi đến đoạn mã Formit, biểu mẫu và hình ảnh xác thực mà chúng tôi sẽ thực hiện trong các đoạn sau. Đừng quên trong tham số emailTới biểu thị Hộp thư, nơi lá thư sẽ được gửi đến, và trong chuyển hướng tới bạn cần đặt id trang "Email đã gửi thành công"

5. Tạo một đoạn sendEmailTpl

Anh ấy sẽ cho bạn biết thông tin nào cần gửi qua email và chèn mã vào đó:

Tên: [[+contact_name]]
Email: [[+contact_email]]
Điện thoại: [[+contact_phone_NA_format]]
Lưu ý: [[+contact_message]]

6. Tạo tài liệu mới có tiêu đề "Email đã được gửi thành công"

Bạn có thể chèn văn bản như: Chúng tôi đã nhận được thư của bạn! Cảm ơn bạn đã lựa chọn công ty chúng tôi. Người quản lý của chúng tôi ở sớm nhất có thể sẽ liên lạc với bạn bằng cách Số điện thoại liên hệ, mà bạn đã để lại trong ứng dụng!

7. Bây giờ hãy giải quyết vấn đề Captcha

Chúng tôi kết nối thư viện jquery với trang:

8. Tạo thư mục tài sản/thành phần/qaptcha/ Và lõi/thành phần/qaptcha/

Để lập danh mục tài sản/thành phần/qaptcha/đặt các hình ảnh thư mục và jquery với nội dung và trong lõi/thành phần/qaptcha/ - thư mục php với tệp Qaptcha.jquery

9. Tạo đoạn mã Qaptcha

và đặt đoạn mã sau vào đó: