Hướng dẫn tạo form trong Wordpress với Contact Form 7 - đảm bảo đẹp!

"Form" liên hệ là một phần khá quan trọng của website giúp thu thập thông tin đăng ký của Khách hàng chính vì vậy nó cũng giành được một sự quan tâm không nhỏ cả về nội dung đến thiết kế. Với website mã nguồn Wordpress, việc tạo mẫu liên hệ trở nên dễ dàng hơn rất nhiều tuy nhiên làm sao để có được một form đẹp mắt đối với những người mới "tập tành" làm web? Dưới đây chính là hướng dẫn giúp bạn có thể tự tạo một mẫu đăng lý/liên hệ đẹp mắt cho website của mình.

1. Cài đặt Plugin Contact Form 7

Chắc chắn không ít bạn đã từng thắc mắc không biết "Contact form 7 là cái gì mà đi diễn đàn nào cũng thấy thảo luận sôi nổi?". Vậy thì hôm nay chúng ta có cơ hội tìm hiểu sâu về nó rồi. Đây chính là plugin cực mạnh hỗ trợ việc tạo form trong Wordpress. Có rất nhiều plugin hỗ trợ công việc này, nhưng theo số động mọi người đã sử dụng (trong đó có mình) thì Contact Form 7 hơn hẳn cả về khả năng thiết kế giao diện đến các chức năng (gửi mail từ website, tích hợp GetResponse để lập kế hoạch email marketing)

Plugin Contact Form 7

Để cài đặt Plugin Contact Form 7 cho website mã nguồn Wordpress bạn có thể tải về theo đường dẫn: https://vi.wordpress.org/plugins/contact-form-7/ hoặc cài trực tiếp tại giao diện quản trị web >> Plugin >> Add new và tìm kiếm với cụm tự "Contact Form 7".

2. Tạo form liên hệ và cấu hình trong Contact Form 7

Trước khi đi vào chi tiết để có một mẫu liên hệ đẹp mắt, theo bố cục riêng của mình thì Thạnh xin hướng dẫn các bạn các bước để tạo một form cơ bản và cách chèn vào nơi cần hiển thị (dành cho người mới)

2.1 Tạo mẫu đăng ký/liên hệ cơ bản

Sau khi cài đặt Plugin Contact Form 7 và kích hoạt, bạn sẽ thấy xuất hiện một chức năng "Contact" trong trang quản trị website. Bạn chọn Contact >> Add new để tạo mới một form cơ bản, hãy đặt một cái tên cho nó và lưu lại.

Tạo mẫu liên hệ cơ bản

Sau khi Lưu lại mẫu vừa tạo, chúng ta sẽ nhận được một đoạn "shortcode" hiện ngay dưới tên form vừa tạo, đây chính là đoạn code rút gọn để ta chèn form vào nơi cần hiển thị (ví dụ hiển thị trên 1 trang/bài viết)

2.2 Chèn Form đăng ký vào website

Với đoạn code trên ta có thể dùng để chèn vào vị trí bất kỳ trên website ( nơi cho phép hiển thị nội dung) bằng cách dán đoạn code đó vào. Với bài ví dụ này Thạnh xin được dán vào một bài viết cho đơn giản.

Tạo mới 1 bài "post" (hoặc mở ra một bài đã tạo và tìm đến phần cần chèn form đăng ký) >> dán trực tiếp đoạn code đã lấy ở trên và lưu lại.

Xem thử nào:

2.3 Tạo Form theo ý của riêng mình

- Trước hết bạn cần gạch đầu dòng các trường hiển thị và xây dựng bố cục hiển thị (ví dụ ta lên được ý tưởng form như hình dưới)

Xây dựng bố cục form dự kiến

