Hướng dẫn sử dụng ninja form, chèn mẫu liên hệ vào WordPress

Bạn đang thắc mắc cũng như cách chèn mẫu liên hệ cho website của mình. Trong bài viết này, Hostify.vn sẽ hướng dẫn sử dụng ninja form để bạn hiểu rõ hơn để thao tác nhé.

huong-dan-su-dung-ninja-form
Hướng dẫn sử dụng ninja form, chèn mẫu liên hệ vào wordpress

Định nghĩa về Ninja form

Đây được xem là một trong những plugin được xây dựng biểu mẫu linh hoạt và dễ dàng sử dụng nhất cho WordPress, với khá nhiều mẫu dựng sẵn đa dạng và phong phú. Bạn có thể chọn mẫu phù hợp để tùy chỉnh website của mình nhé.

Bạn có thể cấu hình máy chủ SMTP để gửi Email bằng cách thiết lập gửi mail SMTP. Nếu bạn chưa biết thao tác, bạn có thể tham khảo hướng dẫn bên dưới nhé.

Hướng dẫn sử dụng Ninja Forms trên WordPress.

Cấu hình WP Mail SMTP sử dụng Sendgrid

Cách cài đặt plugin Ninja Form.

Trước tiên, bạn cần tải Plugin Ninja Forms trực tiếp từ kho lưu trữ của WordPress và upload lên trang web của mình hoặc bạn có thể truy cập vào mục Plugins => Chọn mục Add New trong bảng điều khiển WordPress của bạn và sau đó tìm kiếm mục Ninja Forms ở đó.

ninja-form-plugin
Cách cài đặt Ninja form plugin

Sau khi tìm được kết quả “Ninja Form”, bạn nhấn vào mục Cài đặt => Chọn mục Kích hoạt.

Xây dựng các mẫu liên hệ phù hợp với bạn

Bước 1: Thiết kế các mẫu liên hệ.

Tại bảng điều khiển WordPress, nhấn chọn Ninja Form => Chọn Thêm mới. Tại đây, bạn có thể tạo một mẫu liên hệ theo ý thích hoặc sử dụng những mẫu có sẵn. Trong bài này, Hostify.vn sẽ sử dụng mẫu “Liên hệ với chúng tôi” để thiết kế nhé.

Để thêm các trường mới trong mẫu liên hệ, bạn chỉ cần nhấn dấu (+) ở bên dưới và chọn vào các trường mà bạn muốn thêm.

Plugin-ninja-form-wordpress
Plugin Ninja form WordPress

Ngoài ra, Bạn cũng có thể xóa những trường không cần thiết bằng cách di chuyển chuột vào những biểu tượng bánh răng tại mỗi trường và nhấn chọn biểu tượng thùng rác để xóa bỏ.

Bạn có thể xem hướng dẫn chi tiết về xây dụng biểu mẫu liên hệ từ nhà cung cấp tại đây.

Bước 2: Cấu hình để bạn gửi Email

Tại phần chỉnh sửa mẫu liên hệ với chúng tôi, bạn nhấn vào chọn mục Email và Thao tác. Tiếp tục nhấn chọn vào biểu tượng có hình bánh răng tại mục Email Confirmation.

Tại đây, bạn sẽ cần chú ý các mục quan trọng sau:

Email nhận tin (1): Nhập địa chỉ email mà bạn muốn nhận thông tin từ người dùng.

Tiêu đề (2): Tiêu đề email gửi về email nhận.

Nội dung Email (3): Trường này sẽ hiển thị những thông tin mà người dùng đã nhập.

Lưu ý: Mục 3 (nội dung email) khá quan trọng, mặc định tại trường Nội dung Email sẽ được thiết lập các biến như

{all_fields_table}: biến này sẽ lấy tất cả các thông tin từ các trường tên, email, địa chỉ, nội dung chính… mà người dùng đã nhập và sẽ hiển thị trong email tra về.

Tuy nhiên nó lại không hề gọn gàng một chút nào, chắn chắn bạn không muốn xem một email không ngăn nắp đâu.

Đừng lo lắng, Ninja Form đã thiết kế đầy đủ các biến để cho bạn có thể tùy chọn lấy hoặc không lấy trường nào, cũng như bố cục trong phần Nội dung. Trong bài này, tôi sẽ thiết lập như dưới đây để lấy Tên, Email và Nội dung chính của mẫu liên hệ:

Tên người gửi: {field:name}

Email người gửi: {field:email}

Nội dung: {field:message}

Để biết đầy đủ các biến được thiết lập trong Ninja Form, bạn hãy xem hướng dẫn chi tiết tại đây.

Bước 3: Cài đặt các thông báo email trong ninja form

Để cài đặt các thông báo khi gửi form thành công, bạn chọn mục có biểu tượng bánh răng tại trường Success Message => chỉnh sửa nội dung theo ý muốn => Cuối cùng, bạn sẽ chọn mục Hoàn thành để hoàn tất thao tác nhé.

huong-dan-su-dung-ninja-form02
Cài đặt các thông báo email trong ninja form

Ví dụ: Chúng tôi sẽ phản hồi và liên hệ đến bạn trong thời gian sớm nhất.

Sau khi hoàn tất các bước trên, bạn nhấn chọn vào mục Nâng cao => Hiển thị thiết lập và điền tên mẫu liên hệ của bạn. Nhấn chọn mục Hoàn thành để đóng phần chỉnh sửa nâng cao và Xuất bản để lưu lại tất cả thiết lập.

Đọc thêm: Email là gì? 10 Lợi ích của Email mang lại cho người dùng

Hướng dẫn chèn mẫu liên hệ vào website WordPress

Sau khi, bạn đã hoàn tất các bước “Thiết kế và cấu hình gửi mail với Ninja Form”, bạn chỉ cần sao chép đoạn shortcode để gán vào Bài viết hoặc Trang để form liên hệ hiển thị.

Kiểm tra kết quả

Sau khi bạn thao tác các bước thành công, việc quan trọng cần thao tác tiếp theo là kiểm tra thật kỹ trước khi đưa vào hoạt động chính thức nhé.

Nếu trong quá trình thao tác gặp trở ngại, bạn có thể liên hệ Hostify.vn qua email: hotro@hostify.vn với đội ngũ support 24/7. Ngoài ra, chúng tôi có cung cấp dịch vụ website 369 đã có hỗ trợ cài đặt form liên hệ, giúp bạn tiết kiệm thời gian hơn. 

Đọc thêm: Top 10 nhà cung cấp Hosting Việt Nam chất lượng cao

Kết luận

Hostify.vn vừa chia sẻ đến bạn bài viết Hướng dẫn sử dụng Ninja Forms và chèn mẫu liên hệ. Mong rằng qua bài viết này, bạn sẽ tự tin thao tác trên website của mình nhé.

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

Thông tin liên hệ tư vấn