Contact Form 7 (CF7) mặc định sẽ không có sẵn icon trong form điền thông tin, nếu bạn muốn hiển thị các icon tên, icon điện thoại, icon email, icon địa chỉ,.. bài viết này sẽ giúp các bạn thêm icon vào Contact Form 7 một cách đơn giản nhất

Bước 1: Cài đặt và kích hoạt plugin cần thiết

Bạn cần cài đặt Plugin Font Awesome hoặc bất kỳ plugin nào hỗ trợ thêm icon vào website. Font Awesome là một lựa chọn phổ biến vì nó cung cấp nhiều loại icon khác nhau.

Bước 2: Thêm icon vào Contact Form 7

1. Truy cập trang quản trị WordPress và vào Forms liên hệ > Danh sách Forms.

2. Chọn form mà bạn muốn thêm icon.

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>

<p><span class="fa fa-arrow-circle-right"></span>[submit "Send"]</p>

3. Chỉnh sửa CSS cho icon và CF7 cho đẹp

.wpcf7-form input {
border-radius:6px; 
}
.wpcf7-form textarea {
border-radius:6px; 
}
.wpcf7-form .wpcf7-submit { 
background:#0088cc; 
padding: 10px 20px 10px 32px; 
}
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
text-indent: 28px;
}
.wpcf7 p{ position: relative; }
.wpcf7 p .fa{
position: absolute;
color: #666666;
z-index: 100;
font-size: 16px;
top: 31%;
left: 1.5%;
}
.wpcf7 p .fa-pencil{ 
top: 12px; left: 1.5%
}
.wpcf7 p .fa-arrow-circle-right{ 
left: 17px;
}
input, textarea, select {
padding: 12px 0px 12px 0px;
}

Và kết quả như ý