CF7 trong WordPress là gì?

Hầu hết các trang web cần một cách để khách hàng, khách hàng tiềm năng hoặc độc giả thường xuyên tiếp cận. Bạn có thể mua một chủ đề có trang liên hệ tùy chỉnh được tích hợp sẵn hoặc thử tự viết mã cho trang liên hệ, nhưng các tùy chọn này thường tốn kém hoặc phức tạp. Bạn không có thời gian cho việc đó – điều này đưa chúng tôi đến Biểu mẫu liên hệ 7

Mẫu liên hệ 7 là gì?

Contact Form 7 là một plugin WordPress miễn phí mà bạn có thể sử dụng để tạo nhiều biểu mẫu liên hệ cho trang web của mình. Plugin này không chỉ miễn phí mà mã ngắn tùy chỉnh cho từng biểu mẫu liên hệ bạn tạo giúp dễ dàng thêm biểu mẫu liên hệ của bạn vào bất kỳ khu vực bài đăng, trang hoặc tiện ích nào

Chúng tôi yêu thích plugin này đến mức hầu như mọi chủ đề WPExplorer đều hỗ trợ nó, ngay cả chủ đề WordPress cao cấp bán chạy nhất của chúng tôi. Và các nhà phát triển khác đồng ý, vì bạn sẽ khó tìm thấy một chủ đề không tương thích với nó

Tại sao chọn Mẫu liên hệ 7?

Vì vậy, bây giờ bạn đã biết Contact Form 7 là gì, câu hỏi tiếp theo của bạn có thể là tại sao lại có plugin này?

Đầu tiên, nó miễn phí – vì không có phiên bản cao cấp. Vì vậy, so với các plugin dạng “miễn phí” khác, bạn sẽ không thấy hàng tấn bán thêm được tích hợp trong bảng điều khiển chính, điều này thực sự tốt. Nó cũng có thể tùy chỉnh. Cũng có những cách dễ dàng để chỉnh sửa biểu mẫu của bạn bằng các tham số có sẵn hoặc bằng một chút CSS. Và như chúng tôi đã đề cập, nó tương thích với rất nhiều chủ đề miễn phí và cao cấp, vì vậy nếu bạn quyết định thay đổi chủ đề của mình sau này, biểu mẫu liên hệ của bạn sẽ vẫn hoạt động

Khi điều đó đã rõ ràng, hãy xem cách bạn có thể sử dụng Biểu mẫu liên hệ 7 trên trang web WordPress của mình

Cách bắt đầu với Mẫu liên hệ 7

Thông tin & Tải xuốngXem bản demo

Cài đặt dễ dàng. Chỉ cần điều hướng đến Plugin > Thêm mới và sử dụng tùy chọn Tìm kiếm để tìm plugin Contact Form 7. Cài đặt và kích hoạt plugin

Sau khi kích hoạt, bạn sẽ thấy một mục menu “Liên hệ” tiện dụng trong bảng điều khiển WordPress của mình. Nhấp vào nó để đến trang quản lý biểu mẫu liên hệ chính của bạn

Các tác giả plugin đã đủ tốt để bao gồm một số thông tin hữu ích trong bảng điều khiển – vui lòng loại bỏ thông báo này bất kỳ lúc nào. Theo mặc định, cũng sẽ có một ví dụ “Mẫu liên hệ 1” đang chờ bạn. Chúng tôi khuyên bạn nên xóa biểu mẫu này để bạn có thể bắt đầu lại từ đầu

Thêm mới để tạo biểu mẫu liên hệ đầu tiên của bạn. Bạn sẽ thấy nhiều tùy chọn khi biểu mẫu liên hệ của bạn mở ra. Đừng sợ - tôi hứa nó rất dễ

Trước tiên, bạn sẽ nhận thấy một hộp ở đầu trang. Đây là nơi bạn có thể thay đổi tên biểu mẫu của mình. Chúng tôi khuyên bạn nên đặt tên cho biểu mẫu theo ý nghĩa phù hợp với mục đích của biểu mẫu – chẳng hạn như bạn sẽ sử dụng biểu mẫu ở đâu hoặc như thế nào

Bây giờ, chuyển sang các cài đặt có sẵn. Chúng tôi sẽ đi qua từng tab này

Cài đặt biểu mẫu

