Cách tạo kiểu cho mẫu liên hệ 7 mẫu trong WordPress

Với hơn 1 triệu người dùng hoạt động, Contact Form 7 là một trong những plugin hình thức liên hệ phổ biến nhất cho WordPress. Nhược điểm lớn nhất của chúng là các hình thức bên ngoài hộp bạn thêm vào trông rất đơn giản. Rất may, Contact Form 7 có thể được tạo kiểu dễ dàng bằng CSS trong chủ đề WordPress của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo kiểu biểu mẫu liên hệ 7 trong WordPress.


Ghi chú: Chúng tôi không đề nghị plugin Liên hệ với mẫu 7 nữa. Thay vào đó, chúng tôi khuyên dùng WPForms, đây là plugin hình thức liên hệ thân thiện với người mới bắt đầu nhất. Bạn cũng có thể tải xuống 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.

Video hướng dẫn

Đăng ký WPBeginner

Nếu bạn không thích video hoặc cần thêm hướng dẫn, hãy tiếp tục đọc.

Bắt đầu

Chúng tôi giả định rằng bạn đã cài đặt plugin Contact Form 7 và đã tạo biểu 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 bài đăng WordPress hoặc trang bạn muốn biểu mẫu của mình xuất hiện.

Vì mục đích của bài viết này, chúng tôi đã sử dụng biểu mẫu liên hệ mặc định và thêm nó vào trang WordPress. Đây là cách biểu mẫu liên hệ trên trang web thử nghiệm của chúng tôi.

Mẫu liên hệ mặc định 7 trên trang web WordPress sử dụng chủ đề mặc định của WordPress

Như bạn có thể thấy rằng biểu mẫu liên hệ kế thừa một số kiểu biể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 kiểu biểu mẫu Liên hệ 7 bằng CSS. Tất cả CSS đi vào chủ đề của bạn hoặc biểu định kiểu của chủ đề con.

Tạo mẫu Liên hệ 7 Mẫu trong WordPress

Mẫu liên hệ 7 tạo ra một mã tuân thủ tiêu chuẩn và 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 lớp ID và CSS thích hợp được liên kết với nó.

Mỗi biểu mẫu liên hệ sử dụng lớp CSS .wpcf7 mà bạn có thể sử dụng để tạo kiểu cho biểu mẫu của mình.

Trong ví dụ này, chúng tôi đang sử dụng phông chữ Lora của Google trong các trường đầu vào của chúng tôi. Xem cách thêm Google Fonts trong WordPress.

div.wpcf7 {
màu nền: #fbefde;
viền: 1px solid # f28f27;
phần đệm: 20px;
}
.đầu vào wpcf7 [loại ="bản văn"],
.đầu vào wpcf7 [loại ="e-mail"],
.văn bản wpcf7 {
nền: # 725f4c;
màu: #FFF;
họ phông chữ: lora, sans-serif;
kiểu chữ: in nghiêng;
}
.đầu vào wpcf7 [loại ="Gửi đi"],
.đầu vào wpcf7 [loại ="cái nút"] {
màu nền: # 725f4c;
chiều rộng: 100%;
văn bản-align: trung tâm;
biến đổi văn bản: chữ hoa;
}

Đây là cách biểu mẫu liên hệ của chúng tôi trông sau khi áp dụng CSS này.

Tạo mẫu Liên hệ mẫu 7 với CSS trong WordPress

Tạo kiểu nhiều mẫu liên hệ 7 mẫu

Vấn đề với CSS mà chúng tôi sử dụng ở trên là nó sẽ được áp dụng cho tất cả các biểu mẫu Liên hệ 7 trên trang web của bạn. Nếu bạn đang sử dụng nhiều biểu mẫu liên hệ và muốn tạo kiểu khác nhau, thì bạn sẽ cần sử dụng ID được tạo bởi biểu mẫu liên hệ 7 cho mỗi biểu mẫu.

Chỉ cần mở một trang có chứa biểu mẫu bạn muốn sửa đổi. Đưa 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ẽ phân tách 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.

Tìm ID phần tử cho biểu mẫu liên hệ của bạn

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, mã biểu mẫu liên hệ của chúng tôi bắt đầu bằng dòng:

Thuộc tính id là một mã định danh duy nhất được tạo bởi Contact Form 7 cho mẫu cụ thể này. Nó là sự kết hợp của id mẫu và id bài đăng nơi biểu mẫu này được thêm vào.

Chúng tôi sẽ sử dụng ID này trong CSS để tạo kiểu cho mẫu liên hệ của chúng tôi. Chúng tôi sẽ thay thế .wpcf7 trong đoạn CSS đầu tiên của chúng tôi bằng # wpcf7-f201-p203-o1.

div # wpcf7-f201-p203-o1 {
màu nền: #fbefde;
viền: 1px solid # f28f27;
phần đệm: 20px;
}
đầu vào # wpcf7-f201-p203-o1 [type ="bản văn"],
đầu vào # wpcf7-f201-p203-o1 [type ="e-mail"],
# wpcf7-f201-p203-o1 textarea {
nền: # 725f4c;
màu: #FFF;
họ phông chữ: lora, "Mở Sans", sans serif;
kiểu chữ: in nghiêng;
}
đầu vào # wpcf7-f201-p203-o1 [type ="Gửi đi"],
đầu vào # wpcf7-f201-p203-o1 [type ="cái nút"] {
màu nền: # 725f4c;
chiều rộng: 100%;
văn bản-align: trung tâm;
biến đổi văn bản: chữ hoa;
}

Tạo mẫu Liên hệ 7 Mẫu với CSS Hero

Nhiều người mới bắt đầu 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ỉ tạo kiểu cho biểu mẫu liên hệ của mình mà gần như mọi khía cạnh của trang web WordPress của bạn.

Chỉ cần cài đặt và kích hoạt plugin CSS Hero và truy cập trang chứa biểu mẫu của bạn. Nhấp vào thanh công cụ CSS Hero và sau đó nhấp vào yếu tố bạn muốn tạo kiểu. CSS Hero sẽ cung cấp cho bạn giao diện người dùng dễ dàng để chỉnh sửa CSS mà không cần viết bất kỳ mã nào.

Tạo mẫu Liên hệ Mẫu 7 bằng CSS Hero

Xem đánh giá đầy đủ của chúng tôi về CSS Hero và cách sử dụng nó để tạo kiểu bất cứ thứ gì trên trang web WordPress của bạn. Bạn có thể sử dụng mã phiếu giảm giá CSS Hero WPBeginner để được giảm giá độc quyền 34%.

Đó 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 cách tạo kiểu cho Biểu mẫu Liên hệ 7 trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách thêm cửa sổ bật lên biểu mẫu liên hệ trong WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map