CF7 - Hướng dẫn cách thêm icon vào Contact Form 7

Contact Form 7 (CF7) không có sẵn icon trong form điền thông tin, nếu muốn hiển thị các icon tên, icon điện thoại hoặc icon địa chỉ,.. thì chúng ta cần xem hướng dẫn thêm icon vào Contact Form 7 dưới đây.

Mặc định là bạn đã cài đặt plugin CF7 và kích hoạt rồi nhé.

Bước 1: Nhúng, tải font Fontawesome và upload lên hosting hoặc cài plugin font Fontawesome cho nhanh

Tải font mới nhất ở đây: https://fontawesome.com/download

Sau đó nhúng là thêm đoạn code này vào phần header của giao diện đang dùng

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->

1	<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->

Hoặc nhúng trực tiếp link từ trang web chính (cách này sẽ làm mất thời gian tải font)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

1	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Tìm hiểu thêm cách nhúng vào website ở đây: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Bước 2: Thêm CSS class vào cấu hình CF7

Ví dụ một form CF7 cơ bản

<p><span class="fa fa-user"></span>[text* your-name placeholder "Your Name (required)"]</p>

<p><span class="fa fa-envelope"></span>[email* your-email placeholder "Your Email (required)"]</p>

<p><span class="fa fa-folder"></span>[text your-subject placeholder "Subject"]</p>

<p><span class="fa fa-pencil"></span>[textarea* your-message placeholder "Message (required)"]</p>

[submit "Send"]

[text* your-name placeholder "Your Name (required)"]

[email* your-email placeholder "Your Email (required)"]

[text your-subject placeholder "Subject"]

[textarea* your-message placeholder "Message (required)"]

[submit "Send"]

Bước 3: Chỉnh sửa CSS cho icon và CF7 cho đẹp

.wpcf7-form input {
border-radius:6px;                  /* Makes the edges rounded */}
.wpcf7-form textarea {
border-radius:6px;          /* Makes the edges rounded */}
.wpcf7-form .wpcf7-submit {     
background:#00a6ca;         /* This edit the button colour */}
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
  text-indent: 45px;
}
.wpcf7 p{ position: relative; }
.wpcf7 p .fa{
  position: absolute;
  color: #666666;
  z-index: 100;
  font-size: 18px;
  top: 28%;
  left: 1.5%;
}
.wpcf7 p .fa-pencil{ top: 5%; left: 1.5%}

.wpcf7-form input {

border-radius:6px; /* Makes the edges rounded */

}

.wpcf7-form textarea {

border-radius:6px; /* Makes the edges rounded */

}

.wpcf7-form .wpcf7-submit {

background:#00a6ca; /* This edit the button colour */

}

.wpcf7 .wpcf7-text,

.wpcf7 .wpcf7-textarea{

text-indent: 45px;

}

.wpcf7 p{ position: relative; }

.wpcf7 p .fa{

position: absolute;

color: #666666;

z-index: 100;

font-size: 18px;

top: 28%;

left: 1.5%;

}

.wpcf7 p .fa-pencil{ top: 5%; left: 1.5%}

Và kết quả như ý:

Chúc các bạn thành công.

Nguồn: sưu tầm

Hướng dẫn, Chia sẻ code

CF7 – Hướng dẫn cách thêm icon vào Contact Form 7

Để lại một bình luận Hủy

Main Headline

Smaller Headline

ĐĂNG KÝ NHẬN TƯ VẤN