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

Bạn có thể tạo Form bằng Elementor vô cùng chuyên nghiệp với vài bước đơn giản. Hãy xem hướng dẫn của tôi trong bài viết để thực hiện dễ dàng hơn nhé.

Trình tạo biểu mẫu trực quan Elementor là một công cụ mạnh mẽ giúp bạn tạo biểu mẫu trực tuyến hoàn chỉnh và đẹp mắt trong vài phút. Bạn có thể dễ dàng tạo tạo Form bằng Elementor mà không cần sử dụng Code. Tôi sẽ hướng dẫn bạn cách tạo một biểu mẫu đăng ký thu hút khách hàng tiềm năng. 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ó thể bạn quan tâm:

Hướng dẫn sử dụng Widget nâng cao trong Elementor

Hướng dẫn xử lý một số lỗi thường gặp trên Elementor

Đầu tiên, bạn cầ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 tên, địa chỉ Email, vùng văn bản và nút gửi.

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

Trong bảng tùy chọn Biểu mẫu, bạn hãy đặt tên cho biểu mẫu của mình nhé. Tôi khuyên bạn nên đặt tên gợi ý nội dung biểu mẫu để dễ quản lý. Ví dụ như biểu mẫu đăng ký ưu đãi 8/3, biểu mẫu nhận Ebook Content Marketing,…

Tiếp theo, chúng ta thấy 3 trường được tạo tự động khi tiện ích được chèn: Họ tên, Email và Tin nhắn.

Đối với biểu mẫu tạo khách hàng tiềm năng sẽ không cần trường thông báo. Vì vậy, tôi nghĩ bạn nên xóa nó bằng cách nhấp vào dấu X ở ngoài cùng bên phải của tùy chọn trường. Tôi nghĩ bạn chỉ nên để lại trường tên và Email. Nếu bạn muốn thêm các trường mới, chỉ cần nhấp vào nút Thêm Mục (Add Item).

Bây hãy cùng tôi xem xét kỹ hơn các tùy chọn có sẵn cho mỗi trường nhé.

Tab Nội dung (Content) của Form Field

Type (loại): Trong Tab Nội dung của trường, bạn có thể chọn Loại trường. Ví dụ, trường Tên là một loại trường Văn bản. Nó chỉ cho phép người dùng nhập văn bản vào. Mặt khác, trường Email chỉ chấp nhận văn bản ở định dạng Email thích hợp, chứa cả dấu @ và dấu chấm.

Label (nhãn): Đây là mục không bắt buộc. Tuy nhiên, tôi khuyên bạn nên cung cấp nhãn ngay cả khi bạn quyết định ẩn nó. Nhãn này được hiển thị trong Email bạn nhận được khi ai đó gửi biểu mẫu.

Placeholder: Khi tạo Form bằng Elementor, bạn có thể hiển thị văn bản tùy chọn giúp khách truy cập hiểu những gì cần nhập trong trường Placeholder này.

Required (bắt buộc): Bạn hãy đặt là Có nếu bạn muốn bắt buộc người dùng nhập vào trường, hoặc Không nếu bạn không bắt buộc họ nhập thông tin. Tôi nghĩ rằng bạn nên đặt bắt buộc cho trường Tên và Email. Đây là những thông tên rất quan trọng. Ở cuối phần Trường Biểu mẫu, bạn có thể chọn Hiển thị hoặc Ẩn dấu Bắt buộc . 

Column Width (Chiều rộng cột): Bạn có thể chọn kích thước độ rộng của các trường tại đây. Bạn có hãy đặt các trường tên và Email trên cùng một dòng. Để thực hiện việc này, hãy nhấp vào trường Tên. Sau đó, bạn thay đổi chiều rộng cột của trường từ 100% thành 50%. Bây giờ làm tương tự cho trường Email. Khi độ rộng cột của cả hai trường được đặt thành 50%, hai trường phải nằm trên một hàng cạnh nhau.

Tab Nâng cao (Advanced Tab)

Tab tiếp theo tôi muốn giới thiệu cho bạn khi tạo Form bằng Elementor là Advanced Tab. Thường thì bạn sẽ không cần thực hiện bất kỳ điều chỉnh nào ở đây. Đối với biểu mẫu đăng ký thông thường, bạn sẽ để nguyên các tùy chọn Nâng cao này.

Nhưng một điều quan trọng tôi muốn lưu ý cho bạn là trường ID ở đây không bao giờ được để trống nhé. Nếu nó trống, hãy nhập tên ID theo cách thủ công. Nếu không có ID, biểu mẫu sẽ không hoạt động bình thường.

Bạn sẽ nhận thấy rằng Shortcode chứa tên ID bên trong nó. Shortcode là mã bạn có thể sao chép / dán vào các Email được gửi nếu bạn muốn gửi dữ liệu trường cụ thể đó đi. Theo mặc định, Email gửi tất cả dữ liệu trường bằng cách sử dụng Shortcode được tạo tự động [All-Fields]. Nếu không muốn mọi dữ liệu của trường được gửi trong Email, bạn có thể nhập thủ công các Shortcode của các trường bạn muốn đưa vào.

Nội dung (Content) => Các nút (Buttons)

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,…

Xem tài liệu Style Form để biết đầy đủ chi tiết về cách tạo kiểu cho từng khu vực này.

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. 

Tham khảo, WordPress Hosting – giải pháp toàn diện cho các Website nền tảng WordPress

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!