VIG Digital
arrow_back Tất cả bài viết
WORDPRESS 16 tháng 10, 2023 · 5 phút đọc

Huong dan Contact Form 7 chuyen nghiep

Contact Form 7 (CF7) la plugin tao form pho bien nhat tren WordPress hien nay. Voi uu diem la mien phi, de su dung, gan nhu cac website WordPress deu dung CF7 de nhan contact tu nguoi doc website, chuyen thong tin ve admin va tu dong phan hoi.

Tuy nhien, de phat huy het hieu qua cua Contact Form va su dung mot cach chuyen nghiep, ban van can thuc hien nhieu buoc quan trong.

1. Cai dat Contact Form 7

CF7 la plugin mien phi co san trong thu vien WordPress. Ban cai vao Plugin -> Add new va tim kiem voi tu khoa ‘Contact Form 7’. Sau khi cai dat xong plugin, ban nhan vao nut Kich hoat de bat dau su dung CF7. Sau khi cai dat xong neu ban thay trong Menu Dashboard co muc Form lien he la dung.

2. Tao form va su dung form

Them form moi

Tu Dashboard -> Form lien he -> Tao form moi.

Cau truc cac field trong CF7

Mot form mau bao gom:

  • Label: nhan cua field de mo ta thong tin cho field
  • text, email, textarea: cac loai field dang van ban, email, doan van
  • Dau *: co nghia la field bat buoc phai dien
  • your-name, your-email: ID cua field, can khac nhau de tien dong bo thong tin
  • placeholder: text minh hoa ben trong field
  • submit: nut gui thong tin

3. Cai dat SMTP

De gui duoc email tu website, ban can su dung giao thuc SMTP. Cac buoc cai dat:

  1. Tao password app cho tai khoan Gmail hoac email khac
  2. Cai dat plugin SMTP nhu Simple SMTP hoac WP SMTP
  3. Dien cac thong tin can thiet: Mail Server, SSL/TLS, Port, Username, Password

Sau khi cai dat xong, hay gui thu mot email tu plugin de chac chan rang ban da cau hinh dung SMTP.

4. Cai dat email gui cho admin

De cai dat email gui cho admin, ban vao chinh sua form va chon tab Cau hinh mail.

Thong tin can dien:

  • Mail nhan: Email nhan thu. Neu nhieu email thi cach nhau bang dau ”,”
  • Mail gui: Email gui thu. Nen dien dung email trong SMTP de khong bi danh gia phishing
  • Tieu de: Tieu de cua email
  • Additional Header: Su dung reply-to neu ban muon reply lai voi dia chi khac
  • Message body: Noi dung ben trong email. Dung cau truc [field_id] de CF7 tu dien gia tri field vao email

Sau khi dien day du thong tin, hay dien form de dam bao cai dat dung.

5. Cai dat email phan hoi nguoi dien form

Contact Form 7 cho phep cai dat email thu 2 de gui noi dung khac den dia chi khac. Thong thuong se su dung de phan hoi lai nguoi dien form, cam on, gui tai lieu hoac hen trao doi.

Trong Cau hinh mail, keo xuong duoi cuoi va chon Cau hinh mail kieu 2. Luu y rang mail nhan de gia tri [your-email] de CF7 gui email cho nguoi dien form.

Ben trong noi dung, ban co the su dung HTML de chen link hoac in dam, in nghieng.

6. Cai dat ket noi Contact Form 7 voi Google Sheets

Mac dinh CF7 chi gui email, nhung dieu nay rui ro vi email co the vao spam hoac he thong gap su co. Day du lieu ve Google Sheets la cach don gian nhung hieu qua de luu tru va quan ly thong tin.

Cai dat plugin

Ban vao Plugins, tim kiem “CF7 Google Sheets Connector” va cai vao.

Cau hinh CF7 Google Sheets Connector

Form lien he -> Google Sheets.

Ban can cap quyen cho plugin truy cap vao Google Sheet. Nen dung tai khoan email it quan trong de cap quyen, sau do share quyen truy cap cho cac email khac.

Sau khi cap quyen thanh cong, ban tro lai Form can ket noi. Ban se thay co 1 tab ten Google Sheets xuat hien.

Ban can dien:

  • Google Sheet Name: ten cua file Google Sheet
  • Google Sheet ID: ID tu URL
  • Google Sheet Tab Name: ten cua tab
  • Google Tab ID: ID cua tab

Trong Google Sheet, dien thong tin hang dau la cac ID cua cac field. Sau khi setup chinh xac, test lai ket qua.

7. Cai dat pop-up

Mac dinh, Contact Form 7 co mot thong bao nho ben duoi form. Thong bao nay doi khi kho thay. De xuat la dung pop-up de thong bao den nguoi dung.

Cach don gian la dung plugin Popups — Submission Messages For Contact Form 7.

8. Cai dat Event Tracking cho GA4

Event Tracking la cach ban mot event len Google Analytics 4 de tracking hieu qua cua Form. Day la buoc phuc tap, doi hoi kinh nghiem voi Google Tag Manager va Google Analytics.

Truoc khi cai dat, can cai dat san GTM va ket noi GA4 voi GTM.

Tao Tag Submission

Khi CF7 submit thanh cong, CF7 se tao event wpcf7mailsent. Ban can track event trong GTM truoc khi day sang GA4 bang Data Layer.

Tag Type: Custom HTML

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
});
</script>

Trigger: All Pages

Trigger cf7submission khi gui mail thanh cong

Tao 1 Trigger moi, type la Custom Event. Catch event name la cf7submission do Data Layer o tren sinh ra.

Ban 1 event len Google Analytics 4

Tao 1 Tag moi. Muc tieu la khi Trigger duoc cf7submission, no se ban 1 event name la cf7_submission len event cua GA4.