Trang chủ WordpressWordpress Plugin Tạo form chuyên nghiệp với Contact Form 7

Tạo form chuyên nghiệp với Contact Form 7

bởi Thạch Phạm
50 bình luận 9816 views
Khuyến mãi hosting

https://www.youtube.com/watch?v=txry_pf4qio

Trước đây mình đã có hướng dẫn tạo form liên hệ (hoặc bất cứ form nào) với plugin JetPack. Nhìn chung nó cũng rất chuyên nghiệp và dễ sử dụng, tuy nhiên có khá vấn đề bất cập nếu bạn làm theo cách này bởi vì đầu tiên là bạn cần phải cài plugin JetPack, thứ hai là nó khó tuỳ biến nếu bạn có nhiều kiến thức về PHP, jQuery, HTML, CSS,….

Do vậy, mình sẽ cho bạn một giải pháp tạo form chuyên nghiệp hơn mà lại dễ dàng tuỳ biến, đó chính là dùng plugin chuyên tạo form hoàn toàn miễn phí mang tên Contact Form 7. Plugin này hiện tại được đánh giá là plugin tạo form có khả năng tuỳ biến vượt trội và nó có thể phục vụ được một số việc mà những plugin trả phí có khi không làm được. Mình sẽ hướng dẫn nhiều cách tuỳ biến với form này sau.

Cài đặt plugin Contact Form 7

Các bạn tiến hành cài plugin Contact Form 7 như thông thường và kích hoạt để sử dụng.

Hướng dẫn tạo form với Contact Form 7

Để tạo form, bạn vào mục Form -> Add New trên menu

Tạo form chuyên nghiệp miễn phí

Tại đây bạn có 2 tuỳ chọn tạo form. Một là tạo form với ngôn ngữ mặc định tương ứng với gói ngôn ngữ WordPress bạn đang dùng, hai là tạo form với gói ngôn ngữ tuỳ chọn mà 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:

Tạo form liên hệ trong WordPress

Okey, để ý bên tay trái là những field mặc định họ tạo sẵn. Bên phải bạn sẽ thấy nút Generate Tag, ở đây bạn sẽ chọn kiểu field mà plugin này hỗ trợ tạo. Hiện tại nó có một số field như sau mà mình sẽ giải thích kỹ ngay đây:

  • 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 1.
  • 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.

Quá nhiều lựa chọn phải không? Nhưng nhiêu đó chưa hết đâu, còn có thêm một số plugin hỗ trợ thêm nhiều loại field khác nữa mà mình sẽ đề cập ở một bài khác.

Để thêm một field bất kỳ, bạn ấn vào nút Generate Tag bên tay phải và chọn kiểu field cần tạo, khi ấn vào nó sẽ sổ ra bảng giá trị của field mà bạn có thể nhập (nếu hiểu) hoặc bỏ trống.

Tạo field cho form Contact Form 7

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

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

Bạn có thể thấy là mặc định họ cũng làm như thế, bởi vì làm như cách trên thì field của bạn sẽ có một cái tiêu đề nằm phía trênphía dưới là field để nhập. Nhưng mà, bạn cũng có thể chỉnh theo kiểu gì đó mà bạn thích.

Song song với lúc đó, bạn cũng cần copy field trong khung màu xanh lá cây bỏ vào khung Message body của khung Mail phía bên dưới. 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 đó.

Tạo form chuyên nghiệp với Contact Form 7

Copy shortcode khung màu xanh bỏ vào Message body của Mail

Sau khi chỉnh xong, nhớ ấn nút Save.

3. Chèn form vào Post/Page

Cách chèn cực kỳ đơn giản, chỉ cần copy shortcode trong khung màu nâu ngay bên dưới tiêu đề form.

Chèn form liên hệ vào post/page

Copy đoạn shortcode của form

Và copy vào nội dung của post/page.

Chèn form liên hệ vào post/page

Paste shortcode của form vào nội dung post/page

Và bạn sẽ có kết quả

Chèn form liên hệ vào WordPressRất tuyệt phải không nào. Hãy nhớ rằng bạn có thể sử dụng form này cho bất cứ việc gì mà bạn muốn.

Các câu hỏi liên quan

Thêm trang cảm ơn cho Contact Form 7

Nếu bạn muốn thêm một trang cảm ơn mà nó sẽ tự động chuyển khách tới sau khi gửi thông tin xong thì bạn có thể cài plugin Contact Form 7 – Success Page Redirects.

Không gửi được được email?

Nếu bạn không gửi được email qua form thì là do nhà cung cấp host của bạn đã chặn hàm gửi mail, vì vậy mình khuyến khích các bạn nên dùng các host tại trang 7 Shared Host tốt nhất cho WordPress vì mình chưa bao giờ gặp các lỗi này khi sử dụng các host đó.

Hoặc bạn có thể sử dụng SMTP để thiết lập server gửi mail riêng.

