Vì các Element khác của WordPress không cho tạo tính năng hiệu ứng này nên chỉ có Contact Form 7 là thực hiện được điều đó. Bài hướng dẫn này chủ yếu sẽ sử dụng code nên các bạn hãy chú ý đọc thật kỹ.

Trước khi đọc bài viết này bạn hãy tìm hiểu về cách cài đặt và kích hoạt plugin Contact Form 7 trong loạt bài hướng dẫn về WordPress “Hướng dẫn tạo Form nhập thông tin liên hệ trên WordPress với Contact Form 7”Chúng ta chuẩn bị bắt đầu vào bài viết.

 

Bước 1: Vào Form liên hệ → Tạo Form mới

 

 hinh 1

 

Bước 2: Nhập tên Form

 

hinh 2

 

Bước 3: Xóa hết Form có sẵn

 

hinh 3

 

hinh 4

 

Bước 4: Bắt đầu thực hiện tạo hiệu ứng chữ chạy. Ở đây mình sẽ sử dụng code cũng khá đơn giản chủ yếu là cặp thẻ <marquee> </marquee>

 

hinh 5

 

Bước 5: Thêm nội dung vào bên trong cặp thẻ

 

hinh 6

 

Bước 6: Thêm icon vào trước nội dung bên trong cặp thẻ

 

hinh 7

 

Bước 7: Tùy chỉnh màu sắc của icon, màu chữ và kiểu chữ

 

hinh 8

 

Bước 8: Tùy chỉnh in đậm, in nghiêng…hay tùy chỉnh kích thước nội dung thì dùng các cặp thẻ như <b> </b>, <i> </i>, <h2> </h2>…

 

hinh 9

 

Bước 9: Để vừa mắt người xem thì bạn có thể căn giữa nội dung bằng cặp thẻ <center> </center>

 

hinh 10

 

Bước 10: Các bạn có thể tìm hiểu thêm các cặp thẻ khác để tùy chỉnh theo ý muốn của các bạn. Sau khi đã xong thì bạn bấm Lưu

 

hinh 11

 

Bước 11: Bấm vào Xem trang → Sửa trang

 

hinh 12

 

hinh 13 

Bước 12: Bấm vào Add Element

 

hinh 14

 

Bước 13: Chọn Conttact Form 7

 

hinh 15

 

Bước 14: Chọn tên Form vừa tạo → Save changes

 

hinh 16

 

Bước 15: Bấm vào Update để cập nhật và xem kết quả

 

hinh 17

 

hinh 18

 

Xem thêm những bài viết hướng dẫn học thiết kế website bán hàng online chuyên nghiệp bằng WordPress:

» Hướng dẫn tùy chỉnh nút submit của plugin Contact Form 7

» Hướng dẫn sử dụng plugin Contact Form 7 Dynamic Text Extension

» Kiến thức về thiết kế website WordPress đầy đủ nhất