Tạo form liên hệ với plugin Contact Form 7

Source: Tạo form liên hệ với plugin Contact Form 7

Xin chào các bạn!

Trang Liên hệ là một trang thiết yếu cho mọi trang web. Là nơi khách hàng có thể tìm thấy thông tin liên hệ cũng như để lại bình luận, thắc mắc cho người quản lý website. Để khách hàng có thể để lại thông tin, bạn cần có một form liên hệ, bao gồm các ô thông tin như Tên, số điện thoại, địa chỉ, nội dung liên hệ, … tạo biểu mẫu liên hệ trong wordpress trở nên đơn giản hơn với cài đặt plugin Mẫu liên hệ 7 cùng chức năng tạo trang để tạo trang liên hệ. Sau đây mình sẽ hướng dẫn các bạn cài đặt plugin và tạo trang liên hệ.

Cài đặt plugin Biểu mẫu liên hệ 7

Contact Form 7 là plugin tạo form liên hệ đơn giản, dễ sử dụng, khá nổi tiếng với hơn 5 triệu lượt kích hoạt và đánh giá 5 sao trên kho plugin wordpress.

Bước 1: Cài đặt Plugin

Để cài đặt plugin này, hãy vào menu bổ sung > Cài đặt mới. Sau đó, tìm kiếm plugin với từ khóa “contact form 7”, bạn sẽ thấy plugin này xuất hiện. Hãy nhấn nút cài đặt và kích hoạt để sử dụng.

Plugin Contact Form 7 – Hướng dẫn tạo Form liên hệ

Bước 2: Kích hoạt Plugin

Sau khi cài đặt và kích hoạt thành công plugin CF7, bạn sẽ thấy một menu bổ sung có tên Mâu liên hệ, nhấp vào nó, sau đó nhấn Tạo một biểu mẫu mới.

Bước 3: Thêm biểu mẫu mới

Để thêm biểu mẫu mới, bạn nhập tên cho biểu mẫu và tiến hành thêm nội dung vào biểu mẫu. Bạn muốn thêm phần tử nào, có thể nhấp vào các nút danh sách để thêm phần tử đó, như Văn bản ngắn, email, URL, số điện thoại, v.v.

Bước 4: Định cấu hình thuộc tính

Ví dụ ở đây mình thêm số điện thoại, bạn phải điền đầy đủ thông tin sau:

• Loại: nếu bạn chọn mục bắt buộc thì khi sử dụng bạn phải điền vào ô này.
• Tên: tên của trường nhập cần được phân biệt, không có khoảng trắng và phải là duy nhất
• Giá trị mặc định: nếu bạn nhập nó, nó sẽ xuất hiện bên ngoài, trong hộp nhập liệu
• Đánh dấu chọn Sử dụng dòng này làm hình mờ… thì giá trị mặc định ở trên sẽ bị mờ đi và khi người dùng nhập vào thì giá trị đó sẽ tự biến mất
• Thuộc tính ID: để sử dụng trong css
• Thuộc tính class: được sử dụng trong css để trang trí ô

Bước 5: Chèn biểu mẫu

Sau đó, bạn nhấp vào nút chèn trên biểu mẫu.

Bước 6: Định cấu hình văn bản

Tương tự, bạn có thể thêm văn bản ngắn để khách hàng điền vào tên, e-mail, Văn bản dài để điền nội dung… để gửi để thêm một nút gửi vào biểu mẫu. Ngoài ra, để gắn nhãn trước cho mỗi ô đầu vào, bạn có thể chèn ô vào giữa cặp nhãn và cấu trúc Nhập tên trường [text* your-name] . Trong đó phần in đậm là mã của ô nhập liệu.

Giao diện cấu hình để tạo biểu mẫu liên hệ với plugin Biểu mẫu liên hệ 7

Bước 7: Định cấu hình thư

Sau đó, bạn chuyển qua phần cấu hình mail, để cung cấp thông tin người nhận email khi khách hàng liên hệ qua hình thức này.

• Thư đã nhận: là email sẽ nhận thông tin liên hệ từ biểu mẫu này
• Thư đã gửi: gửi thông tin email, để mặc định!
• Chủ đề: chủ đề cho email
• Tiêu đề bổ sung: thông tin bổ sung cho email, chẳng hạn như Thư trả lời. nhắn
• Nội dung thư: Nội dung email

Bạn có thể chèn những gì khách hàng đã nhập bằng cách sử dụng tên của hộp nhập liệu kèm theo [ ], Như là [dien-thoai]

Giao diện cấu hình mail – Hướng dẫn tạo form liên hệ

Bước 8: Định cấu hình biểu mẫu thông báo

Qua mục Thông báo và Ghi chú, bạn có thể chỉnh sửa các thông báo biểu mẫu theo ý thích của mình.

Giao diện cấu hình biểu mẫu liên hệ

Bước 9: Mã ngắn cho liên hệ

Bạn bấm nút Cứu để lưu biểu mẫu này. Sau đó, dưới tên biểu mẫu, bạn sẽ thấy một mã ngắn ngắn, năm trong hộp màu xanh lam. Hãy sao chép nó!

Bước 10: Tạo một trang mới

Bây giờ, hãy tạo một trang mới, có tên là Liên hệ. Trong phần nội dung, hãy dán đoạn mã ngắn đã sao chép ở trên. Sau đó nhấn nút Bài đăng để đăng trang.

Giao diện cách tạo trang liên hệ mới

Bây giờ bạn hãy ra khỏi trang web và truy cập vào trang Liên hệ mới tạo, bạn sẽ thấy một biểu mẫu điền thông tin như bên dưới. Hãy thử điền thông tin và nhấn. cái nút Gửi Xin vui lòng!

Biểu mẫu điền thông tin liên hệ

Nếu bạn thấy thông báo Cảm ơn, nó đã được gửi thành công. Bây giờ hãy kiểm tra lại email mà bạn đã cấu hình làm mail nhận khi tạo form, nếu nhận được mail là thành công!

Mẫu thông báo Xin cảm ơn

bản tóm tắt

Vậy là bạn đã biết cách tạo form liên hệ khá đơn giản với plugin Contact form 7 rồi phải không? Tuy nhiên, hình thức của mình khá đơn giản, bạn có thể chèn thêm thông tin liên hệ, logo, hình ảnh doanh nghiệp vào trang liên hệ cho bắt mắt hơn nhé! Ngoài ra, bạn cũng có thể sử dụng css để làm cho biểu mẫu của mình trông đẹp và chuyên nghiệp hơn, như hình bên dưới nhé! Tôi sẽ hướng dẫn bạn sau.

Hình ảnh doanh nghiệp trên trang liên hệ – Hướng dẫn tạo biểu mẫu liên hệ

Via: sieucoder.com

from sieucoder.com https://ift.tt/3FMb6S4
via Sieucoder.com