Tạo và thiết kế Biểu mẫu với tiện ích Biểu mẫu Elementor

Mỗi trang web phải bao gồm một hình thức liên lạc! Biểu mẫu liên hệ rất hữu ích cho nhiều mục đích khác nhau, bất kể bạn có loại trang web nào. Họ có thể tạo khách hàng tiềm năng, xây dựng kết nối và mối quan hệ, cho phép người dùng báo cáo sự cố với trang web của bạn và mọi thứ liên quan.

Không cần thiết phải là chuyên gia kỹ thuật để tạo biểu mẫu liên hệ trong WordPress. Trình tạo trang Elementor giúp việc tạo các trang web đẹp dễ dàng hơn bao giờ hết.

Để trình bày cách tạo biểu mẫu liên hệ với Elementor, chúng ta sẽ xem xét các tùy chọn khác nhau và mọi thứ cần biết về biểu mẫu liên hệ trong Elementor.

Elementor đã bao gồm tiện ích Biểu mẫu từ khá lâu, điều đó có nghĩa là bạn không cần phải đi đâu khác để tạo Biểu mẫu cho trang web WordPress của mình nữa, đó là một điều may mắn!

Trước đây, bạn có thể gặp khó khăn khi tạo Biểu mẫu bằng một số plugin có sẵn. Quá trình thiết kế và định cấu hình Biểu mẫu có thể tốn thời gian và gây khó chịu. Thật may mắn cho tất cả chúng ta, tiện ích Elementor Form rất dễ làm việc với nó.

Trước khi bắt đầu với trình tạo biểu mẫu Elementor, chúng ta hãy xem nhanh một số tính năng cần thiết nhất của nó.

Đối với người mới bắt đầu, một trong những tính năng nổi bật nhất là nó được tích hợp hoàn toàn vào giao diện Elementor, có nghĩa là bạn có quyền truy cập vào nhiều tùy chọn thiết kế/kiểu dáng/bố cục có sẵn trong Elementor. Tôi không tin bạn sẽ tìm thấy một plugin dạng độc lập có hệ thống thiết kế mạnh mẽ như plugin này.

Từ đó, bạn có thể tạo tối đa 18 loại trường khác nhau:

  • Văn bản Email Vùng văn bản Vùng văn bản
  • URL và số điện thoại như sau:
  • Nút radio là một loại nút radio.
  • Chọn từ danh sách (thả xuống)
  • Hộp kiểm được sử dụng trong danh sách kiểm tra.
  • Chỉ có một hộp kiểm (chấp nhận)
  • reCAPTCHA
  • Honeypots là loại thùng chứa mật ong (ngăn chặn thư rác)

Bạn cũng có thể chia biểu mẫu của mình thành nhiều trang để tạo biểu mẫu gồm nhiều bước, mang lại lợi ích cho các ứng dụng dạng dài.

Elementor Pro có hơn 12 tích hợp với các dịch vụ tiếp thị qua email phổ biến và hệ thống quản lý quan hệ khách hàng để giúp bạn tận dụng tối đa các biểu mẫu của mình. Ngoài ra còn có một tính năng tích hợp Zapier tổng thể cho phép bạn kết nối với bất kỳ công cụ nào trong số hàng nghìn công cụ có sẵn trên nền tảng Zapier nếu công cụ của bạn không được liệt kê.

Ngoài ra còn có một số lựa chọn thay thế hấp dẫn khác. Ví amp : khi ai đó điền vào Biểu mẫu của bạn, bạn có thể nhận thông báo qua Slack hoặc Discord.

Nói về thông báo, bạn cũng có thể cá nhân hóa thông báo qua email mà bạn nhận được và thông báo qua email mà người gửi biểu mẫu nhận được. Sau khi họ gửi Biểu mẫu, bạn có thể chuyển hướng họ đến trang cảm ơn tùy chỉnh mà bạn tạo.

Cách tốt nhất để tạo biểu mẫu trong Elementor là gì?

Chúng ta sẽ bắt đầu bằng cách mở trình chỉnh sửa Elementor, sau đó kéo và thả tiện ích Biểu mẫu vào vị trí mà chúng ta muốn tạo Biểu mẫu của mình.

Cách tạo Biểu mẫu phần tử

Giống như mọi thứ khác trong Elementor, quá trình tạo Biểu mẫu được thực hiện một cách trực quan. Không cần thiết phải sử dụng plugin bổ sung cũng như không cần thiết phải đóng vai trò phụ trợ cho trang web của bạn.

Hình thành các phần tử Elementor theo cách có cấu trúc