Như ví dụ trên, tôi cần tạo 1 form đăng ký để lấy thông tin họ tên, địa chỉ, quốc tịch, số điện thoại, email, công ty, các mục chọn về loại công ty và quy mô, một ô viết nội dung ghi chú và 1 nút đăng ký.
- Hãy sử dụng form cơ bản mà bạn đã tạo ở trên (mục 2.1) và bắt đầu chỉnh sửa nó theo ý tưởng bố cục đã lên từ trước.
- Để có được bố cục như trên có nhiều cách làm, ở ví dụ này tôi sẽ dùng cấu trúc bảng (thẻ <table>) để tạo ra cấu trúc đó. Từ ý tưởng bố cục, tôi hình dung ra cấu trúc bảng tôi tạo sẽ có dạng như sau:

- Bây giờ vào code lại nội dung form nào...

<table style="border-style:hidden;" width="200px" bgcolor="#c4e4cd">
<tbody>
<tr>
  <td width="60%" rowspan="2"> Nội dung 1 </td>
  <td width="40%"> Nội dung 2 </td>
</tr>
<tr>
  <td width="40%"> Nội dung 3 </td>
</tr>
</tbody>
</table>

(tr, td là các thẻ rất cơ bản rồi nên mình không giải thích đoạn code trên nữa. Bạn có thể tìm trên mạng về cách sử dụng 2 thẻ này nhé)
- Tiếp tục xây dựng các trường nội dung hiển thị....
Ta cần 1 trường để nhập họ tên, hãy click vào loại định dạng "text" ngay trên hộp soạn thảo form, cửa sổ mới hiện ra giúp ta tùy chỉnh cho trường nhập này:

Thêm trường dữ liệu và tùy chỉnh

Các dữ liệu tương tự thì ta chọn định dạng tương tự, ví dụ số điện thoại - "tel", email - "email", hộp lựa chọn - "drop-down menu", nút đăng ký/gửi - "submit" ...
Với Contact Form 7, nếu bạn muốn 2 ô nhập (ví dụ số điện thoại và email) hiển thị trên cùng 1 hàng thì có thể thêm class

<div class="column one-second">[tel* your-tel placeholder "Nhập Số điện thoại..."] </div>
<div class="column one-second">[email* your-email placeholder "Nhập Email..."] </div>

Sau khi hoàn thành đối với các trường dữ liệu còn lại thì ta sẽ được đoạn code đầy đủ như sau:

<table style="border-style:hidden;" width="200px" bgcolor="#c4e4cd">
<tbody>
<tr>
<td width="60%" rowspan="2">
<div class="column one">[text* your-name placeholder "Họ và Tên..."] </div>
<div class="column one">[text* your-add placeholder "Địa chỉ..."] </div>
<div class="column one">[text* your-nationality placeholder "Quốc tịch..."] </div>
<div class="column one-second">[tel* your-tel placeholder "Nhập Số điện thoại..."] </div>
<div class="column one-second">[email* your-email placeholder "Nhập Email..."] </div>
<div class="column one">[text* your-company placeholder "Công ty..."] </div>
<div class="column one-second">[select* company-type id:company-type include_blank="-- Loại công ty --" "Sản xuất hữu cơ" "Phân phối hữu cơ" "Khác"] </div>
<div class="column one-second">[select* company-size include_blank="-- Quy mô --" "Trên 500 nhân viên" "Từ 100 đến 500 nhân viên" "Dưới 100 nhân viên"] </div></div></td>
<td width="40%">
<div class="column one">[textarea your-message x6 placeholder "Xin cho biết lí do bạn muốn tham dự hội thảo nay?..."]</div></td>
</tr>
<tr>
<td width="40%"><div class="column one" align="right;">[submit class:button_full_width "ĐĂNG KÝ"]</div></td>
</tr>
</tbody>
</table>

Với cách làm tương tự thì bạn có thể tự tạo cho mình 1 form đăng ký với cấu trúc riêng, đẹp mắt!

2.4 Cấu hình Form giúp gửi mail từ website

Contact Form 7 có khả năng gửi email trực tiếp từ website thông báo tới người quản lý và gửi mail phản hồi lại cho người đăng ký khi họ click form đăng ký. Cái này thật tuyệt vời đúng không?
Bắt đầu, chuyển sang tab Mail và điền thông tin vào các trường cần điền:

