Plugins

Hướng Dẫn Cách Tạo Form Bằng Elementor Cực Đơn Giản

Tạo Form bằng Elementor vô cùng chuyên nghiệp với vài bước đơn giản. GreenApps sẽ hướng dẫn bạn có thể dễ dàng tạo Form bằng Elementor mà không cần sử dụng Code. Biểu mẫu này sẽ cho phép khách truy cập đăng ký vào danh sách nhận Email của bạn. Nó cũng sẽ thêm người dùng vào công cụ tự động hóa tiếp thị của bên thứ ba, chẳng hạn như MailChimp. Đồng thời, thông qua biểu mẫu, bạn cũng có thể tặng quà miễn phí cho người dùng để khuyến khích đăng ký Email List của bạn.

Cách Tạo Form Bằng Elementor

1. Kéo và thả một Form Widget

Bạn kéo tiện ích biểu mẫu (Form Widget) vào một trang. Form Widget ngay lập tức tạo một biểu mẫu cơ bản đã chứa trường Name, địa chỉ Email, vùng văn bản và nút gửi.

2. Nội dung (Content) -> Trường biểu mẫu (Form Fields)

Tiếp theo, bạn đặt các tùy chọn cho các nút của biểu mẫu. Hầu hết các biểu mẫu đơn giản chỉ có một nút Gửi. Tuy nhiên, nếu bạn đang tạo biểu mẫu nhiều bước (Multi-Step Form), bạn sẽ cần tạo nút cho mỗi bước. 

Đầu tiên, bạn chọn Kích thước nút của biểu mẫu. Tùy chọn này cung cấp cho bạn một số kiểu được cài đặt sẵn. Bạn có thể điều chỉnh trong Tab Style của Widget.

Tiếp theo, bạn sẽ đặt Chiều rộng của nút. Bạn có thể chọn bất kỳ kích thước chiều rộng nào phù hợp nhất với phong cách cụ thể của biểu mẫu.

Trong trường Gửi, bạn nhập văn bản của nút. Tôi thường chỉ đơn giản để là Gửi, bạn có thể nhập là Đăng ký, Bắt đầu,…

Tiếp theo, bạn chọn một Icon để hiển thị bên cạnh văn bản trên nút nếu bạn muốn. Nếu bạn chọn hiển thị một Icon, hai tùy chọn mới sẽ xuất hiện. Icon Position cho phép bạn chọn đặt biểu tượng trước hoặc sau nội dung của nút. Icon Spacing cho phép bạn điều chỉnh khoảng cách giữa Icon và văn bản của nút.

Nội dung (Content) => Hành động sau khi gửi (Actions After Submit)

Bạn cũng cần thiết lập Actions After Submit khi tạo Form bằng Elementor.Phần này cho phép bạn thêm các hành động sẽ được thực hiện sau khi khách truy cập gửi biểu mẫu. Ví dụ bạn chọn gửi Email có dữ liệu của biểu mẫu cho ai đó. Hoặc bạn có thể chuyển hướng người dùng đến một trang cụ thể, hay kết nối với nền tảng tiếp thị của bên thứ ba như Mailchimp.

Email Action

Bạn có thể thấy Email Action trong khu vực Add Action. Nếu bạn không muốn dữ liệu được gửi qua Email cho bất kỳ ai, bạn có thể xóa hành động này bằng cách nhấp vào dấu X bên cạnh Email. 

Các Tab Email có một số tùy chọn. Theo mặc định, cài đặt ở đây sẽ gửi một Email với dữ liệu từ tất cả các trường biểu mẫu đến quản trị viên trang Web. Bạn có thể điều chỉnh người mà biểu mẫu chuyển đến, dữ liệu nào được đưa vào,…

MailChimp Action

Khi bạn đã xác định các cài đặt như bạn muốn, bạn có thể thêm một hành động khác. Hãy mở lại Tab Actions After Submit và nhấp vào trường bên cạnh Email để mở và chọn các tùy chọn thả xuống. Ở ví dụ này, tôi chọn Mailchimp. Hành động này sẽ thêm một Tab mới bên dưới Tab Email có tên là MailChimp. Tôi chỉ cần nhấp vào Tab đó để mở nó.

Redirect Action

Cuối cùng, bạn hãy mở Tab Action After Submit, nhấp vào trường và chọn Chuyển hướng (Redirect) từ Menu thả xuống. Hành động này sẽ thêm một Tab Redirect mới bên dưới.

Bạn nhấp vào Tab Redirect để mở các tùy chọn và nhập URL của trang bạn muốn chuyển hướng người dùng đến khi biểu mẫu được gửi. Ví dụ, tôi thường gắn URL một trang cảm ơn người dùng đã đăng ký. Đồng thời, tôi cung cấp cho người dùng tài liệu miễn phí để “thưởng” cho việc đăng ký.

Nội dung => Tùy chọn bổ sung (Additional Options)

Các Mẫu ID là không bắt buộc, nhưng nếu bạn cần dùng ID để nhắm mục tiêu cho một số mã tùy chỉnh, bạn có thể nhập một ID duy nhất ở đây. Nếu không, hãy để trống nhé.

Khi tạo Form bằng Elementor, bạn cần đặt Tin nhắn tùy chỉnh (Custom Messages) thành Có (Yes) để có thể nhập từ ngữ cụ thể cho từng tin nhắn có thể được cung cấp cho người dùng. Ví dụ: Tôi đã thay đổi thông báo “Đã xảy ra lỗi” thành “Xin lỗi, có lỗi xảy ra.”. Tôi cũng muốn lưu ý rằng, đây là thông báo dự phòng khi trình duyệt không hiển thị lỗi của chính nó. Người dùng thường không nhìn thấy những thông báo cụ thể này.

Style

Bây giờ, bạn đã tạo Form bằng Elementor gần như hoàn chỉnh. Đã đến lúc bạn tạo kiểu cho nó, tôi sẽ hướng dẫn bạn ngay sau đây. Bạn Nhấp vào Tab Style của Widget.

Mỗi phần của biểu mẫu đều có thể được tùy chỉnh như biểu mẫu, Form Fields, các nút, Messages,…

Kiểm tra biểu mẫu của bạn

Sau khi tùy chỉnh kiểu cho biểu mẫu theo ý thích, bạn đã hoàn tất việc tạo Form bằng Elementor. Bạn có thể xuất bản hoặc cập nhật trang và điền vào biểu mẫu để đảm bảo rằng nó hoạt động như mong đợi. 

Trên đây là hướng dẫn cách tạo Form cực kỳ đơn giản với Elementor. Hi vọng bài viết đã mang đến những thông tin hữu ích cho các bạn. Hãy theo dõi fb: GreenApps để biết thêm nhiều thông tin kiến thức thú vị nhé!

Để lại bình luận

Your email address will not be published. Required fields are marked *