Khi Biểu mẫu của bạn đã sẵn sàng, bước đầu tiên là sắp xếp thông tin có trong đó. Bạn yêu cầu những Trường nào và chúng phải là loại Trường nào? Bạn đang tìm kiếm gì?

Khi làm việc trong trình chỉnh sửa Elementor, Trường biểu mẫu được thêm và chỉnh sửa từ tab Nội dung. Như bạn có thể thấy trong amp dụ bên dưới, Biểu mẫu bao gồm một số Trường mặc định. Bằng cách chọn Thêm mục từ menu thả xuống, bạn có thể tạo Trường mới.

Bạn cũng có thể sao chép một Trường bằng cách chọn biểu tượng trông giống như hai tài liệu, cái này ở trước cái kia và nhấp vào nó. 

Các loại trường trong biểu mẫu

Có sẵn nhiều loại Trường biểu mẫu, từ Trường văn bản đơn giản đến trường mật khẩu, ReCaptcha và honeypot.

Để thay đổi hành vi của Trường biểu mẫu, trước tiên, hãy chọn Trường rồi chọn menu thả xuống Loại để xem các loại Trường khác nhau có sẵn.

Các loại trường trong biểu mẫu phần tử

Chiều rộng của cột Biểu mẫu

Tính năng này cho phép bạn sử dụng hai Trường biểu mẫu trên cùng một dòng bằng cách điều chỉnh cài đặt Độ rộng cột. Thay đổi độ rộng của cửa sổ bằng cách chọn nó từ bộ chọn thả xuống và chọn 50 phần trăm. Điều đáng lưu ý là nếu bạn thực hiện việc này với hai Trường biểu mẫu liên tiếp, bạn sẽ nhận thấy rằng chúng xuất hiện trên cùng một dòng.

Các biểu mẫu trong Elementor để tạo kiểu

Tạo kiểu cho Biểu mẫu của bạn trong Elementor giống như cách bạn tạo kiểu cho các tiện ích khác bằng cách điều hướng đến bảng Kiểu nằm trong giao diện chỉnh sửa Elementor.

Bản thân Biểu mẫu, Trường, nút, mọi bước, thông báo lỗi và thông báo xác nhận đều có thể được tùy chỉnh.

Đối với những người đã quen thuộc với Elementor, họ không cần phải học thêm nhiều điều nữa về cách tạo kiểu cho các Biểu mẫu Elementor.

Các hành động trên biểu mẫu

Sau cuộc thảo luận của chúng tôi về việc tạo Biểu mẫu trong Elementor, hãy xem cách định cấu hình những gì xảy ra sau khi Biểu mẫu của bạn được gửi; điều này được thực hiện thông qua các hành động trên Biểu mẫu hoặc như chúng được đề cập trong Elementor, Hành động sau khi gửi.

Khi một biểu mẫu được gửi, thông thường hệ thống sẽ gửi email và chuyển hướng người dùng đến một trang web khác. Tất nhiên, bạn có thể bao gồm bao nhiêu hành động tùy thích trên Biểu mẫu của mình và kết hợp chúng theo bất kỳ cách nào bạn muốn. Như bạn có thể mong đợi, có một Trường chọn cụ thể không liên quan đến mã hóa.

Mỗi hành động bạn thêm sẽ xuất hiện dưới dạng tùy chọn tab riêng trên menu chính. Hiện tại, chúng tôi có tùy chọn tab cho Email, nhưng nếu tôi đưa chuyển hướng vào Trường Thêm hành động, tôi cũng sẽ thấy Chuyển hướng trong tùy chọn tab của mình, như được hiển thị trong amp bên dưới.

Để kết luận, tôi sẽ trình bày cách định cấu hình Biểu mẫu để chấp nhận nội dung gửi qua Email, câu hỏi thường gặp nhất về Biểu mẫu.

Khi bạn chọn Email từ tab Nội dung trong trình chỉnh sửa, bạn sẽ thấy màn hình hiển thị bên dưới; đây là nơi bạn có thể cá nhân hóa email từ Email và email trả lời, đồng thời bạn cũng có thể thêm CC hoặc BCC cho bất kỳ ai sẽ nhận được bản sao nội dung gửi từ Biểu mẫu.

Tạo mẫu tin nhắn biểu mẫu liên hệ trong Elementor

Nhiều người ngạc nhiên khi biết rằng trình chỉnh sửa biểu mẫu của Elementor mạnh hơn những gì thoạt nhìn và một trong những tính năng nâng cao hơn là khả năng tùy chỉnh thông báo cho từng Biểu mẫu.

