Tạo form liên hệ bằng plugin Contact form 7 trên WordPress

Trong bài viết này, RealDev sẽ hướng dẫn bạn tạo form liên hệ WordPress bằng plugin Contact form 7, một plugin khá nổi tiếng và được sử dụng rất nhiều.

Tạo form liên hệ bằng plugin Contact form 7 trên WordPress khi một website luôn cần phải có kết nối với người dùng, đó là mục đích chính của việc tạo website. Một cách dễ dàng nhất để người dùng có thể kết nối với chủ website đó chính là sử dụng trang liên hệ. Một trang liên hệ cần có thông tin chủ sở hữu website như là Địa chỉ, Số điện thoại, Email, … và một form liên hệ để khách hàng có thể gởi yêu cầu, hay thắc mắc.

Trong bài viết này, RealDev sẽ hướng dẫn bạn tạo form liên hệ WordPress bằng plugin Contact form 7, một plugin khá nổi tiếng và được sử dụng rất nhiều.

Tạo form liên hệ WordPress bằng plugin Contact form 7

Đầu tiên, chúng ta cần cài plugin Contact Form 7 từ trang quản trị plugin WordPress.

Contact form 7

Sau khi cài đặt và kích hoạt plugin, một menu Form liên hệ sẽ xuất hiện, bạn nhấp vào menu này, vào nhấn nút Tạo form mới ở trên cùng.

Contact form 7

Đặt tên cho form này là Liên hệ, bên dưới Nội dung Form sẽ có sẵn một số mục như là Tên, Email,… Mỗi mục sẽ được đặt trong cặp thẻ <label> Tên label …</label>. Để thêm một mục, ta chỉ cần copy cặp thẻ Label và đổi tên label, sau đó nhấn vào một mục cần thêm vào ở bên trên.

Contact form 7

Chẳng hạn ở đây mình thêm mục Số điện thoại vào form. Mình cần tuỳ chỉnh 1 số thành phần như: Tick chọn Mục bắt buộc người dùng sẽ phải nhập vào ô này. Tên cho mục này, cũng là id cần viết liền nhau. Giá trị mặc định, và tick chọn Sử dụng dòng này làm chữ chìm trong mẫu nhập (placeholder) thì giá trị này sẽ nằm vào trong ô nhập. Cuối cùng bạn nhấn nút Chèn vào form bên dưới.

Contact form 7

Mục số điện thoại đã được thêm vào form, bạn có thể thêm placehoder “…” vào các mục khác để đặt dòng chữ chìm cho ô nhập đó. Lưu ý phải có mục [submit] để nó hiện nút gởi.

Contact form 7

Sau đó bạn qua tab Cấu hình mail để khi người dùng nhập vào form liên hệ và gởi đi thì nội dung sẽ được gởi vào email quản trị viên webstie. Bạn có thể sử dụng id của các mục tạo trong form để đưa vào nội dung email. Xong rồi thì nhấn nút Lưu.

Contact form 7

Ở phía trên có một đoạn shortcode của form vừa tạo (nằm trong ô nền xanh), bạn copy shortcode này.

Contact form 7

Sau đó vào tạo một trang mới và đặt tên là Liên hệ. Ở phần nội dung ta có thể thêm Địa chỉ, Số điện thoại người quản lý để khách hàng liên hệ, sau đó dán doạn shortcode của plugin form vào và Đăng trang.

Contact form 7

Bây giờ xem trang Liên hệ vừa tạo ngoài website, điền thử nội dung vào form và gửi đi nhé.

Contact form 7

Nếu nội dung điền chính xác, form được gởi thành công thì ngay lập tức người quản trị sẽ nhận được email thông báo có khách liên hệ kèm nội dung. Lưu ý nếu muốn email vào inbox thì phải cài đặt SMTP cho WordPress nhé!

Contact form 7

Kết luận

Trên đây là cách tạo một trang liên hệ kèm form điền thông tin trong WordPress. Có một số plugin WordPress cho form liên hệ khác bạn có thể sử dụng như là WpForm, nhưng theo mình thấy thì CF7 là dễ dùng nhất và nó hoàn toàn miễn phí. Thậm chí bạn có thể tuỳ biến nó thành nhiều kiểu form đẹp mắt với CSS. Mình sẽ hướng dẫn trong những bài viết sau nhé. Chúc bạn thành công!

4.9/5 - (8 Yêu thích)
Loco-translate-plugin Dịch Website dễ dàng với Loco Translate WordPress PluginDat-yeu-cau-so-tu-toi-thieu-trong-bai-dang Đặt số lượng từ tối thiểu cho các bài đăng WordPress set minimum number of wordsDuplicator-pro-tenten Di chuyển trang website với Duplicator WordPress Migration PluginCustomer-reviews-for-woocommerce Thêm chức năng đánh giá sản phẩm Woocommerce add Reviews for ProductsBạn đang xem: Tạo form liên hệ bằng plugin Contact form 7 trên WordPressThêm lượt xem bài viết vào WordPress Post Views Counter 27b9mafThiết lập chế độ Bảo trì bằng plugin SeedProd WordPress Create Coming Soon Page Seedprod_06Thiết lập SMTP để gửi Email trên WordPress Image-4-1
Trả lời

Click vào Comment nhanh ở dưới để chia sẻ suy nghĩ của Bạn.

Hướng dẫn rất chi tiết và dễ hiểu.Tôi đã làm theo hướng dẫn này thành công.Cảm ơn bạn đã chia sẻ kinh nghiệm.Tutorial rất hữu ích.Tôi đã áp dụng hướng dẫn này vào công việc của mình.Chất lượng hướng dẫn thực sự tốt.Hướng dẫn giúp tôi giải quyết vấn đề một cách hiệu quả.Cảm ơn bạn vì đã chia sẻ hướng dẫn này.Tutorial giúp tôi tiết kiệm rất nhiều thời gian.Tôi đã tìm thấy giải pháp từ hướng dẫn này.Chia sẻ hướng dẫn thực sự có giá trị.Tôi rất hài lòng với chất lượng của hướng dẫn.Tutorial thực sự hữu ích cho công việc của tôi.Cảm ơn bạn đã giúp tôi hiểu rõ hơn về vấn đề này.Hướng dẫn đưa ra giải pháp thực sự tốt.

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đã Copy vào Bộ nhớ tạm