TwitterFacebookRSS
You are here: Home » Wordpress » Plugins » Thiết kế form liên lạc trong WordPress với Contact Form 7

Thiết kế form liên lạc trong WordPress với Contact Form 7

By: trongnguyen on Apr. 26, 2011 with 28 Comments

Giới thiệu

Thông thường khi muốn góp ý hoặc phản hồi thông tin trên Blog của ai đó thì bạn sẽ viết vào mục comment bên dưới bài viết, khi đó nội dung comment của bạn sẽ được public tới admin của Blog và với tất cả những người đọc khác. Còn trong trường hợp bạn muốn tương tác riêng với chủ nhân Blog hoặc hỏi những câu hỏi không liên quan tới bài viết cụ thể nào trên Blog thì form liên lạc (contact form) là một kênh hữu hiệu. Bài viết hôm nay tôi sẽ giới thiệu các bạn cách tạo contact form cho Blog với Plugin .

Demo

Khi bạn truy cập vào trang contact me trên Blog siteground193.com/~nguyenh4 bạn sẽ thấy có biểu mẫu sau.

Contact Form trong Blog siteground193.com/~nguyenh4 được tạo bằng Contact Form 7

Đó chính là form liên lạc trên Blog, và nếu bạn có thông tin gì cần góp ý riêng với tôi thì tôi rất sẵn lòng được đón nhận các contact form của bạn.

Download Plugin

Thông tin download Plugin Contact Form 7 được trình bày trong bảng dưới

Thiết kế form liên lạc với Contact Form 7
Tên Plugin Contact Form 7
Link download http://wordpress.org/extend/plugins/contact-form-7/
Số lần download 3,734,955
Tác giả Takayukister
Vị trí trên Dashboard Dashboard | Contact

Sử dụng Plugin

Sau khi download và cài đặt Plugin bạn hãy vào mục Dashboard | Contact để cấu hình cho Contact Form 7.

Cấu hình Contact Form 7 Plugin

Màn hình Contact Form 7 hiện ra, bạn chọn Add new để tạo 1 form liên lạc mới.

Tạo mới form trong Contact Form 7

Bạn chọn ngôn ngữ cho form liên lạc ở màn hình tiếp theo, hiện tại Contact Form 7 đã hỗ trợ tiếng Việt.

Contact Form 7 có hỗ trợ tiếng Việt

Một form tiếng Việt được hiện ra với đầy đủ thông tin của một form liên lạc (tên, email, tiêu đề & thông tiệp).

Form tiếng Việt được tạo trong Contact Form 7

Sau khi bạn nhấn Save để lưu thông tin thì một form mới sẽ được tạo ra như hình dưới.

Lưu form đã tạo trong Contact Form 7

Bạn chú ý bên dưới có phần Mail là nơi cấu hình địa chỉ email tiếp nhận các contact form từ độc giả, tôi chọn là trongnh1@gmail.com như hình dưới.

Địa chỉ email tiếp nhận contact trong Contact Form 7

Để sử dụng form này bạn hãy copy đoạn mã tạo form và paste vào trang Contact me của bạn.

Chèn Contact Form 7 vào trang Contact me

Sau khi đã update trang Contact me bạn quay lại trang chủ để kiểm tra, tại đây bạn sẽ thấy form liên lạc được hiển thị

Trang Contact Me được thiết kế bằng Contact Form 7

Mỗi khi có ai đó điền các thông tin vào form và nhấn nút gửi, bạn sẽ nhận được nội dung thông điệp tại email đã cấu hình trong phần Mail ở trên (VD: trongnh1@gmail.com)

Email được gửi đi từ Contact Form 7

Kết luận

Trên đây tôi đã giới thiệu cùng các bạn về Plugin Contact Form 7 giúp tạo form liên lạc WordPress. Bạn cũng có thể truy cập vào mục sau để xem thông tin về các khác. Cảm ơn bạn đã dành thời gian cho bài viết.


