Hướng dẫn cách tạo, tùy chỉnh, thiết kế, CSS form bằng contact form 7

Bạn đang muốn thêm phong cách CSS của riêng bạn vào Contact form 7 trong WordPress? Hy vọng rằng, hướng dẫn nhỏ này sẽ giúp bạn tạo ra 1 form contact  form 7 theo ý bạn !

Điều đầu tiên bạn cần cài đặt plugin Contact Form 7, bạn có thể tìm thấy nó ở đây .

Khi bạn đã kích hoạt plugin này, bạn có thể bắt đầu tạo và tùy chỉnh biểu mẫu của mình cho phù hợp. Sau khi bạn đã tạo biểu mẫu của mình, đừng quên bạn sẽ cần phải dán ‘shortcode’ cho mỗi biểu mẫu vào bất kỳ trang nào bạn muốn biểu mẫu xuất hiện. Đối với hướng dẫn này, chúng tôi sẽ giả định rằng bạn đã nhúng mã ngắn vào trang Liên hệ của mình. Phải, chúng ta hãy đến với nó.

Nơi để thêm CSS tùy chỉnh vào Contact Form 7 trong trang web của bạn

Trước khi chúng tôi bắt đầu, tôi muốn rõ ràng về nơi bạn nên thêm mã CSS của mình cho các biểu mẫu.

Các đoạn CSS dưới đây có thể được đặt trong theme của bạn tập tin style.css , trừ khi bạn đang sử dụng một child theme, trong trường hợp này mã sẽ phải được đặt bên trong child theme của bạn tập tin style.css , không phải là theme mẹ  .

Ví dụ –

Nếu bạn đang sử dụng  Genesis Child Theme , bạn có thể chỉ cần vào Appearance> Editor> Stylesheet (style.css) cho chủ đề con bạn đang sử dụng. Xem hình dưới đây.

Nếu bạn đang sử dụng một Newspaper , bạn có thể đi direclt đến Trang Dashboard > Theme Option > Style & Layout Settings và sử dụng hộp Custom CSS được cung cấp.

Bây giờ chúng ta hãy quay trở lại để nhúng shortcode. Một lần nữa, điều này có thể được đặt bất cứ nơi nào trong một bài đăng blog hoặc trang tĩnh.

Lưu ý: Nếu bạn đang nhúng mã ngắn vào trang được tạo bằng plugin xây dụng trang như Visual Composer, chỉ cần sử dụng tiện íchCustom CSS được cung cấp trong Theme option hoặc theme trong tệp tin style.css của theme.

Css Background và border contact form 7

Mã CSS sau bên dưới sẽ tạo kiểu cho background và border của contact form 7 của bạn . Điều đó có nghĩa là tất cả các form trên trang web của bạn.

Nếu bạn không muốn thêm background hoặc border tùy chỉnh, chỉ cần bỏ qua thêm đoạn mã này.

Nếu bạn sử dụng mã dưới đây mà không sửa đổi nó, bạn sẽ kết thúc với một nền màu xám nhạt với viền màu xám đậm. Bạn có thể điều chỉnh các giá trị được đánh dấu bằng màu đỏ theo ý thích của mình.

/ * css background và border contact form 7
----------------------------------------------- * /

.wpcf7 {
     background: #A3A3A3;
     border: 1 px solid #494949 ;
     width: 700 px;
}

Css input fields and text area contact form 7

Mã CSS sau sẽ tạo kiểu cho kích thước phông chữ, các trường nhập biểu mẫu, vùng văn bản, màu nền, màu phông chữ, chiều rộng biểu mẫu và phần đệm . Bạn có thể điều chỉnh các giá trị này (được đánh dấu bằng màu đỏ) theo sở thích của bạn.

Nếu bạn sử dụng mã bên dưới mà không sửa đổi, bạn sẽ thấy mỗi trường biểu mẫu có màu xám nhạt.

/ * Form liên hệ 
--------------------------------- * /

.wpcf7 input[type = "text"],
.wpcf7 input[type = "email"],
.wpcf7 input[type = "tel"],
textarea
{
    font-size: 16px;
    background: #f5f5f5 ;
    border: none;
    color: #000 ;
    width: 95%;
    padding: 2%;
}

Css button( submit) contact form 7

Cuối cùng, mã CSS sau đây sẽ tạo kiểu cho Button gửi của contact form 7 của bạn