Nếu bạn dùng địa chỉ email dạng tên miền riêng mà không nhận được email thì xem bài này.

Không nhận được email?

Nếu bạn thấy form đã gửi email thành công mà bạn không thấy email trong inbox thì hãy kiểm tra mục Spam và đọc bài này để khắc phục.

Nếu bạn cần xem thêm bài hướng dẫn tuỳ biến Contact Form 7 của mình, hãy xem các bài viết tại tag Contact Form 7 của mình nhé. Đừng quên gửi comment đặt câu hỏi nếu bạn còn thắc mắc.

50 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
50 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
Đức Cù

Hi bác,
có cách nào lấy được ip của người gửi qua form không ạ.

Huu

Chào anh Thạch Phạm,
Em đang muốn làm một khung lấy thông tin khách hàng nằm ở góc dưới-trái và sử dụng contact form 7 thì có thể làm theo cách nào ạ?
Cảm ơn anh rất nhiều!

Nam

EM chào anh Thạch Phạm ! trước hết em rất cảm ơn anh đã có rất nhiều những chia sẻ, hướng dẫn quý báu trên mạng để các anh em khác có thể khắc phục được nhiều lỗi mà mình không biết. Về vấn đề em muốn hỏi rất mong anh có thể giải đáp giúp em: Em website của em đang chạy trên VPS của digitalocean, nhưng dạo gần đây thì gặp lỗi, khách không thể gửi thư trong phần liên hệ được do báo lỗi (Contact Form 7 em đã cấu hình rất kỹ), và các đơn hàng… Xem thêm »

Hiệp

Mình muốn tạo nút nhập lại gần nut gửi đi mình làm như thế nào vậy thạch phạm

Pham phu Luan

Bạn cho mình hỏi sau khi khách hàng điền thông tin và submit thì thông tin khách hàng được lưu vào đâu ?

trọng

cho mình hỏi làm sao để tạo được trang kí gửi nhà đất, căn hộ vậy?

Dat

anh thạch phạm ơi cho em hỏi tí ls để em chèn css kiểu kích cỡ của ô vào contract form 7 dc ạ

Thang

muốn tạo contact có 2 cột thì làm thế nào. vd First name và last name cùng nằm trên 1 hàng ; email và phone nằm trên 1 hàng

huongh

làm gì sử dụng được capchar đâu bạn ơi

Luc

Hello anh, bây giờ mình muốn thêm sdt vào thì làm như thế nào anh.

Anh Dũng

Xin hỏi Thạch Phạm là: tôi muốn kết nối hộp thư của contact 7 với phnầ thu thập email của getresponse được không? Nếu được thì làm sao? Xin cám ơn

trần hưng

cho em hỏi là, e muốn chèn 1 phần address vào form thì làm thế nào ạ

Gió Vô Tình

trường date trong form contact này làm sao để chon min date là ngày hôm nay vậy ạ?

Hoàng Nam

Mình thêm phần file vào trong mục gửi tin nhắn về nhưng chỉ được tên file thôi chứ không xem được file gì cả, có cách khắc phục không admin

Trần Hiếu

Hi anh, hiện tại em đang sử dụng mail tags [_remote_ip] để gửi IP người dùng vào email. nhưng khi em muốn gửi IP đó vào google sheet (như đang làm với các thông tin khác) thì hiện tại em không biết cách nào. Vậy có cách nào để gửi IP người dùng vào google sheet như các phần tên, ngày,…không anh?

duy

drop-down menu trong contact của e nó không hiện khi để trong popup, vậy phải làm sao để hiện anh.

xuân

Chào anh, cảm ơn anh bài viết rất chi tiết, mình đã cài đặt thành công cho website của mình nhưng khi mình test thử, tự gửi emaip từ form của bài viết thì không nhận được mail mặc dù trên bài viết báo đã gửi thành công! nhờ anh hô trợ giúp, cảm ơn anh!

Linh

Chào anh, cho em hỏi có cách nào để tạo các kết nối tới DB và cập nhật lại form qua ajax được không ạ? VD em có 2 selection, chọn cái 1 xong thì sẽ phải query để có danh sách cái 2.
Về DB, HTML, JS em đều biết, nhưng mới sử dụng wordpress nên chưa rõ phải đọc gì và sửa gì.

Thong

có cách nào lấy danh sách mail của các thư đã gửi ko ah
kiểu như phần leads trong plugin rainmaker hay tính năng lấy mail trong email subscribers plugin

son

Cho mình hỏi cái contac from 7 của mình muốn cho nó Redirects về một trang thông báo nhưng phiên bản mình ko tương thích với cái plugin này Contact Form 7 – Success Page Redirects thì giờ sài cái nào được vậy thạch phạm

Mr Hoàn

Mình mới tạo contact form 7 theo hướng dẫn mà test thử nó k hiện ra số liệu khách hàng, mình phải xử lí thế nào ! CÁM ƠN BẠN NHA, nó hiên thế này ạ

