Hướng dẫn tạo form liên hệ trong WordPress với contact form 7

Trong bài viết này mình sẽ hướng dẫn sử dụng contact form 7 và  tạo form liên hệ tương tác với khách hàng toàn tập giúp bạn có thể tùy biến contact form 7 và sử dụng popup cho contact form cũng như sửa các lỗi không gửi được mail từ contact form 7. là hoàn thành cần thiết của bất kỳ thể loại website nào.

Ưu điểm plugin contact form 7

  • Plugin hỗ trợ tạo form chuyên nghiệp hoàn toàn miễn phí dễ sử dụng
  • Giao diện sử dụng thân thiện hỗ trợ đa ngôn ngữ với công nghệ ajax và có thể tích hợp với capcha giúp chống thư rác.
  • Hỗ trợ tạo tạo field(ô text) trực quan
  • ….

Trước khi có thể tạo form thì một việc không thể bỏ qua là cài đặt plugin contact form 7.Việc cài đặt plugin cũng khá đơn giản ,sau đây trong lúc mình thiết kế web bằng WordPress cho khách hàng,mình sẽ hướng dẫn cài  đặt plugin contact  form 7 luôn.

Hướng dẫn cài đặt plugin contact form 7

Để cài đặt plugin rất đơn giản bạn cũng làm tương tư như việc cài đặt các plugin khác,bạn truy cập vào Gói mở rộng ->Cài mới:

Hướng dần cài plugin WordPress

Sau đó màn hình hiển thị các plugin của WordPress hiển thị bạn gõ tên plugin contact form 7 vào như sau:


Tiếp theo bạn chọn “Cài đặt “.Chờ 1 chút để WordPress tải plugin về thư mục web của bạn ,Sau đó bạn chọn kích hoạt plugin như hình

 

Kích hoạt plugin contact form 7

Kích hoạt plugin contact form 7

 

Hướng dẫn tạo form liên hệ trong WordPress với contact form 7

  • Bước 1. Vào Giao diện Dashboard, chọn Contact Forms | Add new

Sau khi ấn nút Add New, sẽ xuất hiện của sổ yêu cầu bạn đặt tên cho form Liên hệ của mình, khung điền tên này nằm dưới cụm chữ Add New Contact Form, có rất nhiều trường như bạn đã thấy gồm Text, Email, URL, Tel, Number, drop-down menu, checkboxes, radio buttons, acceptance, quiz, reCAPTCHA, File, Submit…. Mình sẽ giải thích từng ý nghĩa từng trường.

 

Ý nghĩa của từng trường trong contact form 7

  • Text: dùng để nhập văn bản ký tự thông thường, sử dụng theo nhu cầu tạo các khung Tên, Tiêu đề, Nội dung

  • Email: Trường này dùng để khách nhập email của khách hàng muốn liên lạc, 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 địa chỉ đường dẫn liên kết.
  • Tel (Telephone Number): Trường để khách hàng nhập số điện thoại để nhân viên có thể liên lạc khách hàng.
  • 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 hiện thời.
  • Text area: Trường để nhập văn bản, nhưng khung văn bả to hơn. Thích hợp để làm form nhập nội dung những vấn đề liên hệ.
  • Dropdown menu: Trường chọn giá trị được định sẵn thông qua menu theo kiểu đổ xuống.
  • Checkboxes: Trường chọn giá trị định sẵn thông qua việc đánh dấu vào ô.
  • 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 tin nhắn.

 

Khi các bạn tạo một contact form mới, Contact form 7 mặc định cho bạn sẵn một form như hình bên dưới, được tích hợp sẵn các tex gồm Your Name (required) | Your Email(required) | Subject | Your message | [Submit “Send”]. Thiếu trường Điện thoại để khách hàng để lại số điện thoại cho đơn vị của bạn có thông tin để liên lạc lại với họ. Phía dưới hình, mình tiếp tục hướng dẫn các bạn cách thêm trường Điện thoại (Phone number) vào khung Liên hệ này, bạn có thể thêm tương tự bất kỳ trường nào bạn muốn sau khi nắm rõ cách làm.

Hướng dẫn cách thêm trường Điện thoại (Phone number) vào khung Liên hệ.

Đầu tiên chúng ta cần Thêm <label> Điện thoại vào bên dưới  <label> Họ và Tên trước

Bước 1. Chọn text

Sau khi chọn text, sẽ xuất hiện khung Form-tag Generator: text