Đây là nội dung gửi mail cho quản trị khi có người điền form đăng ký, trong đó:
To: Nhập email quản trị muốn nhận email thông báo
From: Bí danh và Email hiển thị của trung tâm gửi
Subject: Chủ đề gửi
Message Body: Nội dung gửi thư (chỗ này cho phép ta soạn thảo bằng code html)

Kéo xuống dưới 1 chút bạn sẽ thấy có phần tick chọn Mail (2) - đây chính là kích hoạt gửi mail trả lời khách hàng đã đăng ký và nội dung cấu hình cho phần gửi đó cũng tương tự như phần trên.

Lưu lại và kiểm tra thử xem Form của bạn đã hoạt động tốt hay chưa nhé. Chúc bạn thành công!

(Nhiều bạn gặp lỗi khi hệ thống báo lỗi đăng ký, đây là một lỗi khá phổ biến và các bạn có thể xem bài viết: Cấu hình SMTP để gửi mail - khắc phục lỗi gửi mail với website Wordpress)

Cách lấy danh sách tên file từ 1 thư mục bằng lệnh CMD

Đây là vấn đề Thạnh đã gặp phải khi làm dữ liệu cho một trang bán hàng. Người chụp ảnh chụp rất nhiều mã sản phẩm tuy nhiên lại không có danh sách mã sản phẩm và thông tin, giá. Mà up sản phẩm lên web thì không thể up bằng tay từng sản phẩm được (up SLL bằng excel). Điểm đặc thù của bên mình là tên ảnh chụp được đặt tên trùng với mã sản phẩm. Chính vì vậy, việc lấy danh sách tên file từ thư mục ảnh chụp đã giúp mình hoàn thành file dữ liệu sản phẩm để up web. Bài viết này sẽ hướng dẫn các bạn cách lấy danh sách tên file có trong thư mục bằng lệnh cmd.

(Xem video ở cuối bài)

Đầu tiên các bạn cần mở cửa sổ Run bằng tổ hợp phím Window + R sau đó gõ cmd để mở lên cửa sổ cmd

Lấy danh sách tên file bằng lệnh cmd

Tại cửa sổ Cmd, dùng lệnh thay đổi ổ D: (enter) nếu như thư mục của bạn đang để ở ổ D

Mở thư mục cần chứa các file cần tạo danh sách lên và copy đường dẫn thư mục:

Copy toàn bộ địa chỉ đường dẫn tới file cần lấy danh sách

Dùng lệnh truy vấn thư mục bằng cmd như sau: cd <dán địa chỉ thư mục vừa copy, bỏ qua ổ D gốc> (enter).

Dán đường dẫn vừa copy vào sau lệnh cd

dir (enter) để liệt kê những file có trong thư mục đó với nhiều thông tin. Tuy nhiên bạn chỉ cần lấy tên file thôi nên sẽ dùng lệnh: dir /a-d /b

Dùng lệnh dir /a-d /b để lấy danh sách tên file có trong thư mục

OK! Bây giờ xuất ra file dạng .txt với lệnh dir /a-d /b >tenfilexuat.txt (enter). Sau đó vào lại thư mục sẽ thấy xuất hiện 1 file <tenfilexuat>.txt (ở đây tôi đặt tên là danhsachtenfile.txt) và đây chính là thành quả của bạn!

Xuất danh sách tên file đó ra một bản text

Xuất file danh sách tên các file trong danh mục thành công

Xong rồi! Với file này cùng một chút kiến thức excel (sử dụng hàm Left, Vlookup) vậy là mình đã hoàn thành xong 1 file dữ liệu sản phẩm để up web nhanh chóng với đầy đủ thông tin: mã sản phẩm, giá...

Các bạn cần hỏi gì thêm về vấn đề này thì cứ coment hoặc liên hệ trực tiếp qua thông tin cuối trang nhé!

Tag:  cách lấy tên file hàng loạt, cách lấy tất cả tên file trong 1 thư mục, lấy danh sách tên file trong thư mục

