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)