Có ba quy tắc ở đây: input, input:hover and input:active. Hãy để tôi giải thích những gì từng người làm nếu bạn không hoàn toàn chắc chắn.

1. Input – Trạng thái của nút ‘nguyên trạng’ trước khi thực hiện bất kỳ hành động nào trên đó.
2. Input: hover – Trạng thái của nút khi con trỏ được di chuột qua đầu con trỏ.
3. input: active – Trạng thái của nút khi ai đó nhấp vào nút đó.

Vì vậy, bạn có thể thay đổi các giá trị cho từng cái này thành kiểu theo sở thích của bạn.

Nếu bạn sử dụng mã bên dưới mà không sửa đổi, bạn sẽ thấy một nút màu đỏ và nó sẽ thay đổi thành màu xám khi bạn di con trỏ chuột lên đầu nó.

/ * Button submit contact form 7 
------------------------------- * /

.wpcf7 input[type = "submit"] {
    color: #ffffff;
    font-size: 18 px;
    font-weight: 700;
    background: #9ED9330;
    padding: 15px 25px 15px 25px;
    border: none;
    border-radius: 5px;
    width: auto;
    text-decoration: none;
    text-transform: uppercase;
}

.wpcf7 input:hover[type = "submit"] {
    background: #494949;
    transition: all 0,4s ease 0s;
}

.wpcf7 input:active[type = "submit"] {
    background: #000000;
}

Cách thêm khoảng cách lề giữa đầu vào biểu mẫu và vùng chứa biểu mẫu

Nếu bạn đang sử dụng nền tùy chỉnh và đường viền với các trường biểu mẫu của bạn bên trong các trường này, bạn có thể nhận thấy các trường nhập của bạn quá gần với cạnh của đường viền vùng chứa.

Nếu bạn muốn thêm khoảng cách nào đó xung quanh, hãy sử dụng mã CSS sau.

Bạn có thể điều chỉnh theo ý thích của mình. Việc tăng giá trị px sẽ tăng không gian xung quanh các trường biểu mẫu của bạn và cạnh của vùng chứa nền của bạn.

/ * lề contact form 7
------------------------- * / 

.wpcf7 form{ 
     margin-left: 25px;
     margin-right: 25px;
     margin-top: 25px;
}

Toàn bộ css form sẽ như sau

Nếu bạn sử dụng tất cả các mã CSS ở trên được cung cấp mà không sửa đổi bất cứ điều gì, các biểu mẫu của bạn sẽ trông giống như thế này.

Lưu ý

Vì vậy, một hướng dẫn nhanh chóng và dễ dàng để thêm một số CSS tùy chỉnh đơn giản vào contact form 7 của bạn để làm cho chúng trở thành duy nhất cho trang web của bạn.

• Bạn có thể style các form theo nhiều kiểu khác nhau để không làm ảnh hưởng tới các form khác trong website đó là bao bọc form đó bằng 1 thẻ div và đặt thẻ div đó bằng 1 tên class, lúc đó ta sẽ css theo class cho form mình cần style riêng .

Nếu bạn có một số kiến ​​thức cơ bản về CSS, bạn có thể chơi xung quanh với các giá trị để thực sự cá nhân hóa các biểu mẫu liên hệ của mình.

Tất nhiên, nếu bạn không cảm thấy thoải mái khi làm rối tung các đoạn mã CSS, và đừng ngại cài đặt một plugin khác vào blog WordPress của bạn, có một giải pháp thay thế.

Bạn có thể Contact Form 7 Style .

Có lẽ tôi đã đề cập đến plugin này khi bắt đầu hướng dẫn. Tuy nhiên, bạn nên tắt mã hóa một cái gì đó vào trang web của mình theo cách thủ công hơn là cài đặt một plugin WP khác.

Trong mọi trường hợp, plugin này có tất cả các tùy chọn cần thiết để giúp bạn tùy chỉnh biểu mẫu của mình bằng một cú nhấp chuột đơn giản.

Tôi sẽ cập nhật bài hướng dẫn này trong tương lai gần với nhiều mẹo tạo kiểu hơn , Bây giờ, hãy thưởng thức những gì mình đã làm được

Nếu bạn có bất kỳ câu hỏi nào, vui lòng để chúng trong phần bình luận bên dưới như mọi khi.

Cảm ơn bạn đã đọc bài hướng dẫn. Hãy like share và đánh giá bài viết ngay dưới hộ mình nhé.