Hướng dẫn cài đặt, sử dụng và làm đẹp contact form 7 tạo form liên hệ trong wordpress

Mấy bữa nay tự nhiên không thấy các thông tin liên hệ của các bạn gửi về. Đoạn mình ngồi ktra lại web thấy thằng contact form 7 làm viêc không được tốt. Tiện mình sửa form và làm bài chia sẻ các cách cài đặt và sử dụng plguin contact form 7. Đồng thời chia sẻ một số ý tưởng làm đẹp contact form 7 cho các bạn tham khảo làm trang liên hệ. Cụ thể bài viết này sẽ giải quyết cho bạn các tình huống sau:

  • Cài đặt contact form 7 cho website wordpress
  • Tạo và hướng dẫn cầu hình gửi thông tin cho contact form 7
  • Thêm reCapcha V3 cho website wordpress dùng trong contact form 7
  • Làm đẹp mẫu liên hệ trong contact form 7:
    • Tạo contact form thành 1 cột
    • Tạo contact form thành 2 cột
  • Tham khảo một số mẫu contact làm trang liên hệ.

Cài đặt plugin contact form 7 cho wordpress

Có thể bạn đã biết, nhưng plugin contact form 7 là plugin giúp bạn tạo form liên hệ vô cùng tiện lợi cho website wordpress. Việc cài đặt cũng diễn ra đơn giản như sau:

Đầu tiên trong trang quản trị của bạn chọn: Plugin -> Cài mới -> nhập ” contact form 7 ”  vào tìm kiếm -> chọn cài đặt .  Việc cài đặt mất 1 chút thời gian, sau khi cài đặt thì chúng ta kích hoạt plugin lên.

cài đặt plugin contact form 7 lên wordpress
cài đặt plugin contact form 7 lên wordpress

Tạo một mẫu liên hệ trong contact form 7 như sau:

Trong cửa sổ quản trị của wordpress, bạn chọnContact -> Add new để thêm mẫu liên hệ mới

thêm mới form liên hệ trong contact form 7
thêm mới form liên hệ trong contact form 7

Chỉnh sửa và thêm các trường vào contact form 7:

sau có mẫu mới ta cần chỉnh sửa và thêm bớt các trường như là: họ tên, số điện thoại, email v.v.. vào form. Bạn chú ý theo form dưới:

A: tên của form – bạn có thể đặt là bất cứ thứ gì

B: Đây là đoạn code mà bạn cần copy để dán vào bất cứ trnag nào muốn hiển thị form liên hệ này.

C: các trường chèn vào form:

  • có rất nhiều trường để bạn thêm vào
  • Như là tên, email, số điện thoại,
  • Bạn click vào là sẽ ra tiếp.

D: hoàn tất form thì ấn save

cài đặt các trường cơ bản trong contact form 7
cài đặt các trường cơ bản trong contact form 7

Một ví dụ cho form liên hệ cơ bản trong contact form 7

Mình có làm một ví dụ nhỏ cho mẫu liên hệ contact form 7 như sau:

mẫu ví dụ contact form 7 cơ bản

mẫu ví dụ contact form 7 cơ bảntrên đó:

  • Phần tên mẫu contact:
  • Phần mã form:
  • Phần nội dung form:

Giải thích: dấu * phần nội dung form làm cho người nhập bắt buộc phải nhập nội dung thông tin vào trường đó thì form mới có tác dụng.

cài đặt thông tin nội dung email cho người nhận form liên hệ

điều này là bắt buộc, vì nếu không thì form điền xong vứt đi không ai nhận à? điều này không đúng. Vậy bạn hãy cài đặt như sau để nhận được emial mỗi khi có ai đó điền vào form này

cài đặt thông tin nội dung nhận email cho contact form 7
cài đặt thông tin nội dung nhận email cho contact form 7