Để thêm một Field bất kỳ bạn chọn phần Text (Form-Tag Generator: Text), bạn chỉ cần nhập một số giá trị cần thiết, còn lại bỏ trống. Như hình ví dụ bên dưới, bạn cần điền đầy đủ vào Ô name cụm từ Phone Number  sau khi bạn đặt tên trường là Phone number thì xuất hiện shortcode bên dưới là [text* Phonenumber ] .

Sau đó,  bạn copy shortcode [text* Phonenumber] bỏ vào khung nội dung bảng đăng ký form Liên hệ.

 

Kết thúc thao tác này, bạn di chuyển đến trường Mail.

Nếu bạn không copy shortcode [text* Phonenumber]  này vào phần Message Body thì bạn sẽ không thấy nội dung “Phone number” mà bạn vừa tạo trên. Bạn sẽ làm thao tác điền thông tin như hình bên dưới. Điểm cần phải lưu ý phần To: các bạn sẽ điền email mà các bạn muốn nhận các dữ liệu mà khách hàng đăng ký form liên hệ.

Sau khi bỏ shortcode vào Message body( nội dung) bảng đăng ký form liên hệ, bạn save lại để lưu

Cấu hình thông báo khi gửi mail trong contact form 7

Ngoài việc tạo form liên hệ theo mong muốn của chình mình, thì điểm mấu chốt quan trọng còn lại là làm thế nào người đăng ký form Liên hệ biết rằng Lời nhắn của họ có đến tận công ty đó không hay lời nhắn của họ gửi thất bại.

Mặc định trong form contact form 7 bạn được quyền thay đổi thông báo khi bạn cấu hình gửi mail thành công hay thất bại. Vậy muốn thay đổi nó thì bạn làm như thế nào ? Rất đơn giản, để chỉnh sửa phần này , bạn chỉ việc vào phần message của contact form 7 và thay đổi nội dung mà bạn muốn, ví dụ như mình chọn thông điệp

  • Tin nhắn của người gửi đã gửi thành công – > Thank you for your message. It has been sent
  • Tin nhắn của người gửi đã gửi thất baifk -> There was an error trying to send your message. Please try again later

Bước cuối cùng bạn nhớ save lại

 

Hướng dẫn cách Chèn shortcode form vào Post/Page trong wordpress

Bước 1. Tạo Trang mới với tên Trang Liên hệ

Nếu bạn quên hoặc chưa biết cách tạo trang Liên hệ trong wordpress bạn có thể tham khảo bài viết này tại đây Tài liệu Hướng dẫn Quản trị Website WordPress

Bước 2. Copy shortcode khung màu xanh bên dưới  :

Bước 3. Dán shortcode này vào phần nội dung của Trang Liên hệ như hình bên dưới và chọn cập nhật

 

Vây là các bạn đã tạo xong Form Liên hệ, bạn có thể tạo bất cứ nội dung gì mà mình muốn.

Hướng dẫn Thiết lập SMTP của Gmail cho WordPress

Cài Plugin WP mail STMP

Sau khi hoàn tất tạo form đăng ký liên hệ với Contact form 7, đối với bạn nào sử dụng email Gmail nhận thông tin khách hàng qua form Đăng ký thì các bạn phải thiết lập SMTP của Gmail cho wordpress.

Đừng quên việc đầu tiên là các bạn cần phải cài Plugin WP mail STMP

Bước 1. Vào Gói mở rộng -> Cài mới

Bước 2. Đánh vào khung từ khóa “Wp mail STMP” chọn Cài đặt ngay bây giờ (theo mũi tên màu đỏ). Sau khi cài đặt bạn chọn kích hoạt để sử dụng

thiết lập SMTP của Gmail cho wordpress

thiết lập SMTP của Gmail cho wordpress

Thiết lập SMTP của Gmail cho WordPress

Bạn cần Bật chức năng mật khẩu hai lớp (2-Step Verification) cho tài khoản Gmail của bạn nếu bạn chưa bật, bạn cần đăng nhập vào đường link sau https://myaccount.google.com để thực hiện yêu cầu Bật chức năng mật khẩu hai lớp

Bước 1. Tại https://myaccount.google.com, làm theo mũi tên hướng dẫn màu xanh, bạn chọn Signing in to Google (Đăng nhập vào Google)

Bước 2. Chọn theo mũi tên màu xanh vào biểu tượng cây bút, chọn Xác minh 2 bước để bật chức năng bảo mật hai lớp (2-Step Verification)

Bước 3. Sau khi cung cấp số điện thoại có hoạt động thì Google sẽ gửi một tin nhắn văn bản có Mã xác minh tới điện thoại bạn, bạn ấn nút BẬT

Bước 4. Sau khi ấn nút Bật xong, bạn vào lại phần Signing in to Google như ở trên và chọn theo mũi tên màu đỏ bên dưới APP PASSWORD – Mật khẩu ứng dụng 