Cấu hình SMTP để gửi mail Wordpress - Giải pháp thay thế lỗi Contact Form 7

Gần đây rất nhiều bạn liên hệ hỏi mình về vấn đề lỗi gửi mail trực tiếp từ website mã nguồn Wordpress. Khi khách hàng đăng ký vào form đăng ký trên website Wordpress thì bị báo lỗi không gửi mail xác nhận được. Hôm nay mình sẽ hướng dẫn bạn một giải pháp thay thế giúp bạn vẫn thực hiện được việc gửi mail đó - cấu hình SMTP để gửi mail trên Wordpress.

Lỗi gửi mail trên Wordpress

Nhiều bạn sử dụng Plugin Contact Form 7 trên Wordpress để tạo form đăng ký nhưng form lại báo lỗi đăng ký không thành công, và bạn đã nhầm tưởng rằng đó là lỗi của Plugin. Thực ra đây không phải lỗi của Plugin mà là do nhà cung cấp hosting đã chặn hàm mail() để gửi mail từ sever của họ.

Trước đây mình có dùng hosting của một số bên như Hostinger hay vHost thì không thấy bị chặn như vậy, còn với Mắt Bão thì bên đó báo là chặn hàm mail() để ngăn chặn tổ chức spam bla bla... Nhưng không sao, dưới đây chính là giải pháp giúp các bạn thực hiện việc gửi mail thành công từ website Wordpress mà không phải lo nghĩ vấn đề nhà cung cấp hosting có chặn gửi mail hay không.

Cấu hình SMTP để gửi mail từ website Wordpress

*Bước đầu tiên của công việc này chính là cài một Plugin trên Wordpress hỗ trợ chúng ta công việc cấu hình SMTP gửi mail.
Tôi muốn giới thiệu đến bạn một Plugin miễn phí có tên Eay WP SMTP bạn có thể tìm và cài trong giao diện plugin hoặc tải về tại đây: https://vi.wordpress.org/plugins/easy-wp-smtp/

Plugin Easy WP SMTP - miễn phí

Sau khi đã cài đặt plugin Easy Wp SMTP bạn đăng nhập vào trang quản trị sau đó vào tiếp Settings => Easy WP SMTP vào giao diện cấu hình SMTP sẽ xuất hiện như hình dưới

Giao diện cấu hình SMTP sau khi cài đặt Plugin

Trong giao diện trên, có những trường liên quan đến SMTP mà nhiệm vụ của chúng ta là phải có các thông tin đó để cấu hình. Vậy lấy thông tin SMTP đó ở đâu? hãy đọc bước ngay dưới.

*Bước 2: Lấy thông tin SMTP để cấu hình. Với bước này sẽ có nhiều thao tác nhỏ nữa phụ thuộc vào dịch vụ mail bạn đang sử dụng. Ở giới hạn bài viết này Thạnh xin được hướng dẫn cách lấy thông tin SMTP từ 2 dịch vụ mail là Gmail và Webmail(cái này là dịch vụ mail hosting khá phổ biến với ai dùng Cpanel)

TH1: Nếu bạn sử dụng Gmail làm email cấu hình gửi thư

