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

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

Mỗi trang web phải bao gồm một biểu mẫu liên hệ! Biểu mẫu liên hệ hữu ích cho nhiều mục đích, 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 các vấn đề với trang web của bạn và mọi thứ liên quan.

Không nhất thiết phải là một 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 rồi, có nghĩa là bạn không cần phải đi bất cứ nơi nào khác để tạo Biểu mẫu cho trang web WordPress của mình, đó 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 với một số plugin có sẵn. Quá trình thiết kế và cấu hình Biểu mẫu có thể tốn nhiều thời gian và gây khó chịu. May mắn thay 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ó.

Một trong những tính năng khác biệt nhất, đối với người mới bắt đầu, 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ế / phong cách / bố cục có sẵn trong Elementor. Tôi không tin rằng bạn sẽ tìm thấy một plugin biểu mẫu độc lập với hệ thống thiết kế mạnh mẽ như cái 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 Khu vực Văn bản Khu vực 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à một 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 nhiều bước, có lợi cho các ứ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ó tích hợp catchall Zapier 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. Đối với ex amp le, khi ai đó điền vào Biểu mẫu của bạn, bạn có thể nhận được 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 email mà bạn nhận được và thông báo 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 tôi 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 đến vị trí mà chúng tôi 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 trực quan. Không nhất thiết phải sử dụng một plugin bổ sung, cũng như không cần thiết phải hoạt động như phần phụ trợ của trang web của bạn.

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

Khi Biểu mẫu của bạn đã có, 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à những loại Trường nào? Bạn đang tìm kiếm cái gì?

Khi làm việc trong trình soạn thảo 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 ex amp le bên dưới, Biểu mẫu bao gồm một vài 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.

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

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

Nhiều loại Trường biểu mẫu có sẵn, 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 và sau đó chọn trình đơn Loại thả xuống để 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 Chiều rộng Cột. Thay đổi chiều rộng của cửa sổ bằng cách chọn nó từ công cụ chọn thả xuống và chọn 50 phần trăm. Điều đáng chú ý là nếu bạn làm điều 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 với nhau.

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 widget 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, bất kỳ bước nào, 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 nhiều hơn trong việc tạo kiểu Elementor Forms.

Các hành động trên một 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 việc đị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 của Biểu mẫu hoặc như chúng được đề cập đến trong Elementor, Hành động sau khi gửi.

Khi một biểu mẫu được gửi, hệ thống thường gửi một 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 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 bộ 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 một tùy chọn tab riêng biệt trên menu chính. Chúng tôi hiện có một lựa chọn tab cho Email, nhưng nếu tôi được bao gồm một chuyển hướng trong Add Action Field, tôi cũng sẽ thấy Redirect trong các tùy chọn tab của tôi, như thể hiện trong các cựu amp le dưới đây.

Để kết thúc, tôi sẽ trình bày cách định cấu hình Biểu mẫu để chấp nhận 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 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 của các nội dung gửi từ Biểu mẫu.

Tạo Mẫu Nhắn tin Biểu mẫu Liên hệ trong Elementor 

Nhiều người ngạc nhiên khi biết rằng trình soạn thảo biểu mẫu của Elementor mạnh hơn so với cái nhìn đầu tiê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 điệp 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 rô bốt nhàm chán. Tuy nhiên, cụ thể, bạn có thể tùy chỉnh 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 công tắc chuyển đổi cho “Nhắn tin tùy chỉnh” thành “Có”.

Tùy chỉnh widget biểu mẫu liên hệ Elementor bằng cách thêm các thông báo 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 các trường bắt buộc, v.v.).

Thông báo Lỗi - 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 một cái gì đó trong biểu mẫu gửi không chính xác và không thể gửi được, thông báo Thông báo không hợp lệ sẽ được hiển thị cho người dùng cuối.

Có thể 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 và giống doanh nghiệp hơn nếu bạn điều hành một trang web của công ty. Phần tốt nhất là chúng hoàn toàn có thể chỉnh sửa, vì vậy 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 phần tử, thật dễ dàng để tạo một biểu mẫu liên hệ. Nó đi kèm với một 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 các 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à màu sắc 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 widget 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, vì vậy 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.

Để lại bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *