Hướng dẫn tạo form chuyên nghiệp với Contact Form 7

Đây là bài viết http://thietkewebchat.com chia sẽ đối với các bạn nào đã sở hữu website wordpress muốn tạo một form Liên Hệ cho khách hàng mình khi viếng thăm website có thể để lại thông tin của họ và nội dung họ cần các bạn cung cấp. Có rất nhiều plugin Liên hệ miễn phí nhưng chúng tôi giới thiệu bạn một plugin có tên là CONTACT FORM 7 có hình thức chuyên nghiệp hơn, plugin này hiện tại được đánh giá là plugin tạo form có thể đáp ứng được những yêu cầu của người sử dụng mà một số plugin trả phí khác có khi làm không được.

Như hình bên dưới, các bạn thấy Số lượng cài đặt: 1+triệu và mức đánh giá 4,5/5 sao, và nhiều lần chúng tôi cài plugin này cho những khách hàng sử dụng dịch vụ thiết kế website wordpress tại WebThangLong , có phản hồi rất tích cực, đơn giản, không những dễ dàng sử dụng mà còn mang lại hiệu quả cao. Bài viết này sẽ hướng dẫn chi tiết, sau này các bạn cần thì cứ dựa vào từng bước để cài đặt sử dụng plugin này mà không cần phải trả phí dịch vụ cài đặt Form Liên hệ

Hướng dẫn tạo form chuyên nghiệp với Contact Form 7

1 Cài đặt plugin Contact form 7 này tại Gói mở rộng
2 Hướng dẫn tạo form với Contact Form 7 trong wordpress

Cài đặt plugin Contact form 7 này tại Gói mở rộng

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

Bước 2.Tìm kiếm Từ khóa Contact form 7, trong trường hợp hình bên dưới mình đã cài đặt, các bạn chưa cài thì chọn cài đặt và kích hoat để sử dụng

Sau khi cài đặt xong plugin, các bạn tiến hành tạo form

Xem thêm:

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

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

Sau khi ấn nút Add New, cửa sổ sau đây xuất hiện, bạn đặt tên cho form Liên hệ của mình, có rất nhiều field mà bạn thấy như Text, Email, URL, Tel, Number, Date, text area, drop-down menu, checkboxes, radio buttons, acceptance, quiz, reCAPTCHA, File, Submit…. Bên dưới mình sẽ giải thích ý nghĩa từng field

Text: 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.
Tel (Telephone Number): Trường để khách hàng 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.

Rất có nhiều Trường mà Khách hàng không cần đến, và cũng khá phức tạp đối với các bạn không rành về I.T. Nên chúng tôi chỉ nêu một số cách đơn giản nhưng đáp ứng yêu cầu đủ đối với form Liên hệ. Ví dụ như hiện tại chúng tôi đã điền tên cho contact form là uyenwendy, có 2 trường hợp mà khách hàng hay gặp phải, chúng tôi hướng dẫn chi tiết cách giải quyết 02 trường hợp sau:

Trường hợp 1:Thay đổi các label Tiếng Anh thành label Tiếng Việt

Trường hợp 2: Thêm <label> Điện thoại bên dưới <label> Họ và Tên

Hình form liên hệ có sẵn

Thay đổi <label> Tiếng Anh thành <label> Tiếng Việt

Chuyển đổi thành tiếng Việt rất đơn giản, bạn chỉ cần đánh trực tiếp vào nội dung hiện tại các từ mà bạn muốn chuyển thành tiếng Việt. Như hình bên dưới bạn thấy mình đổi các label:

<label> Your Name (required) thành <label> Họ Và Tên

<label> Your Email (required) thành <label> Email

<label> Subject thành <label> Tiêu đề

<label> Your Message thành <label> Nội dung

[submit “Send”] thành [submit “Gửi”]

Thêm bất kỳ trường nào trong contact form 7

Thêm <label> Điện thoại vào bên dưới <label> Họ và Tên

Để 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, sau khi bạn đặt tên trường là Điện thoại thì xuất hiện shortcode bên dưới là [text* inthoi] , bạn copy shortcode [text* inthoi] bỏ vào khung nội dung bảng đăng ký form Liên hệ.

Nếu bạn không copy shortcode này vào phần Message Body thì bạn sẽ không thấy nội dung Điện thoại mà khách cần nhập vào trong bảng đăng ký liên hệ. Lúc này bạn phải thêm môt bước nữa là chọn Mail và điền như thông tin bên hình dưới. Điểm 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ệ.