Các biểu mẫu là cần thiết cho bất kỳ trang web nào—từ các biểu mẫu liên hệ đơn giản đến các quy trình đăng ký nhiều bước phức tạp. Elementor Pro bao gồm một widget Biểu mẫu tích hợp giúp loại bỏ nhu cầu về một plugin biểu mẫu riêng biệt trong nhiều trường hợp. Trong hướng dẫn này, chúng tôi sẽ hướng dẫn cách tạo các biểu mẫu liên hệ, biểu mẫu đăng ký và biểu mẫu nhiều bước bằng cách sử dụng Elementor Pro, cùng với các tùy chọn tích hợp cho tiếp thị qua email và dịch vụ CRM.
Hướng dẫn này yêu cầu Elementor Pro. Phiên bản miễn phí của Elementor không bao gồm widget Biểu mẫu.
Tổng quan về Widget Biểu mẫu Elementor
Widget Biểu mẫu Elementor hỗ trợ các loại trường sau:
| Loại Trường | Trường Hợp Sử Dụng | Ghi Chú |
|---|---|---|
| Văn bản | Tên, công ty, tiêu đề | Nhập liệu văn bản một dòng |
| Thu thập địa chỉ email | Bao gồm xác thực định dạng email | |
| Textarea | Nội dung tin nhắn, bình luận, mô tả | Văn bản nhiều dòng với số hàng có thể cấu hình |
| Điện thoại | Số điện thoại | Kích hoạt bàn phím số trên di động |
| Số | Số lượng, ngân sách, đánh giá | Xác thực min/max/bước |
| URL | Địa chỉ trang web | Xác thực định dạng URL |
| Chọn | Lựa chọn từ danh sách thả xuống (quốc gia, danh mục) | Chọn một hoặc nhiều |
| Radio | Lựa chọn đơn từ các tùy chọn (loại dịch vụ) | Các tùy chọn hiển thị mà không cần danh sách thả xuống |
| Checkbox | Nhiều lựa chọn (sở thích, dịch vụ) | Cho phép nhiều lựa chọn |
| Ngày | Ngày hẹn, ngày sự kiện | Chọn ngày gốc |
| Thời gian | Lên lịch hẹn | Điều khiển chọn thời gian |
| Tải lên Tệp | Nộp hồ sơ, tài liệu, hình ảnh | Các loại tệp và giới hạn kích thước có thể cấu hình |
| Chấp nhận | Các điều khoản và điều kiện, sự đồng ý của GDPR | Hộp kiểm bắt buộc với liên kết |
| Ẩn | Dữ liệu theo dõi (URL trang, người giới thiệu) | Không hiển thị cho người dùng |
| reCAPTCHA | Bảo vệ chống spam | Hộp kiểm v2 hoặc v3 vô hình |
| Honeypot | Chống spam (vô hình với con người) | Trường ẩn để bắt bot |
Tạo một Biểu mẫu Liên hệ
Bước 1: Thêm Widget Biểu mẫu
- Mở bất kỳ trang nào trong trình chỉnh sửa Elementor
- Tìm kiếm "Biểu mẫu" trong bảng widget
- Kéo widget Biểu mẫu vào bố cục của bạn
- Biểu mẫu mặc định bao gồm các trường Tên, Email và Tin nhắn
Bước 2: Cấu hình Các Trường Biểu mẫu
Đối với một biểu mẫu liên hệ tiêu chuẩn, cấu hình trường này hoạt động tốt:
- Tên (Trường văn bản, bắt buộc) – Placeholder: "Tên của bạn"
- Email (Trường email, bắt buộc) – Placeholder: "[email protected]"
- Chủ đề (Trường văn bản, tùy chọn) – Placeholder: "Chúng tôi có thể giúp gì?"
- Tin nhắn (Trường textarea, bắt buộc) – Placeholder: "Hãy cho chúng tôi biết về dự án của bạn...", Số hàng: 5
- reCAPTCHA hoặc Honeypot để bảo vệ chống spam
Bước 3: Cấu hình Hành động Sau khi Gửi
Dưới phần "Hành động Sau khi Gửi", cấu hình những gì xảy ra khi người dùng gửi biểu mẫu: For related information, see our guide on Elementor complete guide.
- Email: Gửi dữ liệu biểu mẫu đến địa chỉ email của bạn (hoặc nhiều địa chỉ)
- Chuyển hướng: Gửi người dùng đến trang cảm ơn sau khi gửi
- Popup: Hiển thị một popup xác nhận
- Webhook: Gửi dữ liệu biểu mẫu đến một URL bên ngoài (Zapier, Make, API tùy chỉnh)
- Mailchimp / ConvertKit / Drip: Thêm người đăng ký vào danh sách tiếp thị qua email
- Slack: Gửi thông báo đến một kênh Slack
- Discord: Gửi thông báo đến một webhook Discord
Bước 4: Tùy chỉnh Kiểu dáng Biểu mẫu
Trong tab Kiểu dáng, tùy chỉnh giao diện trực quan: For related information, see our guide on Elementor templates and kits.
- Bố cục biểu mẫu
- Kiểu trường: Các trường xếp chồng (chiều rộng đầy đủ) hoặc theo hàng (bên cạnh nhau)
- Phong cách trường: Đường viền, màu nền, khoảng đệm, bán kính đường viền, màu trạng thái khi tập trung
- Phong cách nhãn: Phông chữ, kích thước, màu sắc, khoảng cách
- Phong cách nút: Màu nền, màu chữ, đường viền, hiệu ứng khi di chuột, tùy chọn chiều rộng đầy đủ
- Thông điệp: Màu sắc và kiểu chữ cho thông điệp thành công và lỗi
Tạo một Mẫu Đa Bước
Các mẫu đa bước rất hữu ích cho các mẫu dài (đăng ký, đơn xin, khảo sát) nơi việc hiển thị tất cả các trường cùng một lúc có thể gây choáng ngợp cho người dùng. Elementor Pro hỗ trợ các mẫu đa bước một cách tự nhiên. For related information, see our guide on creating landing pages with Elementor.
Cách Thiết Lập Các Bước
- Thêm một widget Mẫu vào trang của bạn
- Trong danh sách các trường mẫu, thêm một loại trường "Bước" giữa các nhóm trường
- Mỗi trường Bước tạo ra một bước mới với nút "Tiếp theo" và "Quay lại"
- Cấu trúc ví dụ:
- Bước 1: Tên, Email, Điện thoại (Thông tin cá nhân)
- Bước 2: Công ty, Ngân sách, Thời gian (Chi tiết dự án)
- Bước 3: Tin nhắn, Tải tệp (Thông tin bổ sung)
Các mẫu đa bước hiển thị một chỉ báo tiến độ cho biết người dùng đang ở bước nào. Điều này giảm bớt độ phức tạp cảm nhận và cải thiện tỷ lệ hoàn thành so với việc hiển thị tất cả các trường cùng một lúc.
Tạo một Mẫu Đăng Ký Người Dùng
Elementor Pro có thể tạo các mẫu đăng ký người dùng WordPress mà không cần một plugin riêng biệt:
- Thêm một widget Mẫu và cấu hình các trường (Tên người dùng, Email, Mật khẩu)
- Dưới "Hành động Sau Khi Gửi," thêm hành động "Đăng ký"
- Liên kết mỗi trường mẫu với trường người dùng WordPress tương ứng
- Đặt vai trò người dùng mặc định cho các đăng ký mới
- Tùy chọn chuyển hướng người dùng đến trang tài khoản của họ sau khi đăng ký
Lưu ý: WordPress yêu cầu một quản trị viên phê duyệt người dùng mới theo mặc định. Bạn có thể thay đổi điều này trong Cài đặt → Chung → Thành viên nếu bạn muốn người dùng đăng ký tự do.
Tích Hợp với Các Dịch Vụ Tiếp Thị Qua Email
Elementor Pro tích hợp với các nền tảng tiếp thị qua email phổ biến một cách trực tiếp:
Dịch vụ Loại Tích Hợp Các Bước Thiết Lập Mailchimp Tích hợp tự nhiên (tích hợp sẵn) Thêm khóa API → Chọn danh sách → Liên kết các trường ConvertKit Tích hợp tự nhiên (tích hợp sẵn) Thêm khóa API → Chọn mẫu → Liên kết các trường ActiveCampaign Tích hợp tự nhiên (tích hợp sẵn) Thêm thông tin xác thực API → Chọn danh sách → Liên kết các trường Drip Tích hợp tự nhiên (tích hợp sẵn) Thêm mã API → Chọn tài khoản → Liên kết các trường GetResponse Tích hợp tự nhiên (tích hợp sẵn) Thêm khóa API → Chọn chiến dịch → Liên kết các trường MailerLite Tích hợp tự nhiên (tích hợp sẵn) Thêm khóa API → Chọn nhóm → Liên kết các trường HubSpot Thông qua Webhook Tạo kết nối Zapier/Make với hành động webhook Đối với mỗi tích hợp, quy trình là: nhập khóa API của dịch vụ vào cài đặt tích hợp của Elementor, sau đó chọn dịch vụ như một "Hành động Sau Khi Gửi" trong mẫu của bạn. Liên kết các trường mẫu của bạn với các trường của dịch vụ, và người đăng ký sẽ được thêm tự động khi mẫu được gửi.
Chiến Lược Bảo Vệ Chống Spam
Các mẫu liên hệ thu hút các bot spam. Elementor Pro cung cấp một số tùy chọn ngăn chặn spam:
- Google reCAPTCHA v3: Phát hiện spam vô hình mà không cần tương tác của người dùng. Được khuyến nghị cho hầu hết các mẫu
- reCAPTCHA v2: Hộp kiểm "Tôi không phải là robot". Rõ ràng hơn nhưng có thể giảm tỷ lệ hoàn thành mẫu
- Trường Honeypot: Một trường vô hình mà các bot điền vào. Nếu trường chứa dữ liệu, việc gửi sẽ bị từ chối. Không cần tương tác của người dùng
- Trường Chấp Nhận: Một hộp kiểm bắt buộc (đồng ý GDPR, chấp nhận điều khoản) cũng hoạt động như một biện pháp ngăn chặn bot
Chúng tôi khuyên bạn nên sử dụng reCAPTCHA v3 kết hợp với một trường Honeypot. Điều này cung cấp hai lớp bảo vệ chống spam mà không có bất kỳ tác động nào rõ ràng.
trong trải nghiệm người dùng.
Elementor Forms so với Các Plugin Form Chuyên Dụng
Tính năng Elementor Forms Gravity Forms WPForms Trình xây dựng trực quan Bên trong trình chỉnh sửa Elementor Kéo và thả riêng biệt Kéo và thả riêng biệt Logic điều kiện Cơ bản (hiện/ẩn trường) Nâng cao Nâng cao Tích hợp thanh toán Nút PayPal Stripe, PayPal, Square Stripe, PayPal, Square Tính toán Không Có Có (Pro) Đa bước Có Có Có Tải lên tệp Có Có Có Quản lý nhập liệu Thông qua các bản gửi của Elementor Quản lý nhập liệu đầy đủ Quản lý nhập liệu đầy đủ Cần Trình xây dựng trang Có (Elementor Pro) Không Không Elementor Forms đủ cho các mẫu liên hệ, đăng ký nhận bản tin và các mẫu đăng ký đơn giản. Đối với các mẫu phức tạp yêu cầu xử lý thanh toán, logic điều kiện nâng cao, hoặc quản lý nhập liệu tinh vi, các plugin form chuyên dụng như Gravity Forms hoặc WPForms sẽ phù hợp hơn.
Các Câu Hỏi Thường Gặp
Tôi có thể sử dụng các mẫu Elementor mà không cần Elementor Pro không?
Không. Widget Form là độc quyền của Elementor Pro. Nếu bạn cần các mẫu với phiên bản miễn phí của Elementor, hãy sử dụng một plugin form riêng biệt như Contact Form 7 (miễn phí), WPForms Lite (miễn phí), hoặc Gravity Forms (cao cấp).
Các bản gửi mẫu Elementor được lưu ở đâu?
Các bản gửi mẫu được lưu trong cơ sở dữ liệu WordPress và có thể truy cập dưới Elementor → Bản gửi trong bảng điều khiển quản trị. Bạn có thể xem, xuất (CSV), và xóa các bản gửi. Các bản gửi cũng được gửi đến các địa chỉ email mà bạn cấu hình trong hành động Email.
Các mẫu Elementor có thể chấp nhận tải lên tệp không?
Có. Thêm một trường Tải lên tệp vào mẫu của bạn. Bạn có thể cấu hình các loại tệp được chấp nhận (PDF, JPG, PNG, DOCX, v.v.) và kích thước tệp tối đa. Các tệp đã tải lên được lưu trong thư viện phương tiện WordPress và liên kết với bản gửi mẫu.
Làm thế nào để tôi thêm logic điều kiện vào các mẫu Elementor?
Elementor Pro hỗ trợ logic điều kiện cơ bản: hiển thị hoặc ẩn các trường dựa trên giá trị của một trường khác. Trong cài đặt trường, kích hoạt "Điều kiện" và thiết lập các điều kiện (ví dụ: chỉ hiển thị trường "Công ty" khi nút radio "Tôi là một doanh nghiệp" được chọn). Đối với logic điều kiện nâng cao (tính toán, điều kiện nhiều cấp), một plugin form chuyên dụng có thể phù hợp hơn.
Tôi có thể tạo các mẫu popup với Elementor không?
Có. Tạo một mẫu popup trong Elementor, thêm một widget Form bên trong, và thiết lập các điều kiện kích hoạt (nhấp chuột, tỷ lệ cuộn, ý định thoát, độ trễ thời gian). Điều này hữu ích cho việc đăng ký nhận bản tin, thu hút khách hàng tiềm năng, và các ưu đãi khuyến mãi mà không cần thêm một mẫu vào bố cục trang chính.
Làm thế nào để tôi ngăn chặn spam trên các mẫu Elementor?
Sử dụng Google reCAPTCHA v3 (vô hình) kết hợp với một trường Honeypot để bảo vệ hai lớp. Điều này chặn các bot tự động mà không làm khó khăn cho người dùng thực. Đối với các mẫu có lượng spam cao, hãy xem xét thêm một trường Chấp nhận (hộp kiểm bắt buộc) như một lớp thứ ba.
Nhận Elementor Pro với Trình xây dựng Form
Truy cập widget Form, Trình xây dựng Giao diện, Trình xây dựng WooCommerce, và hơn 100 widget Pro. Xây dựng các mẫu một cách trực quan mà không cần thêm plugin.
Khám phá Elementor Pro →