Tags:

Chào mừng bạn tới Blog của tôi, nơi chúng ta sẽ cùng sẻ chia những kinh nghiệm về việc xây dựng và phát triển website với Wordpress, kiến thức về Online marketing và ký sự sau mỗi chuyến đi khám phá những miền đất mới lạ.

Bài viết liên quan:

Did you like this article? Share it below!


28 Comments to “Thiết kế form liên lạc trong WordPress với Contact Form 7”

  • May 16, 2011 at 08:18
    dred says:

    good article ^_^

    Reply
  • May 27, 2011 at 10:47
    Mr Cuong Tran says:

    Bạn cho mình hỏi, mình mới tạo 1 blog thên host của wordpress.com.
    Mình k tìm được cách thêm các plugins vào trong Dasdboard như các hướng dẫn của bạn.
    Liệu có phải họ k hỗ trợ k?
    Nếu có hỗ trợ thì bạn chỉ giúp mình được k?

    Reply
    • May 29, 2011 at 09:06
      trongnguyen says:

      Bạn ơi bạn có đang login vào bằng quyền Administrator ko (vì trong WordPress chia cấp độ quản lý theo từng mức độ, múc Administrator là cao nhất và có toàn quyền kiểm soát Blog). Nếu đang login bằng quyền (Role) Administrator thì bạn vào theo đường dẫn sau nha: Dashboard (phần admin của blog) \ Plugins \ Add New. Sẽ có 1 cửa sổ Install Plugins hiện ra, tại đây bạn gõ tên Plugin cần cài đặt và nhấn nút Search để WordPress tìm kiếm và cài đặt Plugin của bạn từ Plugin Directory. Bạn làm thử coi nếu ko được báo lại mình nha.

      Reply
      • July 23, 2011 at 17:23
        Duy Luc says:

        Chao anh
        Em da lam nhu anh bao nhung van khong tao duoc form lien lac cho blog
        Em dowload Plugin ve nhung lai la 1 file nen, khong co file cai dat nen k lam duoc
        Anh xem chi em cach tao form lien lac nhe
        Thanh anh

        Reply
  • July 19, 2011 at 10:50
    Duc Nguyen says:

    Chào bạn huu trong, mình dùng contact form 7 vào plugin mail smtl plugin mà vẫn send mail bằng contact ko dc, nó vẫn báo lỗi không thể gởi mail, vậy bị lỗi gì, bạn giúp mới
    Y!M : Lndduc@yahoo.com
    thankss !

    Reply
    • July 25, 2011 at 09:30
      trongnguyen says:

      Chào bạn!

      Lỗi có thể là do bạn cấu hình email để gửi email chưa chính xác bạn ah, bạn đang dùng email nào để gửi mail từ Blog đi vậy? Mình dùng email Google (do mình tạo Google App cho website để gửi nhận email) và thấy okie bạn ah.

      Reply
  • October 6, 2011 at 01:49
    langtubuon_ckt says:

    Mình thì nó hiện cái form ra rồi, nhưng mà lúc bấm gửi đi thì nó y như cứ loading mãi vậy, ko thấy finish, bạn có thể chỉ mình cách khắc phục ko :) . Cám ơn bạn.

    Reply
    • October 6, 2011 at 09:47
      trongnguyen says:

      Chào bạn, có thể lỗi này xảy ra do bạn chưa setting để có thể gửi mail trong blog được, bạn thử vào đây để tham khảo cách sử dụng plugin WP Mail SMTP trong WordPress bạn nha: http://siteground193.com/~nguyenh4/wordpress-2/plugins/gui-smtp-mail-trong-wordpress-voi-wp-mail-smtp/. Chúc bạn thành công.

      Reply
      • October 6, 2011 at 10:32
        langtubuon_ckt says:

        Cám ơn bạn, mình làm được rồi ^^. Hi vọng website của bạn sẽ ngày càng nhiều có bài viết hay hơn. Ngày tốt lành :)

        Reply
        • October 6, 2011 at 10:59
          trongnguyen says:

          Cảm ơn lời động viên của bạn, chúc bạn một ngày vui vẻ – may mắn :)

          Reply
  • October 6, 2011 at 11:34
    langtubuon_ckt says:

    À, bạn có thể cho mình hỏi chút ở hình dưới ko.
    http://nd5.upanh.com/b3.s12.d1/3a49f2ab387865e0cb84c769158f9826_36143465.untitled1.jpg
    ở cái hình, chữ nó nằm sát vào quá , và thứ 2 là giữa bài viết với cái sidebar nó cách nhau 1 khoảng rộng, mình muốn thu hẹp lại. Bạn hướng dẫn giúp mình với. thanks bạn :)

    Reply
    • October 7, 2011 at 09:13
      trongnguyen says:

      Chào bạn!

      Đây là phần design của giao diện (theme) Blog, để chỉnh sửa phần này bạn có thể FTP vào host và truy cập vào file single.php theo đường dẫn /public_html/wp-content/themes/tên_theme/single.php, sau đó bạn tùy chỉnh giao diện theo mong muốn của bạn.

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

      Reply
  • October 7, 2011 at 21:24
    Thinh says:

    Thanks. Minh down ve dung thu

    Reply
    • October 7, 2011 at 22:13
      trongnguyen says:

      Okie bạn, chúc bạn thành công.

      Reply
  • October 9, 2011 at 00:40
    Man EnVy says:

    Blog có rất nhiều bài hay cho dân “ngoại đạo”, vì ngại cài nhiều plug-in (hiện tại đã hơn 10) nên mình chỉ dùng Google Docs, dù hơi bất tiện tí nhưng do không có nhiều người gửi lắm nên vẫn dùng được :)

    Reply
    • October 9, 2011 at 09:41
      trongnguyen says:

      Cảm ơn sự động viên của Mẫn, mình cũng vừa được xem Blog của Mẫn thực sự mình thấy là một “dân cầu đường” như Mẫn mà viết được nhiều bài hay về IT như vậy chứng tỏ Mẫn rất đam mê với IT, thủ thuật và Blog, chúc mừng Mẫn và rất vui vì chúng ta có cùng đam mê này :)

      Chúc http://abcmaytinh.com/ sẽ ngày một phát triển thịnh vượng hơn :)

      Reply
      • October 9, 2011 at 10:03
        Man EnVy says:

        Ôi, bạn quá khen rồi, nhưng dù sao mình cũng rất thích được nghe thế! :D Mình không chúc nhưng mà cũng thay cho một lời chúc: hy vọng mỗi khi ghé http://siteground193.com/~nguyenh4 sẽ được trải nghiệm những chia sẻ mới về cuộc sống, những chuyến đi và các thủ thuật blog :)

        Reply
  • October 10, 2011 at 12:21
    langtubuon_ckt says:

    À, nhân tiện cho mình hỏi cái này với, có ai biết cách để tạo header như của trang http://abcmaytinh.com hoặc http://gocsuyngam.com (cái flash 5 images) ko ^^

    Reply
  • October 15, 2011 at 21:02
    Quang says:

    Bạn ơi cho mình hỏi… Sao mình chèn đoạn mã vào nó toàn báo là [contact-form-7 404 "Not Found"] … Và đoạn mã nó như này [contact-form-7 id="71" title="myself_copy"]… Hix.. Bạn giúp mình với

    Reply
    • October 17, 2011 at 11:21
      trongnguyen says:

      Chào bạn!

      Đoạn code chính xác phải là thế này bạn ah

      [contact-form 7 id="71" title="myself_copy"]

      Không có dấu “-” giữa contact-form và 7 bạn ah

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

      Reply
  • November 15, 2012 at 09:13
    Mask says:

    Cảm ơn bạn, cái này dùng tốt quá.

    Reply

Post comment