Tạo form liên hệ WordPress đơn giản với Contact Form 7

Tạo Form liên hệ WordPress cho phép người dùng gửi thông tin nội dung đến Web Master là vấn đề khá quan trọng giúp tăng độ tương tác giữa Website và các Thành viên. để giải quyết vấn đề này, Bạn có thể sử dụng khá nhiều Plugin như : Contact Form 7, Jetpack’s, Ninja Forms, Fast Secure, ContactBuddy. Riêng về cá nhân, sau khi sử dụng nhiều loại Plugin khác nhau, mình đã chọn Contact Form 7 bởi độ chuyên nghiệp, phổ biến và linh hoạt của nó.
Demo :

Để tạo form liên hệ WordPress đơn giản với Contact Form 7 các bạn có thể tải ở link này : Contact Form 7 hoặc vào phần Plugin trong DashBoard tìm với từ khóa Contact Form 7 và cài đặt nó.

• Sau khi cài đặt bạn sẽ có phần quản trị Contact như trên
• chọn Tùy Chỉnh

Trong phần cài đặt các bạn sẽ thấy có 4 Tab chính :
– Biểu mẫu :

Đây là phần cho phép bạn tạo form theo ý của mình, các trường mà Contact Form 7 hỗ trợ hoàn toàn đầy đủ cho bạn sử dụng:

• Text : Trường nhập nội dung text thường như họ tên, địa chỉ…
• Email : Trường nhập địa chỉ Email
• URL : Trường nhập địa chỉ url Website
• Tel: Trường nhập số điện thoại
• Number : trường chỉ nhập số
• Date: trường ngày tháng
• Text area: Trường ô soạn thảo nâng cao (cho phép bạn sử dụng code đơn giản của html)
• Drop-down menu: Trường chọn giá trị theo kiểu sổ dọc.
• Checkboxes: Trường chọn giá trị dạng check ô (có thể chọn nhiều giá trị)
• Radio buttons: Trường chọn giá trị (Chỉ được chọn 1)
• Acceptance : Trường tạo ô tích chấp thuận (điều khoản, nội quy)
• reCAPTCHA : Trường nhập Captcha (tránh tình trạng spam)
• File : Trường upload File
• Submit : Nút bấm Submit (Đăng lên, Gửi đi)

Ví dụ : Bạn muốn tạo 1 trường Họ tên : bạn hãy  ấn vào nút Text bên trên

• Field type :  Required field : Tick vào ô này nếu bạn muốn người dùng phải nhập giá trị vào ô này.
• Tên: Chính là tên của trường (Lưu ý đặt không dấu và không khoảng trắng nhé)
• Giá trị mặc định : Giá trị mặc định của trường nhập vào.
• Akismet : Chọn kiểm tra tên người gửi
• Id attribute : Id html của trường (nếu bạn không biết về code html có thể bỏ qua phần này)
• Class attribute : Class html của trường nhập (nếu bạn không biết về code html có thể bỏ qua phần này)

Sau khi nhập các phần trong bảng trên các bạn chọn vào Insert Tag , nó sẽ tự chèn đoạn code cần hiển thị Trường vào form của bạn:

<label>Tên trường của bạn</label>
[Đoạn Shortcode vừa tạo]

Với cách tạo trường như bên trên: mình đã tự tạo Form như thế này (các bạn có thể copy về và sửa như ý của các bạn):

<div class="form-group">
	<label class="your_name" for="your_name">Họ tên</label>
    [/text* Your_Name class:form-control]
</div>
<div class="form-group">
	<label class="your_address" for="your_address">Địa chỉ</label>
    [/text Your_Address class:form-control]
</div>
<div class="form-group">
	<label class="email" for="email">Email</label>
	[/email* Your_Email class:form-control]
</div>
 <div class="form-group">
	<label for="comment">Comment:</label>
	[/textarea* Your_Content class:form-control]
</div>
[/submit class:btn class:btn-primary "Gửi"]

Lưu ý : bỏ dấu / trong [/ shortcode] đi các bạn nhé, vì khi copy vào bài viết Shortcode sẽ trở thành giá trị.

Sau khi đã tạo thành công Biểu mẫu Bạn Lưu lại, sau đó copy Đoạn Shortcode bên trên và Paste vào bài Liên hệ:

Mở trang Liên hệ và Xem thử Kết quả :

– Thiết lập mail:  thiết lập Email người nhận

Bạn có thể thay Email người nhận, các trường còn lại bạn có thể giữ nguyên

• To: Email người nhận
• From: [your-name] Tên Người gửi
• Tiêu đề: [your-subject] Tiêu đề của form
• Additional Headers: Trả lời tới : [your-email]
• Message Body: Nội dung
• Thiết lập mail (2): thiết lập thêm 1 Email nhận nội dung

– Các thông báo cho người gửi biểu mẫu: Nội dung thông báo Sau Khi khách Gửi liên hệ :

Phần này chính là thiết lập thông báo khi khách hàng gửi liên hệ. Các Bạn có thể việt hóa lại nó nếu muốn vì mặc định nó đang là tiếng anh.

– Cấu hình khác:

Trong phần này các bạn có thể nhập thêm các cấu hình hỗ trợ thêm cho Contact Form 7.
Ví dụ :
– Cấu hình khi gửi thầnh công sẽ có 1 thông báo : on_sent_ok: "alert('sent ok');"
– Cấu hình khi bấm nút gửi sẽ hiện lên dòng thông báo Gửi đi on_submit: "alert('Gửi đi');"


Chúc các bạn thành công!