Google tiếp tục gửi mã code xác nhận đến số điện thoại của bạn một lần nữa, bạn điền vào, và chọn các phần tử như hình bên dưới . Đầu tiên chọn Mail, tiếp chọn Windows Computer  và cuối cùng ấn vào Generate.

Sau đó Google sẽ cho bạn một dãy ký tự gồm 16 chữ số, hãy bôi đen và copy toàn bộ nó, đây chính là mật khẩu SMTP của bạn (your app password for Windows Computer).

 

Thiết lặp cài đặt email trong wordpress.

Bạn cần quay ngược trở lại Dashboard, di chuyển con chuột vào phần Cài đặt | Email và điền những giá trị như bản bên dưới

 

 

Những điểm khách hàng cần lưu ý

  • Chọn phương thức bảo mật là SSL (click chọn Use SSL Encryption)
  • Port là 465 (SMTP port)
  • SMTP Host điền vào là smtp.gmail.com
  • Username phải là địa chỉ email của bạn thuộc tài khoản đã lấy App Password
  • Password chính là App Password của bạn vừa lấy ở trên trong phần xác minh 2 bước (2-Step Verification)

Nếu chọn port là 465 với SSL không được thì bạn hãy chọn SMTP 587 với TLS.

Sau đó chọn Lưu thay đổi.

Bây giờ ta sử dụng chức năng test phía dưới để gửi một email đến một địa chỉ uyenwendy@gmail.com, như bạn thấy hình bên dưới The result was: bool (true) là nó đã gửi được thành công

Có thể bạn quan tâm:

Những plugin hay kết hợp cho contact form 7

1.Contact Form 7 Style 

Nếu như bạn không biết ngôn ngữ css và định dạng form như thế nào cho đẹp thì đây là plugin thích hợp mà bạn không thể bỏ qua.Bạn có thể định dạng màu sắc,font chữ cho form mà không cần đụng tới bất kỳ dòng code nào.Plugin tích hợp sẵn nhiều mẫu template đẹp cho form để bạn lựa chọn hiện thị ra ngoài.

2.Contact Form 7 Skins

Tương tự như plugin tuy nhiên plugin nhiều form và option cũng như template để bạn lựa chọn hơn.Ngoài ra plugin còn tích hợp responsive trên giao diện mobile và lựa chọn template cho từng form trên website.Bạn xem chi tiết về tính năng và các template có sẵn của plugin tại đây https://vi.wordpress.org/plugins/contact-form-7-skins/

3.Tích hợp Esms vào WordPress với contact form 7

Là plugin do developer Lê Văn Toàn phát triển Plugin giúp bạn  Tích hợp Esms api  vào website WordPress sử dụng với Contact Form 7, NinjaForms và Woocommerce. Khi khách hàng hay độc giả của bạn gửi form hay biểu mẫu  thông tin vào trong form  (hoặc Ninja Forms) và nhập thông tin yêu cầu nếu hệ thống submit thành công,sẽ kêt nối với api sms và hệ thống sẽ gửi 1 tin nhắn tới người gửi form xác nhận. Với nội dung mà bạn thiết lập sẵn trong quản trị.

plugin này được bán với giá 300.000 bạn xem chi tiết tại :http://levantoan.com/san-pham/tich-hop-esms-vao-wordpress-va-contact-form-7/

Có thể bạn quan tâm:

WEBTHANGLONG – GIẢI PHÁP CÔNG NGHỆ TỐI ƯU |THIẾT KẾ WEBSITE | ĐỒNG HÀNH CÙNG BẠN

Địa chỉ: 24, Lê Văn Lương, Phước Kiển, Nhà Bè, TP.HCM
Hotline: 0932.644.183 – 0907988855
Email: sonweb.net@gmail.com, nhavietn@gmail.com
Website: https://webthanglong.com
Facebook: https://www.facebook.com/WebThangLong/

 

Hướng dẫn tạo form liên hệ trong WordPress với contact form 7
5 (100%) 1 vote

VỀ CHÚNG TÔI

WEBTHANGLONG là công ty về dịch vụ thiết kế website chuyên nghiệp chuẩn seo trên nền tảng WordPress,Laravel kết hợp với các ngôn ngữ HTLM5, CS3, PHP, Bootstrap,...Ngoài ra tại WebThangLong chúng tôi còn mang tới các giải pháp dịch vụ về Internet Marketing...

Báo giá Website

Liên hệ với WEBTHANGLONG để nhận báo giá cho dự án website của bạn với mức giá tốt nhật..