Tab Biểu mẫu là nơi bạn sẽ thực sự tạo biểu mẫu liên hệ của mình. Contact Form 7 sử dụng các thẻ khác nhau để thêm các phần biểu mẫu khác nhau. Biểu mẫu liên hệ mặc định bao gồm các trường tên, email, chủ đề, tin nhắn và nút gửi

Để xóa một trường, chỉ cần xóa mã của nó khỏi biểu mẫu

Để thêm một trường, chỉ cần nhấp vào bất kỳ thẻ nào có sẵn để chèn mã vào phần biểu mẫu của bạn. Một cửa sổ bật lên sẽ mở ra để bạn có thể xác nhận thông tin liên quan trước khi chèn

Bạn có thể tạo thẻ cho văn bản, email, URL, điện thoại, số, ngày, vùng văn bản, menu thả xuống, hộp kiểm, nút radio, chấp nhận (e. g. điều khoản), bài kiểm tra, nút tải lên và gửi tệp

Cài đặt thư

Đây là nơi bạn có thể thay đổi email bạn nhận được khi người dùng gửi biểu mẫu liên hệ. Theo mặc định, plugin sẽ sử dụng địa chỉ email của quản trị viên trang web của bạn, nhưng bạn có thể dễ dàng thay đổi địa chỉ này thành email hỗ trợ hoặc nhiều địa chỉ email

Ngoài ra, nếu bạn chọn thêm thẻ tùy chỉnh vào biểu mẫu của mình, hãy đảm bảo thêm đoạn mã ngắn được tạo vào nội dung Thư. Nếu bạn không dán đoạn mã đó vào, bạn sẽ không nhận được câu trả lời mà người dùng gửi cho trường đó

Tùy chọn Thư 2 cho phép bạn tạo thư trả lời tự động cho phép người dùng biết thư của họ đã được nhận. Hoặc nó có thể được sử dụng nếu bạn muốn gửi một email khác cho những người nhận khác nhau. Có thể bạn muốn nhận email có đầy đủ thông tin biểu mẫu liên hệ, nhưng bạn chỉ muốn nhân viên hỗ trợ của mình nhận email có một hoặc hai trường. Có nhiều cách bạn có thể sử dụng tính năng này

Cài đặt tin nhắn

Chỉnh sửa thông báo hiển thị cho người dùng về nhiều tác vụ đã hoàn thành (hoặc chưa hoàn thành). Bạn có thể tạo thông báo tùy chỉnh cho các sự kiện như gửi liên hệ thành công, lỗi xác thực, định dạng không chính xác, v.v.

Cài đặt thêm

Tab cuối cùng cho Cài đặt bổ sung cho phép bạn bật các tùy chọn tích hợp khác nhau chỉ dành cho người đăng ký, chế độ demo (để không có email nào thực sự được gửi), xác thực chấp nhận, tùy chọn lưu trữ thư, v.v. Bạn có thể xem thêm các cài đặt bổ sung của Contact Form 7 trong tài liệu của mình

Khi bạn chỉnh sửa xong, hãy đảm bảo lưu các thay đổi của bạn

Sử dụng biểu mẫu của bạn

Sau khi hoàn thành biểu mẫu liên hệ và sẵn sàng sử dụng, bạn có thể sao chép mã ngắn của biểu mẫu  để chèn vào trang, bài đăng, khu vực tiện ích, v.v. Bạn có thể tìm thấy mã ngắn ở đầu trang tạo biểu mẫu liên hệ ngay bên dưới tiêu đề biểu mẫu sau khi bạn lưu (được tô sáng). Nó sẽ trông giống như thế này

[contact-form-7 id="330" title="Contact Page"]

Hoặc nếu bạn đang sử dụng trình tạo trang như WPBakery hoặc Elementor, bạn chỉ cần sử dụng mô-đun trình tạo Biểu mẫu liên hệ 7 có liên quan để chọn và chèn biểu mẫu của mình trên một trang

Mẫu liên hệ 7 mẹo nâng cao

Bây giờ, nếu muốn, bạn có thể thực sự thích thú với Mẫu liên hệ 7 chỉ với một chút mã tùy chỉnh. Dưới đây là một số thủ thuật yêu thích của tôi mà bạn có thể sử dụng để tạo biểu mẫu liên hệ ấn tượng cho trang web của mình

Văn bản giữ chỗ

