Cấu hình Contact Form 7 tạo form liên hệ khách hàng

Cấu hình Contact Form 7 tạo form liên hệ với khách hàng

Bạn đang tìm cách cấu hình contact Form 7 (CF7) là plugin tạo form liên hệ phổ biến được dùng cho website WordPress, plugin Contact Form 7 gần như là đơn giản và dễ sử dụng nhất để làm form liên hệ giữa khách hàng với chủ website, của hàng hay công ty.

Tải Plugin Contact Form 7

Plugin Contact Form 7 là một plugin tạo form miễn phí hỗ trợ cho các website WordPress mà bạn dễ dàng chèn vào bất kỳ vị trí nào bạn muốn, tải Plugin Contact Form 7 và cài đặt trực tiếp trong quản trị website hoặc tải contact form 7 về cài đặt thủ công từ trang web wordpress.org/plugins/contact-form-7.

Tạo form liên hệ khách hàng với Plugin Contact Form 7

Sau khi bạn cài đặt xong Plugin Contact Form 7 và nhớ Active plugin nha, rồi bắt đầu cấu hình plugin contact form 7 (CF7) thôi.

Trước tiên bạn sẽ cần tạo một form liên hệ mới toanh, nói chung là đừng quan tâm cái form mẫu, bạn cứ tạo form mới theo ý của bạn, để tạo form mới thì bạn vào Form liên hệ–Tạo form mới. Bạn cũng có thể vào sửa form mẫu tùy bạn thôi nha.

Ở bài này mình chỉ nói đến 3 Tab cần cấu hình thôi, còn các tab khác bạn không cần phải quan tâm làm gì.

Tạo tiêu đề Form: bạn cần tạo tiêu đề Form muốn tạo thôi. Ví dụ Form liên hệ , form đăng ký…

• Tab 1: Nội dung Form
• Tab 2: Cấu hình Mail
• Tab 3: Thông báo và Chú ý

1.Tab Nội dung form

Mình sẽ giới thiệu ý nghĩa các nội dung mà bạn sẽ sử dụng tạo form bằng CF7 ( Contact Form 7 ) như sau:

Các nội dung bạn sẽ dùng được tích hợp sẵn trong CF7 gồm có:

• Văn bản ngắn: là ô điền nội dung ngắn, có thế dùng để khách hàng nhập nội dung liên hệ, Email, số điện thoại hoặc bất kỳ nội dung gì mà khách thích.
• Văn bản dài: là ô điền nội dung dài dòng hơn.
• Email: là ô điền địa chỉ email của khách. Bạn có thể để mục này là bắt buộc hoặc không.
• Số điện thoại: là ô điền số điện thoại, bạn có thể để mục này là bắt buộc hoặc không ( lưu ý bạn có thể thay thế trường nội dung số điện thoại này bằng trường văn bản ngắn ở trên cũng được)
• Ngày: là ô có định dạng ngày tháng năm. Bạn có thể dùng để khách đặt lịch hẹn.
• Menu danh sách: là ô menu sẽ hiện ra một danh sách, khách chỉ được chọn 1 giá trị.
• Tuỳ chọn checkbox: là ô để khách tùy chọn, khách được tích chọn nhiều giá trị.
• Tuỳ chọn radio: là trường ngược với tùy chọn checkbox, khách chỉ được chọn 1 giá trị.
• Gửi: là nút để khách bấm gửi các nội dung đã nhập trong form liên hệ..
• URL: là ô điền một liên kết website. Thích hợp cho form tư vấn website, hoặc form yêu cầu thông tin mạng xã hội.
• Số: là ô chỉ cho khách điền số, bạn có thể tạo để khách điền số lượng đặt hàng.
• Điều khoản chấp nhận: trường nội dung kiểu cho khách chấp nhận điều khoản nào đó trước khi tiếp tục.
• Câu hỏi: Kiểu trường nội dung đặt câu hỏi và trả lời.
• File: là trường chức năng để tải lên một file dính kèm.

Thông thường một form liên hệ chỉ cần các trường nội dung sau là được:

• Tên
• Email
• Số điện thoại
• Văn bản ngắn dùng làm tiêu đề nội dung liên hệ
• Văn bản dài để khách điền nội dung liên hệ
• Gửi

Để ra một form liên hệ như trên thì bạn sẽ tạo trường nội dung form như sau:

<label> Họ Tên

    [text* your-name autocomplete:name placeholder “Họ tên của bạn”] </label>

