Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7

Thích 2.1 K Bình luận 0
815 đánh giá

Bkasoft.net – Bài này mình hướng dẫn các bạn tạo form WordPress chuyên nghiệp với Contact Form 7 hoàn toàn miễn phí với khả năng tùy biến vượt trội.

 Plugin Contact Form 7 hiện được đánh giá là plugin có thể phục vụ được một số việc mà những plugin trả phí có khi không làm được. Dưới đây là cách hướng dẫn của mình về tạo form WordPress chuyên nghiệp mà lại dễ dàng tùy biến với plugin Contact Form 7.

  1. Tải và cài đặt plugin Contact Form 7

    Ở những bài hướng dẫn của bài 28 cài đặt chung dành cho plugin mình cũng đã hướng dẫn các bạn cách cài một plugin là như thế nào nên bài này mình chỉ hướng dẫn qua cách cài thôi.

    • Cài trên phiên bản tiếng Việt: Các bạn vào Gói mở rộng > Cài Plugin mới > Tìm tên plugin: Contact Form 7 và tiến hành cài đặt
    • Cài trên phiên bản tiếng Anh: Bạn vào Plugins > Add New > Tìm tên plugin: Contact Form 7 để cài đặt
      Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7
      Hình 1.1: Tìm và cài đặt plugin Contact Form 7
      Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7-1
      Hình 1.2: Xuất hiện biểu tượng hộp thư dành cho Contact
  2. Hướng dẫn tạo form liên hệ

    Để tạo Form bạn vào như sau: 
    Bước 1

    • Cài đặt trên phiên bản tiếng Anh: Bạn vào Contact > Add New  trên thanh menu
    • Cài đặt trên phiên bản tiếng Việt: Bạn vào Contact > Thêm 
      Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7-3
      Hình 2.1: Tạo form liên hệ cài trên bản tiếng Anh
      Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7-2
      Hình 2.2: Tạo form liên hệ cài trên bản tiếng Việt

    Bước 2: Tại bước này bạn có 2 tùy chọn tạo form. Một là tạo form với ngôn ngữ mặc định tương ứng gói ngôn ngữ WordPress bạn đang dùng. Hai là tạo form với gói ngôn ngữ tùy chọn, bạn có thể chọn bên dưới.

    Sau khi ấn nút tạo form, bạn sẽ có được cửa sổ như sau:

    • Cài đặt trên phiên bản tiếng Anh: Bạn có thể thấy chỗ Generate Tag
      Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7-5
      Hình 2.3: Cửa sổ Generate Tag
    • Cài đặt trên phiên bản tiếng Việt: Bạn có thể thấy chỗ Tạo thẻ

      Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7-4

      Hình 2.3: Cửa sổ tạo thẻ

      Chú thích

      • Text field: Trường dùng để bạn nhập text thông thường, thích hợp tạo field nhập tên, tiêu đề liên hệ,…
      • Email: Trường đặc biệt dùng để khách nhập email của họ vào, lúc đó các hệ thống email sẽ hiểu rằng đây là email của người liên hệ để bạn ấn reply nhanh chóng
      • URL: Trường dùng để nhập liên kết
      • Telephone Number: Một trường đặc biệt để nhập số điện thoại
      • Number (spinbox): Trường nhập số có thêm tính năng tạo nút tăng/giảm số
      • Number (slider): Trường chọn số đặc biệt, chọn theo kiểu kéo slide, kéo qua phải thì số tăng và kéo qua trái thì số giảm
      • Date: Trường riêng biệt để chọn ngày tháng, có tích hợp thêm tính năng chọn theo lịch
      • Text area: Trường để nhập text, nhưng khung text to hơn. Thích hợp để làm form nhập nội dung liên hệ
      • Dropdown menu: Trường chọn giá trị được định sẵn thông qua menu đổ xuống
      • Checkboxes: Trường chọn giá trị định sẵn thông qua việc đánh dấu
      • Radio buttons: Cũng là trường đánh dấu giá trị có sẵn nhưng chỉ được chọn một
      • Quiz: Trường nhập nội dung theo kiểu quiz
      • CAPTCHA: Trường nhập mã captcha kiểm tra, nếu nhập đúng thì mới có thể gửi form
      • File upload: Trường cho phép upload tập tin khi gửi liên hệ qua form này
      • Submit button: Chèn nút gửi form

     Bước 3: Sau khi chỉnh xong phần field, bạn copy đoạn shortcode bên trong khung màu đỏ bỏ vào phần form bên tay trái và chèn như sau: 

    <p>Tiêu đề của field (Tên của bạn)<br />shortcode-cua-form <p>

    Bước 4

    Bạn copy field trong khung màu xanh bỏ vào khung Mesage body của khung Mail phía bên trên. Khung này có ý nghĩa là cài đặt mẫu các thư liên hệ mà khách gửi cho bạn qua form này. Nếu bạn không copy field màu xanh bỏ vào khung bên phải của phần Mail thì bạn sẽ không thể thấy nội dung mà khách nhập vào trong field đó. (Cài đặt trên 2 phiên bản tương tự nhau nên mình chỉ lấy một hình)

    Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7-10

    Hình 2.4. Copy đoạn shortcode
    » Sau khi  bạn chỉnh xong, bạn nhớ Lưu lại ( Save )nhé!

  3. Chèn form vào post/page

    Bước 1: Copy đoạn shortcode của form
     Sang phần chèn Form này, bạn chỉ cần copy code trong khung màu tím ngay dưới tiêu đề form 
    Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7-11
    Hình 2.5: Copy đoạn shortcode của form

    Bước 2: Paste vào nội dung của post/page

    Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7-12
    Hình 2.6: Paste shortcode của form vào nội dung post/page

    Và đây là thành quả bạn có thể tự kiểm chứng
    Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-chuyen-nghiep-voi-contact-form-7-13

     

    Bạn có thể sử dụng form này cho bất cứ việc gì mà bạn muốn

  4. Lời kết

    Sau bài học này chắc hẳn các bạn đã biết cách tạo một form theo ý thích của mình bằng plugin Contact Form 7. Ở bài tiếp theo bài số 28.7 trong hệ thống các plugin cần thiết mình sẽ hướng dẫn các bạn Tạo hiệu ứng lightbox khi click vào ảnh để xem ảnh lớn với  Responsive Lightbox by dFactory. Chúc các bạn học tốt!

 

Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7 > tao-form-wordpress-chuyen-nghiep-voi-contact-form-7
Bài 28.6 – Tạo form WordPress chuyên nghiệp với Contact Form 7

( Case Study hướng dẫn sử dụng WordPress )

—oOo—

« Bài 28.5: Cách sử dụng iThemes Security để bảo mậtHọc WordPressBài 28.7: Tạo hiệu ứng ảnh bằng Responsive Lightbox by dFactory »

Tác giả: Hoàng Luyến


Bình luận