Có thể bạn không muốn có tiêu đề trên các trường biểu mẫu của mình hoặc có thể bạn muốn thêm văn bản để chứng minh cho người dùng biết họ nên nhập gì vào một tệp cụ thể. Việc thêm trình giữ chỗ rất dễ dàng, chỉ cần xóa nhãn khỏi các trường của bạn, sau đó thêm văn bản ưa thích của bạn cùng với dấu ngoặc kép vào cuối mã của bạn trong dấu ngoặc vuông như vậy

[text* your-name "Your Name"]

Các trường nhập có chiều rộng đầy đủ

Cá nhân tôi không thích cách các trường văn bản mặc định quá ngắn. Có hai cách để thay đổi độ rộng của trường văn bản. Cách gian lận là chỉ cần thêm chiều rộng ký tự mà bạn muốn vào mã cho trường đó trong phần biểu mẫu. Vì vậy, nếu bạn muốn trường có chiều rộng đầy đủ có chỗ cho 300 ký tự, hãy thêm 300 theo sau là dấu gạch chéo ngược như vậy

[text* your-name 300/ "Your Name"]

Nếu bạn muốn thực hiện đúng cách, bạn sẽ cần thêm đoạn mã sau vào biểu định kiểu CSS của mình

input.wpcf7-text { width: 100%; }

Nhưng điều này sẽ ảnh hưởng đến TẤT CẢ các trường văn bản của Biểu mẫu liên hệ 7 trên toàn bộ cài đặt WordPress của bạn

Nếu bạn đang sử dụng trình tạo trang WPBakery, bạn có tùy chọn để giải quyết vấn đề này và nhắm mục tiêu một hàng cụ thể trên một bài đăng hoặc trang cụ thể để chỉ một biểu mẫu liên hệ riêng biệt được tạo kiểu. Trước tiên, nhấp vào hàng và thêm ID hàng tùy chỉnh. Sau đó lưu

Tiếp theo, nhấp vào biểu tượng bánh răng ngay phía trên khu vực nội dung chính của bài đăng hoặc trang của bạn và nhập #YOUR-ROW-ID theo sau là mã CSS được đề cập ở trên

Các trường nhập cạnh nhau

Một thủ thuật thú vị khác là thêm các trường của bạn cạnh nhau. Tôi nghĩ điều này giữ cho biểu mẫu liên hệ siêu sạch và chuyên nghiệp. Để làm điều này với Total WordPress Theme, chúng tôi đã giúp bạn dễ dàng và thêm một lớp tùy chỉnh. Chỉ cần thêm class=”one-half” vào thẻ p của bạn như vậy

[text* your-name "Your Name"]

[email* your-email "Your Email"]

[textarea your-message]

[submit "Submit Form"]

Ghi chú. Mẹo này dành riêng cho người dùng chủ đề Total, nhưng các chủ đề khác có thể tích hợp sẵn kiểu dáng biểu mẫu tương tự

Thẻ email ưa thích

Đôi khi bạn cần nhiều thông tin hơn người dùng gửi. Đây là lúc các thẻ email đặc biệt của Biểu mẫu liên hệ 7 trở nên hữu ích. Với những thứ này, bạn có thể thêm dấu thời gian email, địa chỉ IP gửi, ID hoặc tiêu đề cho bài đăng chứa biểu mẫu liên hệ, v.v. Tất cả những công cụ này có thể giúp bạn sắp xếp các lần gửi biểu mẫu của mình

Tìm hiểu thêm về Mẫu liên hệ 7

Để biết thêm mẹo về cách sử dụng Biểu mẫu liên hệ 7, vui lòng tham khảo tài liệu của họ. Tại đây, bạn sẽ tìm thấy giải thích chi tiết về các thẻ khác nhau và khả năng của chúng, mẹo hữu ích từ tác giả plugin và các bài viết hữu ích về khắc phục sự cố nếu vì lý do nào đó plugin không hoạt động với bạn

Contact Form 7 là một trong những plugin miễn phí tốt nhất hiện có và là một trong những tùy chọn tốt nhất để tạo biểu mẫu liên hệ trên bất kỳ trang web WordPress nào. Hy vọng rằng hướng dẫn này hữu ích, nhưng nếu bạn có bất kỳ câu hỏi nào hoặc muốn chia sẻ suy nghĩ của mình về Mẫu liên hệ 7, vui lòng để lại nhận xét bên dưới cho chúng tôi

Làm cách nào để kiểm tra biểu mẫu liên hệ WordPress 7?

Biểu mẫu CF7 là gì?

Contact form 7 có tốt không?

Biểu mẫu liên hệ tiêu đề bổ sung 7 là gì?