<label> Email

    [email* your-email autocomplete:email placeholder “Email của bạn”] </label>

<label> Điện Thoại

    [tel* inThoi placeholder “Điện thoại của bạn”] </label>

<label> Tiêu đề:

    [text* your-subject] </label>

<label> Nội Dung (không bắt buộc)

    [textarea your-message] </label>

[submit “Gửi đi”]

Bạn có thể copy đoạn code trên và dán vào Tab Nội dung form của bạn. Hoặc bạn tự tạo các trường nội dung theo ý bạn bằng cách chọn trường nội dung bạn muốn, một số mục cần chú ý khi tạo trường nội dung như sau:

• Kiểu: bạn check vào ô nếu muốn đánh dấu là trường nội dung bắt buộc khách phải nhập hoặc thực hiện (bạn sẽ thấy cái dấu * ).
• Tên: chỗ này bạn viết liền không dấu để nhận biết đây là trường nội dung nào. Như ví dụ của mình là tạo mục nhập điện thoại, nên mình ghi chú là “dienthoai”.
• Giá trị mặc định: chỗ này bạn điền nội dung cho ô nhập, nó sẽ hiện trong khung nhập của khách nhằm gợi ý cho khách điền đúng nội dung. Nếu bạn không chọn ” sử dụng dòng này làm chữ chìm …” thì nội dung ghi chú của bạn sẽ hiện ra như gợi ý nhập sẵn, bạn nên chọn chìm để form dễ nhìn hơn.
• Thuộc tính ID: không cần nhập gì cũng được
• Thuộc tính Class: không cần nhập gì cũng được

Đặt nội dung xong thì bạn bấm ” chèn vào form” và lưu lại để hoàn tất tab nội dung form nha.

2. Cấu hình Mail plugin contact form 7

Phần này quan trọng, bạn cần chú ý để có thể nhận được thông báo trả về mail khi có khách nhập liên hệ.

Bạn để ý cái khung có các nội dung [your-name] [your-email] [your-subject] [your-messge] là tên các trường nội dung bạn đã tạo, bạn sẽ dùng nó để cấu hình tab mail này.

• Mail nhận: điền các email sẽ nhận thông báo khi khách điền form thành công, cách nhau bởi dấu phẩy
• Mail gửi: Bạn có thể sửa cái site title thành một cái tên bạn muốn, nhưng cái ” <wordpress@tenmien> bạn để nguyên nhé.
• Tiêu đề: bạn có thể sửa tùy ý. Ví dụ: ” Liên hệ từ khách trang web … “
• Additional headers: để nguyên hoặc thêm Cc theo cấu trúc Cc: email1,email2,email3.
• Message body: chỗ này bạn có thể xóa sạch và thêm nội dung bạn muốn nhận. Ví dụ Gửi đến từ: thêm trường nội dung tên ( như hình là [your-name] ) thì khi nhận được Mail thì dòng đó sẽ hiện ” Gửi đến từ: họ tên khách hàng đã nhập “. Tương tư bạn có thể tùy biến nội dung nhận ở đây bằng cách sử dụng các trường nội dung mà bạn đã tạo.

Nhớ bấm Lưu cấu hình.

Như vậy là bạn đã cấu hình xong Mail contact form 7, nhưng để nhận được mail từ form liên hệ thì bạn còn phải cài đặt SMTP để gửi Mail nữa nha. Mình sẽ hướng dẫn tại bài ” Cấu hình SMTP cho Plugin Contact Form 7 có thể gửi nhận Mail ”

3. Tab thông báo và chú ý

Ở tab này thì Plugin contact form 7 đã cài đặt sẵn nội dung cho bạn, nhưng bạn không thích câu từ mặc định thì có thể thay đổi tùy ý theo nội dung của bạn, sau đó bấm lưu lại là xong phần cấu hình Plugin Contact Form 7 rồi nha.

Chèn Form liên hệ Contact Form 7 vào website

Bạn muốn hiện form liên hệ mà bạn vừa tạo trên trang web của bạn thì bạn cần dán đoạn code cảu contact form 7 vào vị trí bạn muốn.

• Bạn vào phần Form liên hệ > Danh sách form và sao chép Shortcode của form bạn vừa tạo.
• Dán Shortcode vừa copy vào như văn bản bình thường, cập nhật trang và xem kết quả.

Xem: Cấu hình SMTP cho Plugin Contact Form 7 có thể gửi nhận Mail để có thể nhận được mail khi khách điền form liên hệ nhé.