Hoàng Luyến

Hoàng Luyến

<p>Administrator</p>

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


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
      tao-form-chuyen-nghiep-voi-contact-form-7
      Hình 1.1: Tìm và cài đặt plugin 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 
      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
      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
      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ẻ

      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: 

    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)

    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 
    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

    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
    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!

 

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ật Học WordPress Bài 28.7: Tạo hiệu ứng ảnh bằng Responsive Lightbox by dFactory »

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

Bài 28.6: Tạo form WordPress chuyên nghiệp với Contact Form 7
3.5/5 (70%) 2 votes


9 Bình luận

Viết bình luận
  1. Tháng Sáu 06, 00:56 Vnstarry

    e dùng Plugins Contact Form 7 và em tạo Form liên hệ sau đó em gửi thử thì trình duyệt báo thành công nhưng tại sao em vào Email lại không thấy có thư nào (trong spam cũng không có). Vậy cho em hỏi là nguyên nhân là do đâu và cách khắc phục như thế nào?

    Bình luận
    • Tháng Sáu 06, 00:57 Nguyễn Thủy

      Bạn gửi vào email domain riêng hay email với địa chỉ dạng @gmail.com? Nếu là domain riêng thì bạn cần phải vào MX Entry mà sửa record trong cPanel

      Bình luận
  2. Tháng Sáu 19, 00:30 Ngọc Sơn

    Tạo form WordPress chuyên nghiệp với Contact Form 7 ở đây là bạn hướng dẫn tạo Form liên hệ đấy ah?

    Bình luận
  3. Tháng Sáu 19, 00:40 Việt Ay

    Ad ơi tạo form này ứng dụng vào những cái gì

    Bình luận
  4. Tháng Sáu 19, 00:41 Việt Ay

    Hay chỉ là sử dụng contact form 7 chỉ để làm form liên hệ thôi

    Bình luận
  5. Tháng Sáu 19, 00:53 Hoàng Hà

    ad ơi!khi khách hàng vào web sẽ hiện ra Form liên hệ mà không cần phải hẳn vào bài viết mới xem được ạh. Dùng Plugin Contact Form 7 ak

    Bình luận
  6. Tháng Mười Hai 02, 04:22 Sơn Standa

    Có thể thay đổi kich cỡ của khung contact này theo ý mình không anh Luyến?

    Bình luận

Viết bình luận

Tất cả bình luận

Thật tuyệt vời nếu bài viết này nhận được ý kiến của bạn. *

SEO