Hướng dẫn add script vào contact form 7

Website Wordpress của bạn đang sử dụng plugin Contact Form 7? Và ban đang cảm thấy khó chịu vì phải nhận nhiều form giống nhau vì người dùng vô tình hoặc cố tình gửi nhiều lần? Đừng lo lắng, bài viết hôm nay sẽ giúp bạn giải quyết vấn đề này.

Ẩn nút submit khi click gửi form lần đầu tiên

Để có thể ẩn được nút submit, các bạn thêm đoạn code này vào file function

function js_hide_cf7_pttuan410(){;?>

Như vậy khi click xong là nút submit của CF7 sẽ tự động biến mất.

Sau khi nhấn gửi nút submit sẽ biến mất.

Nếu làm theo cách này thì thấy không ổn lắm, trong trường hợp gửi sai thì nút submit này cũng không hiện lên lại, vậy thì chúng ta phải viết thêm 1 đoạn script nữa để nút submit hiển thị lại khi gửi thành công hay thất bại nhé.

Đoạn code sẽ như sau:

function js_hide_cf7_pttuan410(){;?>

Như vậy là xong, các bạn có thể kiểm tra kết quả của mình nhé.

Hướng dẫn cách chống gửi nhiều form cùng 1 lúc

Thêm thuộc tính disable vào button submit

Code này sẽ không ẩn button submit đi mà sẽ add thuộc tính disable vào button, từ đó sẽ không click được.

Contact Form 7 (Ctf7) là plugin trong WordPress, nó cho phép tạo Form liên hệ và có thể nhúng mọi nơi trong Website được thiết kế bằng WP. Ctf7 hiện đang là plugin có lượng tải và sử dụng nhiều nhất so với các plugin khác dùng thiết kế các form liên hệ.

1. Cài plugin Contact Form 7

Trước tiên để cài đặt Ctf7 bạn hãy làm theo hướng dẫn bằng các hình ảnh bên dưới hoặc có thể xem chi tiết tại cách cài plugin wordpress

2. Tạo mới Form

Sau bước kích hoạt plugin thành công, bạn hãy tìm vào menu trái trong quản trị, mặc định Ctf7 đã tạo sẵn cho chúng ta một form để dùng. Tuy nhiên nếu không thích bạn có thể xóa và tạo mới form khác như sau:

Và kết quả khi hiển thị Form trên trang liên hệ như hình dưới

Nhưng bạn khoan thắc mắc đã, những giải thích chi tiết sẽ được trình bài bên dưới đây.

2.1 Tiêu đề From

Gọi lại cho tôi là tên form, thường dùng để ghi nhớ để quản lý. Thông thường mỗi website sẽ tạo ra nhiều Form để phục vụ cho các mục đích khác nhau, vì vậy việc ghi nhớ để chỉnh sửa sau này thông qua các tiêu đề Form.

2.2 Danh sách trường Field của Form liên hệ

Ctf7 sẽ tạo sẵn một số trường cần dùng cho chúng ta, nếu bạn không dùng đến có thể xóa chúng và thêm mới một trường khác, ví dụ tôi sẽ thêm mới trường Điện Thoại. Trường bài bài viết này tôi xin phép gọi là Field

Cấu trúc cơ bản của một trường Ctf7 là [kieu_truong* ma-truong], các kieu_truong (kiểu trường) hiện có là: text, email, url, tel, number, date, textarea, select, checkbox, radio ….. và một số trường nâng cao khác.

Theo sau kieu_truong nếu là * tức là trường đó bắt buộc khách hàng nhập dữ liệu, nếu khách hàng không nhập form sẽ không gửi được. ma-truong là mã do chúng ta qui định sao cho dễ nhớ để sử dụng chúng khi cần. Tôi ví dụ chúng ta có thể tự định nghĩa một trường mới như sau: [text* tieu-de]

Nếu bạn cần thêm placeholder cho trường (placeholder để mô tả cho khách hàng cần nhập gì vào trường đó) bạn có thể thêm như sau:

[text* your-name placeholder "Họ tên của bạn"]

Phân loại Field Ctf7

Tôi sẽ phân thành 2 loại Field nhé, một là field dùng để nhập liệu cho form như text, email, url, tel, number, date, textarea, select, checkbox, radio và một loại field đặc biệt là submit, field này sẽ tạo cho ta nút gửi dữ liệu, cụ thể như sau:

[submit “Submit”] tôi sửa lại như sau cho dễ xem [submit id:submit-id class:btn “Gửi”]

Xóa field ra khỏi form

Rất dễ dàng để xóa một field ra khỏi form bạn chỉ cần tô đen và xóa chúng thôi.

2.3 Cấu hình mail

Bạn chú ý danh sách field này, chúng ta có thể dùng lại bất cứ nơi nào bên tab Cấu hình Mail, chỉ cần copy và dán chúng vào bất kì chỗ nào

2.3.1 Mail nhận

Email nhận là email mà sau khi khách hàng gửi thông tin từ form liên hệ, thông tin sẽ gửi về email này. Email này có thể là bất kì loại mail nào: gmail, hotmail,….

2.3.2 Mail gửi

Bạn hãy cấu hình theo mặc định có dạng Tiêu đề ( tenmien.com thay bằng tên miền web đang chạy )

2.3.3 Tiêu đề

Tiêu đề là tiêu đề email nhận, ví dụ tôi nhập ở đây là: Khách hàng báo gọi lại

Trong email sẽ hiển thị như thế này

2.3.4 Cc email khác

Để Cc thêm cho một tài khoản email khác bạn nhập vào ô Additional headers như sau:

2.3.4 Nội dung email

Bạn hoàn toàn có thể sửa lại nội dung email theo ý mình bằng dữ liệu các field bằng cách nhúng chúng vào theo dạng shortcode [your-subject]

2.3.4 Đính kèm file trong email

Bạn hoàn toàn có thể đính kèm file khi gửi email bằng cách nhúng field file vào File attachments

Nhớ field phải được khai báo tab Nội dung Form với dạng kiểu field là file nhé

3. Chèn Form vào trang liên hệ

Sau khi tạo mới form liên hệ thành công, bạn sẽ thấy được shortcode tương ứng mới mỗi form.

Hoặc bạn có thể copy tại tranh danh sách form liên hệ.

Tạo mới trang liên hệ và nhúng shortcode vừa copy vào nội dung trang

Và kết quả hiển thị như sau:

4. Cấu hình gửi nhận mail bằng SMTP

Nếu không thích đọc, bạn có thể xem VIDEO cho dễ

Mặc định WordPress sử dụng hàm mail của PHP, có thể một số Hosting chặn hàm này đi. Vì vậy để chắc chắn gửi và nhận mail bạn hãy cài plugin WP Mail SMTP by WPForms

Cấu hình SMTP gửi nhận mail bằng SendGrid

Để nhận được API Key bạn hãy vào trang https://sendgrid.com/ để tạo tài khoản và lấy Key nhé.

Cấu hình gửi nhận Email bằng tài khoản Gmail

Trước tiên bạn hãy chuẩn bị 1 tài khoản SMTP Gmail nhé, tài khoản này không phải là tài khoản Gmail.

5. Quản lý liên hệ bằng plugin Flamingo

Contact form 7 chỉ giúp chúng ta gửi mail đến nơi cần, nó không có nhiệm vụ lưu trữ các liên hệ sau mỗi lần gửi. Nếu bạn muốn lưu trữ những nội dung khách hàng gửi đến bạn hãy cài đặt thêm plugin Flamingo

Flamingo vừa giúp chúng ta lưu trữ các địa chỉ email, vừa giúp chúng ta quản lý các email liên hệ khách hàng gửi đến.

Như vậy tôi vừa trình bày hướng dẫn sử dụng cũng như một số tiện ích của Contact Form 7, hi vọng nó sẽ hữu ích đối với bạn.