From: [your-name]
Subject: [your-subject]

Message Body:
[your-message]


This e-mail was sent from a contact form on chung cư cao cấp Hà Nội (http://chungcuhanoixanh.net)

Hoàng Hải

Chào anh, Em có cài plugin contact form 7. Nhưng nội dung liên hệ của em dài quá, em muốn nó thành 2 trang thì phải làm thế nào khi kích vào chữ tiếp theo của trang 1 sẽ sang trang 2 và khi ấn gửi thì vẫn gửi cả 2 trang cho admin? Cám ơn

Hoàng Hải

Chào anh, Em có cài trường fileupload lên nhưng lại không tải được cái file excel, word, pdf. Vì sao vậy ạ?

Duy

e cũng bị như thế này. Chèn file pdf nó ra text :v

Đồ nội thất gỗ tự nhiên

Bạn thạch phạm cho mình hỏi button đăng ký nhận thông báo của bạn là widget hay là gì. Bạn có thể gửi cho mình hoặc hướng dẫn mình làm 1 cái giống của bạn được không. Site mình là http://homeplan.vn

Cảm ơn bạn

Hữu Hoàng

Chào anh Thạch Phạm,
Vấn đề của em là chèn shortCode, ở page và post thì được còn ở tour (em dùng theme midWay)thì không gữi được ạ.
Em vừa chuyển tên miền cho web, ở web cũ thì vẫn hoạt động bình thường.
Mong anh chỉ giáo thêm, cảm ơn anh

Thương

Bên trái em để thông tin liên hệ, bên phải mình muốn thêm form để 2 cái song song nhau thì phải làm sao vậy anh ?

Hải

Anh ơi
Không dùng Plugin vó được không ạ?
Em thấy mấy người bảo là có thể cài trực tiếp vào theme luôn. Nhưng em khoing biết làm anh chỉ em được không ạ!

Phan Hue

Cho em hỏi chút, em đã tạo form từ Contact Form7 nhưng nếu em muốn upload nhiều file cùng một lúc thì phải làm như thế nào ạ.

Thiệp

Em gặp một vấn đề là e muốn người điền form thêm 1 file đính kèm nhưng gmail mà em nhận được chỉ là tên của file đó thôi mà không có nội dung file thì em phải làm thế nào đây ạ ? Mong anh trả lời

BangBD

2 form trên 1 trang nó không chạy thì phải?

Vinh

a cho em hỏi sao lúc sau em paste shortcode zô page mới nhưng nó vẫn chỉ hiện mã shortcode không vậy anh? Nó không hiện mấy cái khung như anh được

tuấn

Cho hỏi mình muốn khi gởi thu về thì gởi kèm địa chỉ ip người dùng thì phải làm thế nào, mình đã lấy được địa chỉ ip bằng code : // Display User IP in WordPress function get_the_user_ip() { if ( ! empty( $_SERVER[‘HTTP_CLIENT_IP’] ) ) { //check ip from share internet $ip = $_SERVER[‘HTTP_CLIENT_IP’]; } elseif ( ! empty( $_SERVER[‘HTTP_X_FORWARDED_FOR’] ) ) { //to check ip is pass from proxy $ip = $_SERVER[‘HTTP_X_FORWARDED_FOR’]; } else { $ip = $_SERVER[‘REMOTE_ADDR’]; } return apply_filters( ‘wpb_get_ip’, $ip ); } add_shortcode(‘show_ip’, ‘get_the_user_ip’); nhưng là sao để chèn vào contac form 7 thì… Xem thêm »

Nam

A thạch cho e hỏi. Form đk của e gồm 2 trường nhập liệu là họ tên và email. Nếu e muốn 2 trường này và nút Gửi trên cùng 1 hàng thì tuỳ biến thế nào. E cảm ơn A.

Đoàn Việt Dũng

Hi Thạch Phạm,

Mình đã cấu hình contact form7 theo các hướng dẫn search được. Các error đã được mình fix hết. test thử gửi tin nhắn thì hệ thống báo đã gửi tin nhắn thành công mà kiểm tra hòm thư mình cấu hình thì không thấy tin nhắn đó đâu. Xem giúp mình với Thạch Phạm ơi

Đoàn Việt Dũng

tớ fix dc rồi.

tran

anh Thạch ơi, em làm form bên contact form 7, nhưng sao nó ko hiện lên nút ” send” ạ, em đã gỡ cài đặt và làm lại, nhưng nó vẫn ko hiện lên

Hoàng

Hay quá, giá như nó quản lý được thông tin người đặt hàng thì tốt quá

Bao Le

Có cách nào cho nó hiện trong wp-admin Bảng quản trị không ThachPham oiiii

Filial

Chào bạn, khi khách gửi form đặt hàng chẳng hạn, thông tin đó sẽ gửi về đâu

50
0
Would love your thoughts, please comment.x
()
x