(Nếu bạn sử dụng email hosting thì hãy bỏ qua TH1 này và đọc tiếp hướng dẫn ở TH2 phía dưới nhé)
Theo kinh nghiệm mình đã sử dụng Gmail làm server gửi mail từ website mã nguồn Wordpress thì chưa thấy có vấn đề gì trong việc gửi mail.
- Đầu tiên bạn cần đăng nhập vào tài khoản Google (có thể vào theo đường dẫn này https://myaccount.google.com) và bật xác minh 2 bước:

Đăng nhập vào tài khoản Google

Bật "Xác minh 2 bước"

- Nếu bạn đã từng cài đặt xác minh 2 bước từ trước đó nhưng bây giờ đã tắt đi thì bạn chỉ việc bật lại.
- Còn nếu bạn chưa từng cài đặt xác minh 2 bước thì bạn sẽ được chuyển đến giao diện cài đặt để bật xác minh 2 bước (gồm 3 bước nhỏ theo trình tự dưới đây)

Điền số điện thoại có thể nhận tin nhắn hoặc nghe điện hiện tại rồi chọn Tiếp theo

Nếu là nhận mã qua tin nhắn thì bạn điền mã nhận được vào ô nhập mã và chọn Tiếp theo

Cài đặt hoàn tất, bây giờ bạn có thể bật xác minh 2 bước

- Quay trở lại giao diện trang tài khoản ban đầu, bạn sẽ thấy có thêm phần mật khẩu ứng dụng. Click chuột vào Mật khẩu ứng dụng để chuyển đến trang tạo mật khẩu ứng dụng giúp đăng nhập tài khoản Google của mình từ các ứng dụng trên thiết bị không hỗ trợ Xác minh 2 bước.

Truy cập vào tạo mật khẩu ứng dụng

Ở giao diện tiếp theo cho phép ta chọn ứng dụng và thiết bị muốn tạo mật khẩu ứng dụng, bạn có thể chọn như mình theo hình dưới: đó là Thư và Máy tính dùng Windows

Chọn ứng dụng và thiết bị muốn tạo mật khẩu ứng dụng.

Sau đó bạn sẽ nhận được thông báo tạo mất khẩu thành cộng và được cung cấp mật khẩu. Sao chép lại mã đó, chúng ta sẽ dùng đến nó ở bước 3 khi cấu hình thông tin SMTP trong Easy WP SMTP.

Nếu bạn dùng gmail thì bạn thuộc TH1 bên trên(và bỏ qua TH2), còn nếu dùng email hosting thì hãy đọc hướng dẫn tiếp ở TH2

TH2: Nếu bạn sử dụng email hosting để gửi mail trong Wordpress

Bạn có thể truy cập vào Mail Client của email hosting đó để kiểm tra thông tin SMTP. Ở bài viết này mình sẽ hướng dẫn đối với host Cpanel và ứng dụng mail là Webmail để các bạn dễ hình dung.
Khi mua gói dịch vụ email hosting thì bạn sẽ có thông tin truy cập quản trị email đó, cũng giống như bạn vào mail.google.com để quản lý thư gửi - nhận của mình.

Đây chính là giao diện Webmail khi mình mua email hosting bên Mắt Bão

Để truy cập vào Mail Client bạn vào Configure Mail Client trong nút thả xuống chỗ tài khoản (góc trên cùng bên phải) - như hình dưới:

Configure Mail Client - Webmail

trang thông tin mở ra sẽ chứa thông tin SMTP mà chúng ta cần:

Đây chính là thông tin SMTP - Webmail

*Bước 3: Nhập thông tin SMTP vào Easy WP SMTP và thực hiện gửi mail
Với thông tin SMTP đã lấy được ở bước 2, ta quay trở lại trang cấu hình Easy WP SMTP để điền các thông tin tương ứng giúp gửi email từ web Wordpress thành công.

Điền thông tin vào Easy WP SMTP

Trong đó:

• From Email Address: chỗ này ta điền luôn email mà dự định dùng để gửi đi
• From Name: điền tên hiển thị
• SMTP Host: nếu là gmail thì điền smtp.gmail.com còn nếu dùng email hosting thì nó chính là Outgoing trong bảng thông tin SMTP đã lấy
• Type of Encrytion: bạn có thể chọn là SSL
• SMTP Port: 465
• SMTP Authentication: Yes
• SMTP username: điền email dùng để gửi đi
• SMTP Password: Nếu là Gmail thì ta copy mật khẩu ứng dụng mà ta đã lấy ở Bước 2 (TH1), còn nếu là email hosting (TH2) thì chính là mật khẩu đăng nhập cho email đó

Lưu lại và test gửi thử xem được chưa nhé

Điền email nhận để test thử xem gửi thư thành công chưa

Nếu thành công bạn sẽ nhận được thông báo như hình dưới

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