Sử dụng Plugin Contact Form 7 cơ bản

Bài viết này được viết bởi Thế Khương | Wordpress

Tìm kiếm tùy chỉnh
Sắp xếp theo:
Relevance
Relevance
Date
Web
 
 
 
Thế Khươngkiemtiencenter.com

Hey, chào bro đến với Kiemtiencenter. Hy vọng những kiến thức mình chia sẻ có thể giúp bạn phần nào đó trong quá trình kiếm tiền online & marketing online. 2018 này, bạn có thể theo dõi hành trình MMO của mình tại đây

Feb 29

Sử dụng Plugin Contact Form 7 cơ bản

Trong một website luôn có mục liên hệ, bạn có thể cung cấp email, skype hay thông tin Facebook cá nhân cho độc giả có thể liên hệ với bạn một cách thủ công. Tuy nhiên nếu bạn muốn tạo 1 form liên hệ để cho khách hàng có thể điền thông tin liên hệ với 1 cách nhanh chóng cũng không quá khó khăn. Dưới đây mình sẽ hướng dẫn cho các bạn 1 số cách để tạo 1 contact form như vậy.

su-dung-contact-form-7-co-ban

Hãy chắc chắn bạn đã biết cách cài WordPress Plugins trước khi đọc bài hướng dẫn này.

1. Tạo contact form đơn giản với Contact Form 7 Plugin

Đối với một người mới làm website thì chỉ cần xây dựng 1 form liên hệ đơn giản là đủ, và contact form 7 sẽ đáp ứng tốt điều này. Sau khi cài đặt xong plugin contact form 7 bạn vào Contact => Add New để tạo 1 form mới :

contact-form7

Bạn điền tiêu đề cho form sau đó nhìn xuống dưới sẽ thấy dưới mục form đã có những dòng lệnh mặc định, nếu để y nguyên form như này và lưu lại, bạn sẽ có 1 contact form như sau :

Mới !! $10k với [...]

Chia sẻ mới từ độc giả guest post lên Kiemtiencenter sẽ giúp bạn phần nào hiểu về những kinh nghiệm xương máu (Mà không 1 nơi khác chia sẻ) về kiếm tiền với [...], một hướng đi khá tốt trong thời gian tới.

contact-form-7-co-ban

Bạn hoàn toàn có thể so sánh và thấy được có 5 phần tương ứng với 5 mục của contact form : Tên, email, tiêu đề, thông điệp  nút gửi.

Để chèn form vào bài viết hay page bất kỳ, lúc thêm form hay chỉnh sửa, bạn save lại sẽ thấy 1 đoạnshortcode tương tự như sau :

contact-form-shortcode

Bạn copy đoạn code này chèn vào bất cứ bài viết nào hoặc page nào, tốt nhất là bạn nên tạo 1 page “LIÊN HỆ” và chèn đoạn code này vào.

chen-contact-form

Bạn có thể ghi thêm câu chữ hoặc hình ảnh nếu muốn, xong rồi Publish. Bạn sẽ được 1 page contact. Nhấn vào link dưới đây để xem Demo :

Demo : http://teambuildvn.tech/contact-sample/

2. Thêm các mục khác cho Contact Form 7

Để thêm các mục khác hoc Contact Form 7 cũng không hề khó, như bạn thấy lúc đầu, mặc định contact form 7 sẽ tạo cho bạn những dòng lệnh cơ bản để tạo ra 1 form đơn giản. Và ở trên thanh công cụ, sẽ có rất nhiều các field khác để cho các bạn tự chọn :

contact-form-7-field

Cụ thể là các Field sau :

  • Text :Dùng để khách nhập các đoạn chữ ngắn, thường là Họ, tên, họ & tên, tiêu đề,…
  • Email:Dùng để khách nhập email của họ vào.
  • URL: Dùng để khách nhập đường link, liên kết, trang web của họ.
  • Tel : Dùng để khách nhập nhập số điện thoại.
  • Number (spinbox hoặc slider):Dùng cho khách nhập số có thêm tính năng tăng giảm bằng cách chọn dấu + và – (spinbox) hoặc kéo qua trái, phải (slider)
  • Date: Dùng cho khách nhập ngày tháng năm
  • Text area: Dùng cho khách nhập nội dung văn bản dài
  • Dropdown menu: Dùng cho khách chọn những mục mà bạn đã mặc định sẵn (Chọn được nhiều hoặc một)
  • Checkboxes: Dùng cho khách chọn những mục mà bạn mặc định sẵn (chọn được một)
  • Radio buttons: Dùng cho khách chọn những mục mà bạn mặc định sẵn (chọn được nhiều)
  • Quiz: Dùng để cho khách chọn trắc nghiệm
  • reCAPTCHA: Dùng để khách nhập CAPCHA, nhập đúng mới có thể gửi form, chống spam, phải kết nối với reCAPCHA thông qua API
  • File upload: Dùng cho khách upload file, ko nên dùng field này
  • Submit button: Chèn nút gửi form (SEND) để khách có thể hoàn thành.

Với hơn 10 fields này, bạn có thể tùy chỉnh, thêm bớt để tạo ra 1 cái form chuyên nghiệp. Khi nhấn vào mỗi field, bạn có thể thấy sẽ có các thiết lập riêng cho mỗi field. Ví dụ khi nhấn vào URL nó sẽ ra như thế này :

cai-dat-url-contact-form

Bạn có thể tùy chỉnh ý bạn như có bắt buộc phải điền thông tin này hay không (Field Type), tên của field theo ý muốn (Name), giá trị mặc định khi hiển thị form (Default Value),…..

Đây là một demo khá đẩy đủ các field của contact form : http://teambuildvn.tech/contact/

