Form Elementor: xem form, xử lý dữ liệu, tích hợp CRM

2 phút đọc

Mục lục

Giới thiệu về Form trong Elementor #

Form trong Elementor (Elementor Pro) là một trong các widget quan trọng nhất. Website thường dùng form để:

  • Thu thông tin đăng ký
  • Đăng ký nhận tin
  • Tư vấn khóa học
  • Liên hệ

Form trong Elementor có thể:

  • Hiển thị ngay trên trang
  • Đặt trong popup
  • Gắn vào landing page

LƯU Ý: Không xoá form đang dùng trong popup hoặc landing page nếu không biết nó được gắn ở đâu.

Cách tìm và chỉnh sửa Form Elementor #

Có 2 vị trí tìm form:

1. Trong Template → Saved Templates #

Nếu form được lưu dưới dạng template riêng, bạn chỉnh tại đây.

2. Chỉnh trực tiếp trên trang/popup #

Nhấp vào widget Form để mở phần cấu hình.

Các phần quan trọng trong Form #

Form Elementor gồm 3 tab chính:

  • Form Fields – cấu hình các trường
  • Actions After Submit – hành động sau khi gửi
  • Email – tùy chọn email gửi về Admin

Form Fields – Cấu hình các trường #

Thêm trường mới #

  1. Bấm “Add Item”
  2. Chọn loại trường: Text, Email, Tel, Select, Checkbox, Upload…

Các trường cơ bản #

  • Name (Tên)
  • Email
  • Phone
  • Message

Các trường cần thiết cho CRM #

Với CRM như GetFly hoặc HubSpot, thường cần:

  • fullname
  • email
  • phone
  • utm_source
  • utm_campaign
  • page_url

LƯU Ý QUAN TRỌNG: Nếu bạn đổi tên field ID → form có thể mất dữ liệu khi gửi sang CRM.

Validation – Kiểm tra dữ liệu #

Form Elementor tự động kiểm tra:

  • Định dạng email
  • Trường bắt buộc (Required)

Khuyên dùng: Bật Required cho Email + Số điện thoại.

Actions After Submit – Hành động sau khi gửi #

Đây là phần rất quan trọng, quyết định form có gửi đúng hay không.

Các action thường dùng #

  • Email – gửi đến quản trị
  • Webhook – gửi sang CRM (GetFly, HubSpot…)
  • Redirect – chuyển sang trang cảm ơn
  • Popup – mở popup cảm ơn

LƯU Ý QUAN TRỌNG: Form không hoạt động nếu bạn quên bật ít nhất 1 Action.

Email – Gửi email về Admin #

Trong mục Email:

  • To: email admin
  • Subject: tiêu đề thư
  • Message: nội dung thư (có thể dùng shortcode)

Cảnh báo #

Website cần có plugin WP Mail SMTP để gửi mail chuẩn. Nếu không có → form gửi không được.

Webhook – Tích hợp CRM (GetFly, HubSpot…) #

Đây là phần để gửi dữ liệu form sang CRM.

Cách thiết lập Webhook #

  1. Trong Actions After Submit → thêm Webhook
  2. Dán URL webhook của CRM
  3. Mapping các field theo đúng yêu cầu CRM

LƯU Ý QUAN TRỌNG: Nếu bạn đổi ID của field form, CRM sẽ không nhận đúng dữ liệu.

Styling Form #

Điều chỉnh trong tab Style #

  • Màu chữ
  • Kích thước input
  • Khoảng cách giữa các trường
  • Style nút Submit

Gợi ý style thân thiện #

  • Border radius từ 4–8px
  • Height input 42–50px
  • Khoảng cách giữa các trường 12–16px

Test Form sau khi chỉnh #

Trước khi publish, luôn test:

  • Gửi thử form bằng email thật
  • Test trên mobile
  • Kiểm tra form có gửi về email không
  • Kiểm tra CRM có nhận dữ liệu không
  • Xem lại form nếu thiếu action

Chặn spam Form #

Các cách chống spam #

  • reCAPTCHA v3 (Google)
  • reCAPTCHA v2 Invisible
  • Honeypot (Built-in của Elementor)

Khuyên dùng: bật Honeypot để chặn bot tự động.

Lỗi thường gặp #

1. Form không gửi được #

  • Không bật Action After Submit
  • Website chưa cấu hình SMTP
  • Xung đột plugin cache

2. CRM không nhận dữ liệu #

  • Field ID sai
  • Webhook sai URL
  • Thiếu field bắt buộc

3. Form bị lệch trên mobile #

  • Padding không đúng
  • Nút quá to/nhỏ
  • Typography không phù hợp

Best Practices #

  • ✔ Không đổi ID field khi đã kết nối CRM
  • ✔ Luôn bật Webhook nếu website đang thu lead
  • ✔ Test form trước khi bàn giao
  • ✔ Chỉ chỉnh layout, không chỉnh action trừ khi biết đang làm gì
  • ✔ Dùng Global style cho form

Checklist #

  • ✔ Form gửi được
  • ✔ Email nhận thông báo
  • ✔ CRM nhận đúng dữ liệu
  • ✔ Mobile hiển thị đẹp
  • ✔ Không spam

Bài 8 – Elementor Form kết thúc.

Cập nhật vào 16/11/2025
Mục lục