Có thể tùy chỉnh thông báo biểu mẫu để cung cấp quy trình phản hồi được cá nhân hóa hơn cho người dùng cuối đã điền vào Biểu mẫu của bạn, thay vì nghe như một con robot nhàm chán. Tuy nhiên, cụ thể, bạn có thể tùy chỉnh những thông báo nào cho biểu mẫu liên hệ Elementor của mình như sau:

Để bắt đầu, trước tiên bạn phải bật tính năng nhắn tin tùy chỉnh bằng cách chọn “Tùy chọn bổ sung” từ menu thả xuống, sau đó chuyển nút chuyển đổi cho “Nhắn tin tùy chỉnh” thành “Có”.

Tùy chỉnh tiện ích biểu mẫu liên hệ Elementor bằng cách thêm tin nhắn tùy chỉnh

Như bạn có thể thấy, có bốn thông báo khác nhau mà bạn có thể tùy chỉnh, bao gồm những thông báo được liệt kê bên dưới:

Thông báo thành công được hiển thị cho người dùng cuối sau khi gửi biểu mẫu và xác minh rằng Biểu mẫu đã được điền chính xác (ví dụ: không thiếu trường bắt buộc, v.v.).

Thông báo lỗi - một thông báo được hiển thị cho người dùng cuối khi xảy ra lỗi không xác định trong quá trình gửi Biểu mẫu.

Thông báo Bắt buộc - xuất hiện khi trường biểu mẫu bắt buộc không được điền, Biểu mẫu được gửi và Biểu mẫu chưa được hoàn thành.

Khi có nội dung nào đó trong quá trình gửi biểu mẫu không chính xác và không thể gửi được, thông báo Tin nhắn không hợp lệ sẽ được hiển thị cho người dùng cuối.

Khả năng chỉnh sửa tin nhắn cho phép bạn sáng tạo và kỳ quặc hoặc trang trọng hơn và mang tính kinh doanh hơn nếu bạn điều hành một trang web của công ty. Điều tuyệt vời nhất là chúng hoàn toàn có thể chỉnh sửa được, nên bạn có thể làm bất cứ điều gì bạn muốn!

Phần kết luận

Tiện ích biểu mẫu Elementor, thật dễ dàng để xây dựng một biểu mẫu liên hệ. Nó đi kèm với trình tạo biểu mẫu liên hệ kéo và thả trực quan và rất nhiều tùy chọn tùy chỉnh giúp phân biệt nó với plugin biểu mẫu liên hệ khác có sẵn trên thị trường. Bạn có thể dễ dàng tùy chỉnh kiểu dáng và cách phối màu của nó để phù hợp với giao diện của công ty bạn. Ngoài ra còn có nhiều tiện ích hấp dẫn khác, hơn 300 mẫu chuyên nghiệp và trình tạo cửa sổ bật lên trong một gói tiện lợi. Trình tạo trang WordPress đầy đủ tính năng này bao gồm tất cả các tiện ích và tính năng cần thiết, do đó bạn sẽ không phải mua thêm trình tạo trang để tùy chỉnh thêm trang web của mình. Hơn nữa, nó cho phép tích hợp hơn 30 dịch vụ tiếp thị, đó là lý do tại sao nó là một trong những plugin được mua phổ biến nhất trên thị trường hiện nay.

Hanson F.

Bài viết gần đây

Cách sử dụng đầu trang và chân trang với Elementor

Đầu trang và chân trang của trang web là những yếu tố cần thiết. Trong hầu hết các trường hợp, Tiêu đề cung cấp điều hướng…

Ngày 6 tháng 1 năm 2022

So sánh chủ đề WordPress: Astra vs OceanWP

Hai trong số các chủ đề WordPress phổ biến nhất trên thị trường là Astra và OceanWP. Chuyên nghiệp…

Ngày 2 tháng 1 năm 2022

So sánh chủ đề tin tức WordPress: Báo chí và Astra

Tạo một trang web tin tức xuất sắc không nhất thiết bạn phải trở thành một nhà thiết kế web. Chúng tôi…

Ngày 25 tháng 10 năm 2021

Tạo một trang web liên quan đến tin tức với Chủ đề Báo chí

Chủ đề Báo chí là một trong những chủ đề WordPress quan trọng nhất được thiết kế bởi tagDiv, một…

Ngày 18 tháng 10 năm 2021

Cách xây dựng Thương mại điện tử với trình tạo Avada WooC Commerce

Khi nói đến việc thiết lập một cửa hàng trực tuyến, WooC Commerce là plugin phù hợp. Nó…

Ngày 4 tháng 10 năm 2021

Cách sử dụng hiệu ứng cuộn và tiêu đề cố định với Elementor

Tiêu đề thường là thứ đầu tiên một người nhìn thấy khi họ truy cập trang web của bạn,…

Ngày 21 tháng 9 năm 2021