3. Tùy chình email ở Contact Form 7

Bạn có thể tùy chỉnh sao cho khi khách hàng điền form và nhấn SEND, thì nội dung sẽ được chuyển đến email nào, và nội dung email là gì tại mục Mail.

tuy-chinh-email-contact-form

Ở mục này bạn có thể tùy chỉnh tất cả từ email của bạn (nhận nội dung) cho đến tiêu đề, nội dung email,…bạn có thể điền các thẻ tag, các thẻ này sẽ tự động biến thành nội dung của khách hàng khi email đến bạn. Các thẻ tag này lúc tạo form bạn có thể tùy chỉnh

Ví dụ với cài đặt của mình bên trên, thẻ tag là [your-name] sẽ tự động biến thành tên khách hàng, thẻ [your-phone] sẽ tự động biến thành số điện thoại khách hàng. Như vậy mình sẽ nhận được 1 email tương tự như sau :

email-contact-form-7

Bạn có thể tùy chỉnh sao cho hợp với cách nhìn, làm việc của bạn. Nếu bạn không nhận được email, hãy check thư mục spam và chắc chắn rằng ở phần cài đặt này, mục To là điền email của bạn.

4. Tùy chỉnh thông báo cho khách hàng

Bạn có thể tùy chỉnh ngôn ngữ thông báo khi hiển thị cho khách hàng tại mục Messages :

tuy-chinh-ngon-ngu-contact-form

Ví dụ nếu bạn làm ngôn ngữ tiếng Việt có thể tự dịch các câu này ra tiếng Việt và thay thế các câu cũ. Hoặc bạn có thể viết theo phong cách của bạn.

5. Kết luận

Trong bài viết này, mình đã hướng dẫn cho bạn cách sử dụng plugin Contact Form 7 để tạo 1 form liên hệ rất cơ bản và dễ sử dụng. Plugin này là plugin miễn phí và được sử dụng phổ biến nhất ở thời điểm hiện tại ví tính đơn giản của nó. Nếu như bạn muốn thêm các chức năng nâng cao, tạo 1 form chuyên nghiệp hơn theo ý của bạn, mình sẽ hướng dẫn ở phần kế tiếp.

Chúc bạn sử dụng thành công.

Đôi chút về Thế Khương

Kiếm tiền với affiliate từ 2013 // Thế mạnh : Inbound marketing, UI // Thích đọc bài trên Quora & lướt Reddit. Thích chia sẻ về MMO, marketing trên blog & xây dựng cộng đồng.

Theo dõi mình trên Facebook
Xem tất cả bài viết

Ưu đãi Special bao gồm combo ebook về affiliate marketing, nghiên cứu từ khóa, xây dựng nội dung có thể giúp bạn bắt đầu xây dựng website & kiếm tiền trong 2018 này. Hơn 5000 độc giả Kiemtiencenter đã nhận thành công.

GỢI Ý !!!

Kiemtiencenter đang có ưu đãi cực lớn, tặng áo thun, ebook hướng dẫn kiếm tiền affiliate, nghiên cứu từ khóa, xây dựng nội dung cho blog, tặng thêm bộ giao diện làm website kiếm tiền !!! bấm vào đây để xem chi tiết.

16
Để lại câu hỏi và mình sẽ hồi âm trong thời gian tối đa 24 giờ :

avatar
mới nhất cũ nhất
ngọc văn
Khách
ngọc văn

contact form của mình hơi dài, làm thế nào để tùy chỉnh cho ngắn lại đây. Cảm ơn Thế Khương nhé

Hoàng Phúc (Kiemtiencenter Support)
Hỗ trợ
Hoàng Phúc (Kiemtiencenter Support)

Nếu bạn cài plugin này thì trong trình quản lý WordPress vào Contact form rồi edit lại form bạn chọn hoặc tạo 1 form mới là được nha.

Hiếu
Khách
Hiếu

Cho minhd hỏi nó bị lỗi, không hiện lỗi nhưng không gửi đc vào mail là sao nhỉ. Mới bị, trước đó vẫn ngon lành

Hoàng Phúc (Kiemtiencenter Support)
Hỗ trợ
Hoàng Phúc (Kiemtiencenter Support)

Bạn xem trong setting của Contact form phần email có bị sai sót chỗ nào không. Nếu không thì xóa đi cài lại xem sao bạn.

Dũng Nguyễn
Khách
Dũng Nguyễn

Cho mình hỏi: lảm sao để tạo contact form với ngôn ngữ là tiếng việt.

Khương Thắng
Khách
Khương Thắng

mình muốn contact gửi vào trong trang admin của website được không admin

Quang Khải
Khách
Quang Khải

Bạn ơi mình cũng đang muốn contact gửi vào trang admin của website, nếu bạn đã từng xử lý qua thì cho mình được biết với nhé. cảm ơn bạn

Diễm
Khách
Diễm

sao e làm y như vậy sau khi gửi thì nó thông báo gửi thành công nhưng mầ k nhận đc mail @@

Hưng
Khách
Hưng

Mình cũng bị nhưng tìm ra được 2 lý do sau, bạn kiểm tra thử nhé. Một là chỗ From bạn điền 1 địa chỉ mail không có thực. Hai là mail bị cho vào mục spam

Đạt
Khách
Đạt

Mình Test : sau khi điền hết thông tin, ấn gửi thì bị hiện lên dòng chữ:
There was an error trying to send your message. Please try again later.
ko gửi được bạn ạ. ad hỗ trợ mình với. thanks

Hậu
Khách
Hậu

mình cũng bị lỗi There was an error trying to send your message. Please try again later.

cường
Khách
cường

em bị vấn đề này:There was an error trying to send your message. Please try again later.
mong các anh chị giúp ạ