Mẫu liên hệ 7 là một plugin WordPress cực kỳ phổ biến để tạo các hình thức liên lạc. Nó cho phép bạn tạo các biểu mẫu mà không cần mã hóa HTML. những hình thức có thể cung cấp các tính năng như CAPTCHA, tải tập tin, lĩnh vực khảo sát khác ...

Mặc dù kiểu Liên hệ 7 mặc định là đủ cho hầu hết các biểu mẫu liên hệ cơ bản, bạn thường phải thay đổi nó.

Điều này thay đổi cấu trúc biểu mẫu mặc định để làm cho nó dễ truy cập hơn. Ông cũng thêm mã ngắn [đáp ứng] phía trên biểu mẫu để nếu có lỗi khi gửi biểu mẫu, nó sẽ được chỉ ra trên biểu mẫu.

Nếu bạn chưa từng tạo trang web WordPress, hãy tìm hiểu Cách cài đặt blog WordPress với ứng dụng khách FTP

Đối với dạng chuẩn, mã được tạo bởi plugin là:

[phản hồi] Tên của bạn (bắt buộc) [text * your-name id: your-name] Your Email (bắt buộc) [email * your-email id: your-email] Chủ đề của bạn [text your-subject id: your-subject] Tin nhắn của bạn [textarea your-message id: your-message] [submit "Gửi"]

Một số plugin để tùy chỉnh Mẫu liên hệ 7

1. Mẫu liên hệ 7

Lê Plugin Mẫu liên hệ 7 có một số kiểu để lựa chọn.

Đối với người dùng của chủ đề Twenty F Mười, cũng có một phong cách tương thích.

Để áp dụng một kiểu, đi đến " Kiểu liên hệ> Chỉnh sửa nhanh Kiểm tra biểu mẫu mà bạn muốn áp dụng kiểu, sau đó nhấp vào " Cập nhật '.

2. Mẫu liên hệ 7 Skins

Sử dụng Skins Liên hệ Mẫu 7, tạo một cái mới Mẫu liên hệ và cuộn trang xuống phần Skins. Bạn có thể chọn một mẫu và kiểu cho biểu mẫu của mình.

Bạn sẽ tìm thấy các mô hình dành riêng cho các dạngévénements, đăng ký và thông báo.

Đây là những gì mẫu khảo sát trông giống với phong cách Topaz sử dụng chủ đề Twenty F Mười.

3. Thiết kế vật liệu cho mẫu liên hệ

Những phong cách này dựa trên phong cách của Thiết kế tài liệu.

Plugin này đề xuất bạn xóa biểu mẫu mặc định và sử dụng các mã ngắn của nó.

Đây là một ví dụ với chủ đề Hestia. Lưu ý đến nhãn nổi khi con trỏ được di chuyển vào một trường trên biểu mẫu.

Liên hệ với Mẫu 7 kiểm tra trên một số Chủ đề WordPress

Biểu mẫu liên hệ với chủ đề ColorMag WordPress

Hầu hết thời gian, Biểu mẫu liên hệ 7 sẽ kế thừa phong cách của chủ đề WordPress của bạn. Đây là trường hợp với chủ đề Coral Dark.

Biểu mẫu liên hệ với chủ đề WordPress ColorMag

Đây là hình thức mà không có phong cách tùy chỉnh. Anh ta thừa hưởng màu của nút màu xanh Chủ đề ColorMag WordPress.

Tôi bắt đầu bằng cách tải lên ảnh để sử dụng làm hình nền cho biểu mẫu và thay đổi mã nhãn của biểu mẫu từ màu xám sang màu trắng với bóng xanh trên văn bản.

Những thay đổi sau đây là để tăng lề giữa nhãn biểu mẫu và trường biểu mẫu, thay đổi nút trừ và thêm viền khi con trỏ nhập vào các trường trên biểu mẫu.

Việc hiển thị thông báo lỗi / thành công khi biểu mẫu được gửi cũng nên được thay đổi để chúng hiển thị chính xác.

GIF xoay khi biểu mẫu được gửi không hiển thị chính xác, tôi đã tìm thấy một giải pháp thay thế cho Loading.io và tham chiếu nó với CSS.

Đây là mẫu kết quả:

Đây là mã:

div.wpcf7 {lề: 0; đệm: 1.5em; nền: url ('your_background_image_url_here'); -webkit-Border-radius: 3px; -moz-Border-radius: 3px; bán kính đường viền: 3px; } .wpcf7 nhãn, .wpcf7-submit {color: trắng; text-Shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {nền: #186d8e; } .wpcf7-form-control: tập trung {Border: 2px solid #289dcc; } div.wpcf7-answer-output {nền: #F8F8F8; văn bản-align: trung tâm; chiều rộng: 92.5%; lề: 1em 0em 1em 0em; -webkit-Border-radius: 3px; -moz-Border-radius: 3px; bán kính đường viền: 3px; } span.wpcf7-không-hợp lệ-tip {nền: #F8F8F8; hiển thị: khối nội tuyến; chiều rộng: tự động; đệm: 1%; -webkit-Border-radius: 3px; -moz-Border-radius: 3px; bán kính đường viền: 3px; } div.wpcf7 .ajax-loader {hình nền: url ('your_loading_image_url_here'); chiều rộng: 50px; chiều cao: 50px; }

Nếu bạn không cần viết nguệch ngoạc trong mã, chúng tôi khuyên bạn nên xem qua Các plugin 10 WordPress để tạo biểu mẫu liên hệ trên blog của bạn

Khám phá thêm các lựa chọn thay thế cao cấp 3 sẽ giúp bạn tạo các biểu mẫu liên hệ của bạn. 

1. Biểu mẫu liên hệ W8

W8 Contact Form là một trong những plugin của Mẫu liên hệ phổ biến nhất trên WordPress. Nó cung cấp rất nhiều tính năng như gửi cho nhiều người nhận, hỗ trợ hoạt ảnh, tạo biểu mẫu không giới hạn, các kiểu khác nhau và nhiều tùy chọn tùy chỉnh bổ sung.

Ngoài ra, nó cung cấp cho trang web hoặc blog của bạn một hệ thống chuyên nghiệp để giúp bạn liên hệ với khách hàng dễ dàng hơn. Bạn sẽ có thể tùy chỉnh tất cả các biểu mẫu của mình theo nhu cầu và thị hiếu của bạn.

Tải về | Bản demo | Web hosting

2. Liên hệ với chúng tôi

Liên hệ với chúng tôi Biểu mẫu là một plugin WordPress đáp ứng và một công cụ đơn giản nhưng có nhiều tùy chọn tùy chỉnh cho phép bạn hiển thị một biểu mẫu rõ ràng và khuyến khích, trên đó khách truy cập của bạn có thể liên hệ với bạn bằng cách để lại tin nhắn của họ.

Bạn sẽ có thể xác định các trường cần thiết, chọn bố cục tốt nhất của các trường và tùy chỉnh hoàn toàn để khuyến khích khách hàng hoặc khách truy cập của bạn để lại đề xuất hoặc tin nhắn của họ.

Chỉ cần thiết lập địa chỉ email nơi bạn muốn nhận tin nhắn và sử dụng nó để phát triển doanh nghiệp của bạn theo hướng có lợi nhất.

Tải về | Bản demo | Web hosting

3. Slick Popup Pro

Slick Popup Pro là một Phần mở rộng WordPress khá đơn giản và nhẹ có thể chuyển đổi bất kỳ biểu mẫu nào được tạo bởi plugin Liên hệ Mẫu 7 trong một cửa sổ bật lên. Cô sử dụng biểu mẫu và chuyển đổi nó thành một cửa sổ bật lên đẹp và hoàn hảo đáp ứng.

Biểu mẫu bật lên có thể có một số cách sử dụng bao gồm: biểu mẫu thu thập thông tin, Mẫu liên hệ, biểu mẫu đăng ký, biểu mẫu báo giá, đề xuất / biểu mẫu khiếu nại và những thứ khác.

Tải về | Bản demo | Web hosting

Tài nguyên đề xuất

Xem các tài nguyên được đề xuất khác sẽ giúp bạn tạo và quản lý tốt hơn các biểu mẫu liên hệ trên trang web hoặc blog của mình. 

• Các plugin 6 WordPress để xác minh bằng CAPTCHA trên biểu mẫu của bạn
• Làm thế nào để thêm một hình thức liên lạc với WordPress Contact Form 7
• Cách tạo biểu mẫu tuân thủ GDPR trên WordPress

Kết luận

Voila! Đó là tất cả cho hướng dẫn này, tôi hy vọng bạn sẽ có thêm ý tưởng để tùy chỉnh biểu mẫu liên hệ của mình. Đừng ngần ngại chia sẻ với bạn bè của bạn trên các mạng xã hội yêu thích của bạn. 

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.

Tuy nhiên, trong thời gian chờ đợi, hãy cho chúng tôi biết về ý kiến và đề xuất trong phần dành riêng.

...