Các bạn chuyển qua tab: Email để bắt đầu cấu hình email nhé. Ở đây bạn lưu ý 2 vấn đề:

  • là mail người nhận là: TO, thì nếu bạn muốn email nhận thông tin là [email protected] thì cho vào đây. Và cái form và subject không quan trọng, bạn chỉnh lại cho hợp lý là được. Và wordpress của bạn phải gửi dc email nhé, chứ nếu không thì toi. Bạn tham khảo bài viết cài đặt gửi mail băng Smtp cho wordpress mình viết nhé.
  • Bạn có nhìn thấy các trường:
    không? đó là các trường thông tin và form của bạn nhận được. Nên là bạn chèn các trường đó vào phần Message Body nhé. Vậy là xong rồi đó.

Phần 3: thêm reCapcha vào wordpress trong contact form 7

phần này giúp các form của bạn không bị spam thôi. Để người gửi cho bạn thực sự là con người không phải là bot. Bạn có thể bỏ qua bước này nế thấy không cần thiết.

Đầu tiên chọn Contact -> intergration -> setup và mở trang google recapcha ra.

cài đặt recapcha cho wordpress
cài đặt recapcha cho wordpress

ở trang google recapcha ta sẽ lấy được 2 mã: là site key và secret key. Để điền vào wordpress.

site key và secret key cho recapcha
site key và secret key cho recapcha

Ấn hoàn tất, là ta có recapcha cho contact form 7. lưu ý là recapcha chỉ hoạt động cho những form nào có trường [recapcha] nhé.

Phần 4: làm đẹp contact form 7

mình cũng làm nhiều contact form 7 rồi, tùy biến cũng nhiều. Nhưng ít form contact đẹp nhưng vì không muốn add thêm plguin nữa(sợ nặng web). Nên toàn code thôi, cho nhẹ và đơn giản. Mình hướng dẫn các bạn làm: chia contact form thành 2 cột, tùy biến thành 1 cột full luôn dòng.

Cài đặt và tùy biến contact form 7 thành 2 cột ( contact form 7 to 2 colums at same line):

các bạn tạo form như bình thường, tuy nhiên sử dụng đoạn HTML sau làm khung cho form. Ở đây 2 trường first-name ở bên trái và last name ở bên phải nhé.

Và chèn ddaonj css sau và theme:

tùy biến plugin contact form 7 thành 1 cột rộng full ( contact form 7 – 1 colums at full row)

sử dụng đoạn HTMl sau cho form contact của bạn:

và sử dụng đoạn mã css:

cuối cùng trang điểm 1 chút và chỉnh lại một chú ta có bản full contact form 7 như sau:

kèm theo đó là đoạn CSS cho theme:

Cuối cùng ta được kết quả như trang liên hệ của @nghiart: https://nghiart.com/lien-he/

Form liên hệ của nghiart
Form liên hệ của nghiart

 

Chúc các bạn thành công, nếu khó khăn hay khúc mắc gì thì để lại comment hoặc liên hệ với mình.

Phần 5: các ý tưởng cho trang liên hệ của bạn:

hold on, bạn thấy tẻ nhạt vì dùng contact form 7 như của mình. Bạn có thể tham khảo một số các trang web mà mình sưu tầm có các mẫu liên hệ khá đẹp:

http://www.headlampcreative.com

http://www.headlampcreative.com
http://www.headlampcreative.com

 

http://www.reverenddanger.com

http://www.reverenddanger.com
http://www.reverenddanger.com

 

https://hitdigital.com.br

https://hitdigital.com.br
https://hitdigital.com.br

 

 

http://www.reputationradar.it/contatti
http://www. reputationradar.it/contatti

 

http://andotrucktulsa.com/

http://andotrucktulsa.com/#contacthot
http://andotrucktulsa.com/#

 

Plugin Contact form 7 - wordpess

Dánh giá Plugin Contact form 7

Plugin contact form 7, một trình tạo form liên hệ mạnh và phổ biến nhất hiện tại

  • Tính phổ biến
  • Dễ sử dụng
  • Tính tùy biến
  • Hỗ trợ
Overall
4.5

Pros

  • Dễ sử dụng
  • Phổ biến
  • Thường xuyên cập nhật

Cons

  • khá khó tùy biến cho người mới sử dụng