Với hơn 1 triệu người dùng đang hoạt động, Mẫu liên hệ 7 là một trong những plugin dạng liên hệ phổ biến nhất cho WordPress. Nhược điểm lớn nhất của họ là các hộp ra ngoài của bạn thêm rất rõ ràng. Rất may, Mẫu liên hệ 7 có thể dễ dàng được tạo kiểu sử dụng CSS trong chủ đề WordPress của bạn. Trong bài này, chúng tôi sẽ giới thiệu cho các bạn cách tạo kiểu mẫu liên lạc 7 trong WordPress.
Chú thích: Chúng tôi không khuyên bạn sử dụng plugin Liên hệ Mẫu 7 nữa. Thay vào đó, chúng tôi khuyên bạn nên WPForms, đây là plugin thân thiện nhất dành cho người mới bắt đầu. Bạn cũng có thể tải WPForms Lite miễn phí.
Chúng tôi có hướng dẫn từng bước về cách tạo biểu mẫu liên hệ trong WordPress.
Bắt đầu
Chúng tôi giả định bạn đã cài đặt plugin Liên hệ Mẫu 7 và đã tạo mẫu liên hệ đầu tiên của bạn. Bước tiếp theo là sao chép mã ngắn cho biểu mẫu liên hệ của bạn và dán nó vào một bài đăng WordPress hoặc một trang mà bạn muốn biểu mẫu của mình xuất hiện.
Vì lợi ích của bài viết này, chúng tôi đã sử dụng mẫu liên hệ mặc định và thêm nó vào một trang WordPress. Đây là cách mẫu liên hệ tìm kiếm trên trang web thử nghiệm của chúng tôi.
Như bạn thấy, biểu mẫu liên hệ kế thừa một số kiểu mẫu từ chủ đề WordPress của bạn. Ngoài ra nó rất cơ bản.
Chúng tôi sẽ tạo mẫu liên hệ Mẫu 7 bằng CSS. Tất cả CSS đi vào chủ đề hoặc biểu mẫu kiểu chủ đề của trẻ em.
Tạo kiểu mẫu liên hệ 7 mẫu trong WordPress
Mẫu liên hệ 7 tạo ra một mã tương thích chuẩn rất hữu ích cho các biểu mẫu. Mỗi phần tử trong biểu mẫu có một ID thích hợp và lớp CSS kết hợp với nó.
Mỗi mẫu liên hệ sử dụng lớp CSS .wpcf7 mà bạn có thể sử dụng để tạo kiểu mẫu của bạn.
Trong ví dụ này, chúng tôi đang sử dụng một phông chữ Lora của Google trong các trường nhập của chúng tôi. Xem cách thêm Phông chữ của Google trong WordPress.
div.wpcf7 {
màu nền: #fbefde;
biên giới: 1px solid # f28f27;
đệm: 20px;
}
.wpcf7 đầu vào [type = "text"],
.wpcf7 đầu vào [type = "email"],
.wpcf7 textarea {
nền: # 725f4c;
màu: #FFF;
phông chữ họ: lora, sans-serif;
kiểu chữ: italic;
}
.wpcf7 input [type = "submit"],
.wpcf7 đầu vào [type = "button"] {
màu nền: # 725f4c;
Chiều rộng: 100%;
text-align: trung tâm;
chuyển đổi văn bản: chữ hoa;
}
Đây là cách mẫu liên hệ của chúng tôi xem xét sau khi áp dụng CSS này.
Tạo dáng nhiều mẫu liên hệ 7 mẫu
Vấn đề với CSS chúng tôi đã sử dụng ở trên là nó sẽ được áp dụng cho tất cả các Mẫu Liên hệ Mẫu 7 trên trang web của bạn. Nếu bạn đang sử dụng nhiều hình thức liên hệ và muốn sắp xếp chúng theo cách khác, thì bạn sẽ cần sử dụng ID được tạo ra theo biểu mẫu liên hệ 7 cho mỗi biểu mẫu.
Đơn giản chỉ cần mở một trang có chứa mẫu mà bạn muốn sửa đổi. Hãy di chuyển chuột đến trường đầu tiên trong biểu mẫu, nhấp chuột phải và chọn Kiểm tra phần tử. Màn hình trình duyệt sẽ tách ra, và bạn sẽ thấy mã nguồn của trang. Trong mã nguồn, bạn cần xác định vị trí dòng bắt đầu của mã mẫu.
Như bạn thấy trong ảnh chụp màn hình ở trên, mã mẫu liên hệ của chúng tôi bắt đầu với dòng:
Thuộc tính id là một số nhận dạng duy nhất được tạo ra bởi Mẫu liên hệ 7 cho mẫu đặc biệt này. Nó là một sự kết hợp của id mẫu và id bài đăng nơi thêm biểu mẫu này.
Chúng tôi sẽ sử dụng ID này trong CSS của chúng tôi để tạo kiểu mẫu liên hệ của chúng tôi. Chúng tôi sẽ thay thế .wpcf7 trong đoạn mã CSS đầu tiên của chúng tôi với # wpcf7-f201-p203-o1 .
div # wpcf7-f201-p203-o1 {
màu nền: #fbefde;
biên giới: 1px solid # f28f27;
đệm: 20px;
}
# wpcf7-f201-p203-o1 đầu vào [type = "text"],
# wpcf7-f201-p203-o1 đầu vào [type = "email"],
# wpcf7-f201-p203-o1 textarea {
nền: # 725f4c;
màu: #FFF;
font-family: lora, "Open Sans", sans-serif;
kiểu chữ: italic;
}
# wpcf7-f201-p203-o1 đầu vào [type = "submit"],
# wpcf7-f201-p203-o1 đầu vào [type = "button"] {
màu nền: # 725f4c;
Chiều rộng: 100%;
text-align: trung tâm;
chuyển đổi văn bản: chữ hoa;
}
Tạo kiểu mẫu liên hệ 7 với CSS Hero
Nhiều người mới bắt đầu sử dụng WordPress không có kinh nghiệm viết CSS, và họ không muốn dành thời gian để học nó. May mắn thay, có một giải pháp tuyệt vời cho người mới bắt đầu sẽ cho phép bạn không chỉ cần phong cách hình thức liên lạc của bạn mà hầu hết mọi khía cạnh của trang web WordPress của bạn.
Đơn giản chỉ cần cài đặt và kích hoạt plugin CSS Hero và vào trang có chứa mẫu của bạn. Nhấp vào thanh công cụ CSS Hero và nhấp vào phần tử bạn muốn tạo kiểu. CSS Hero sẽ cung cấp cho bạn một giao diện người dùng dễ dàng để chỉnh sửa CSS mà không bao giờ viết bất kỳ mã nào.
Đó là tất cả những gì chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu làm thế nào để tạo mẫu Contact Form 7 trong WordPress