×

Tạo trang liên hệ cho WordPress với Google Forms

Liên hệ bằng Google Forms?

Thông thường nếu bạn sử dụng WordPress để tạo trang web thì có rất nhiều plugin hỗ trợ bạn trong việc tạo một biểu mẫu liên hệ, tuy nhiên đó là giải pháp cơ bản mà một người quản lý web có thể sử dụng, với những thứ cơ bản như vậy thì chúng ta nên áp dụng những phương pháp tối ưu cho website (giãn sử dụng  nhiều plugin cùng lúc). Cáo Đêm hiện tại đã bỏ việc sử dụng plugin để làm biểu mẫu liên hệ, mà đang áp dụng phương pháp nhúng Google Forms vào web, thì dưới đây là cách làm.  

Ví dụ: https://caodem.com/lien-he

Cách tạo biểu mẫu liên hệ bằng Google Forms

Cách 1: Tạo trang liên hệ trên WordPress

Tạo trang liên hệ cho WordPress với Google Forms
Truy cập vào Trình quản lý Admin > Trang > Thêm trang mới.
Tạo trang liên hệ cho WordPress với Google Forms
Đặt tên cho trang, sau đó chọn công cụ soạn thảo HTML.
Tạo trang liên hệ cho WordPress với Google Forms
Dán đoạn code bên dưới vào trang liên hệ của bạn.

Code tạo trang liên hệ cho WordPress

<div><iframe id="hidden_iframe" style="display: none;" name="hidden_iframe"></iframe>
<div><form name="contact-form" id="myForm" action="https://dia-chi-google-form/formResponse" method="POST" target="hidden_iframe"> <!-- nhập địa chỉ Google form -->
<div style="font-weight:bold;font-size:24px;">GỬI THÔNG TIN LIÊN HỆ</div>
<b id="demo"></b>
<div class="ten">
<input class="tenlh" id="tenlh" name="entry.number1" required="" type="text" value="" placeholder="Họ và tên"><!-- nhập số họ và tên -->
</div>
<div class="email">
<input class="emaillh" id="emaillh" name="entry.number2" required="" type="text" value="" placeholder="Địa chỉ email"><!-- nhập số email -->
</div>
<div class="noidung">
<textarea class="noidunglh" id="noidunglh" cols="25" name="entry.number3" rows="5" placeholder="Nội dung gửi cho chúng tôi"></textarea><!-- nhập số nội dung -->
</div>
<div class="nut-gui-form-di"><button id="nutgui" onclick="ihoan()" >Gửi ngay cho chúng tôi</button>
</div>
</form></div>
</div>
<br>
<style>
input.tenlh, input.emaillh, textarea.noidunglh{border-radius: 10px !important;border:2px solid #333 !important;background:#f1f1f1 !important;margin-top:20px;width:100%;outline: none;font-size:15px !important;}
#demo{color:#0c0;font-size:16px;}
button#nutgui{background:#333 !important; color:#fff !important;padding:5px !important; border-radius:25px !important;font-size:15px !important;}
button#nutgui:hover{background:#0c0 !important;}

</style>
<script>
function ihoan() {
var t = document.getElementById("tenlh").value;
var e = document.getElementById("emaillh").value;
var n = document.getElementById("noidunglh").value;
if (t == '') {
document.getElementById("demo").innerHTML = "Nhập họ và tên!";
return false;
}
if (e == '') {
document.getElementById("demo").innerHTML = "Nhập địa chỉ email!";
return false;
}
if (n == '') {
document.getElementById("demo").innerHTML = "Nhập nội dung!";
return false;
}
document.getElementById("demo").innerHTML = "Gửi liên hệ thành công";
var frm = document.getElementsByName('contact-form')[0];
frm.submit();
frm.reset();
return false;
}
</script>

Chú ý:
Bạn cần phải điền các thông số sau đây lấy từ biểu mẫu Google Forms, chú ý cách lấy ở bên dưới nhé.
https://dia-chi-google-form/formResponse  thay thế đường dẫn này bằng đường dẫn Google Forms (chú ý dòng chữ màu xanh này phải đứng sau địa chỉ Google Forms nhé).
Đại chỉ Google Forms thường có dạng: https://docs.google.com/forms/d/e/1FAIpQLSdY-XjlgrJEzxDmPDuDmIMnXkhxwY56Ga1wNMtG_MZxX0x0EA/viewform (phần màu xanh này bạn xóa đi nhé).
number1 thay bằng số tương ứng với trường họ và tên.
number2 thay bằng số tương ứng trường email.
number3 thay bằng số tương ứng trường nội dung.

Cách 2: Tạo Shortcode và thêm vào trang liên hệ

Bạn sao chép đoạn code bên dưới dán vào file function.php trong thư mục theme mà bạn đang sử dụng.

// Shortcode tao lien he
function taolienhe() {
ob_start();?>
<div><iframe id="hidden_iframe" style="display: none;" name="hidden_iframe"></iframe>
<div><form name="contact-form" id="myForm" action="https://dia-chi-google-form/formResponse" method="POST" target="hidden_iframe"> <!-- nhập địa chỉ Google form -->
<div style="font-weight:bold;font-size:24px;">GỬI THÔNG TIN LIÊN HỆ</div>
<b id="demo"></b>
<div class="ten">
<input class="tenlh" id="tenlh" name="entry.number1" required="" type="text" value="" placeholder="Họ và tên"><!-- nhập số họ và tên -->
</div>
<div class="email">
<input class="emaillh" id="emaillh" name="entry.number2" required="" type="text" value="" placeholder="Địa chỉ email"><!-- nhập số email -->
</div>
<div class="noidung">
<textarea class="noidunglh" id="noidunglh" cols="25" name="entry.number3" rows="5" placeholder="Nội dung gửi cho chúng tôi"></textarea><!-- nhập số nội dung -->
</div>
<div class="nut-gui-form-di"><button id="nutgui" onclick="ihoan()" >Gửi ngay cho chúng tôi</button>
</div>
</form></div>
</div>
<br>
<style>
input.tenlh, input.emaillh, textarea.noidunglh{border-radius: 10px !important;border:2px solid #333 !important;background:#f1f1f1 !important;margin-top:20px;width:100%;outline: none;font-size:15px !important;}
#demo{color:#0c0;font-size:16px;}
button#nutgui{background:#333 !important; color:#fff !important;padding:5px !important; border-radius:25px !important;font-size:15px !important;}
button#nutgui:hover{background:#0c0 !important;}
</style>
<script>
function ihoan() {
var t = document.getElementById("tenlh").value;
var e = document.getElementById("emaillh").value;
var n = document.getElementById("noidunglh").value;
if (t == '') {
document.getElementById("demo").innerHTML = "Nhập họ và tên!";
return false;
}
if (e == '') {
document.getElementById("demo").innerHTML = "Nhập địa chỉ email!";
return false;
}
if (n == '') {
document.getElementById("demo").innerHTML = "Nhập nội dung!";
return false;
}
document.getElementById("demo").innerHTML = "Gửi liên hệ thành công";
var frm = document.getElementsByName('contact-form')[0];
frm.submit();
frm.reset();
return false;
}
</script>
<?php
$list_post = ob_get_contents();

ob_end_clean();
return $list_post;
}
add_shortcode( 'lienhe', 'taolienhe' );

Chú ý:
Bạn cần phải điền các thông số sau đây lấy từ biểu mẫu Google Forms, chú ý cách lấy ở bên dưới nhé.
https://dia-chi-google-form/formResponse  thay thế đường dẫn này bằng đường dẫn Google Forms (chú ý dòng chữ màu xanh này phải đứng sau địa chỉ Google Forms nhé).
Đại chỉ Google Forms thường có dạng: https://docs.google.com/forms/d/e/1FAIpQLSdY-XjlgrJEzxDmPDuDmIMnXkhxwY56Ga1wNMtG_MZxX0x0EA/viewform (phần màu xanh này bạn xóa đi nhé).
number1 thay bằng số tương ứng với trường họ và tên.
number2 thay bằng số tương ứng trường email.
number3 thay bằng số tương ứng trường nội dung.

Tạo trang liên hệ cho WordPress với Google Forms
Bạn có thể thêm code Shortcode vào file function.php qua trình quản lý admin của WordPress.
Tạo trang liên hệ cho WordPress với Google Forms
Với cách 2 này bạn tạo một trang mới và đặt tên là liên hệ, sau đó viết nội dung Shortcode như sau [lienhe /] biểu mẫu liên hệ của bạn ngay lập tức sẽ hiển thị trên trang đó.

Cách tạo Google Forms và cách lấy thông tin đưa vào code

Tạo trang liên hệ cho WordPress với Google Forms
Đầu tiên hãy truy cập vào google.com đăng nhập bằng tài khoản sử dụng để nhận mail liên hệ. Nhấn vào hình đại diện góc phải màn hình, chọn Google Drive.
Tạo trang liên hệ cho WordPress với Google Forms
Tạo mới một biểu mẫu.
Tạo trang liên hệ cho WordPress với Google Forms
1. Đặt tên cho biểu mẫu liên hệ.
2. Tạo trường Họ và tên.
3. Chọn kiểu dữ liệu nhập vào (đối với tên, email, số điện thoại thì nên sử dụng Trả lời ngắn).
4. Tích chọn nội dung là bắt buộc (Nếu bạn gạt nút này thì trường này bắt buộc phải nhập mới có thể gửi được nội dung).
5. Tạo mới một trường.
Tạo trang liên hệ cho WordPress với Google Forms
Riêng trường Nội dung thì bạn nên để kiểu dữ liệu là Đoạn nhé.
Tạo trang liên hệ cho WordPress với Google Forms
Sau khi đã tạo xong biểu mẫu gồm 3 trường là Họ và tên, Email, Nội dung.
1. Chọn nút Gửi bên góc phải.
2. Chọn vào Link.
3. Sao chép địa chỉ biểu mẫu Google Forms.
Tạo trang liên hệ cho WordPress với Google Forms
Biểu mẫu Google Forms hiển thị ra màn hình, bạn click chuột phải và chọn Xem nguồn trang.
Tạo trang liên hệ cho WordPress với Google Forms
Dán đường link biểu mẫu Google Form vào trình duyệt web để truy cập.
Chú ý: Đoạn link trong khung đỏ chính là đường link của Google Forms (hãy copy và dán vào code ở trên thay thế đoạn mã https://dia-chi-google-form).
Tạo trang liên hệ cho WordPress với Google Forms
Kéo xuống gần dưới cùng của source code và tìm tới 3 dòng như hình trên. Với 3 dòng trên sẽ tương ứng với 3 số code Họ và tên, Email, Nội dung, mà bạn cần điền vào code ở trên (entry.number1, entry.number2, entry.number3) chú ý không bỏ chữ entry. đi nhé, mà điền như thế này (entry.1982689092).

Cấu hình thông báo biểu mẫu liên hệ gửi về Email

Tạo trang liên hệ cho WordPress với Google Forms
Quay lại Google Forms, vào 1. Câu trả lời > 2. Tạo bảng tính.
Tạo trang liên hệ cho WordPress với Google Forms
Điền tên cho bảng tính, rồi nhấn nút Tạo.
Tạo trang liên hệ cho WordPress với Google Forms
Ở bảng tính chọn vào menu Công cụ > Trình chỉnh sửa tập tin.

Copy đoạn code bên dưới rồi dán vào Trình chỉnh sửa tập tin (nhớ xóa sạch rồi dán).

function lienhe(e)
{
// Thay thế bằng địa chỉ email của bạn
var email = "nhomcaodem@gmail.com";
// Tiêu đề của email được gửi về
var subject = "Liên hệ mới từ Cáo Đêm.....";
var s = SpreadsheetApp.getActiveSheet();
var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];
var message = "";
for ( var keys in columns ) {
var key = columns[keys];
if ( e.namedValues[key] && (e.namedValues[key] != "") ) {
message += key + ' :: '+ e.namedValues[key] + "\n\n";
}
}
MailApp.sendEmail(email, subject, message);
}

Thay địa chỉ email của bạn vào để biểu mẫu liên hệ gửi về email. 
Đặt tiêu đề cho email gửi về.

Tạo trang liên hệ cho WordPress với Google Forms
Chọn vào menu Chỉnh sửa > Các kích hoạt của dự án hiện tại.
Tạo trang liên hệ cho WordPress với Google Forms
Đặt tên cho dự án mới, rồi nhấn ok.
Tạo trang liên hệ cho WordPress với Google Forms
Ở trang tạo dự án, bạn chọn vào nút Thêm trình kích hoạt.
Tạo trang liên hệ cho WordPress với Google Forms
Chọn đầy đủ các thông số như hình trên rồi lưu lại là hoàn tất.

Kết luận:
Với phương pháp trên bạn có thể giảm bớt 1 plugin không cần thiết để tối ưu hơn cho website.
Ở trên mình chỉ tạo ra ba trường cơ bản, bạn có thể thêm vào nhiều trường khác nếu muốn (chú ý sửa thêm ở code để thêm).
Có thể sử dụng code trên để tạo ra shortcode và bạn có thể thêm vào nhiều nơi mà bạn muốn.
Chúc các bạn thành công!

1220
Bài cùng chủ đề
15 Bình luận
  1. Minh Quang khách

    Quá tiện, đồng bộ trên google driver vừa lưu trữ được thông tin, tại vừa đỡ active 1 plugin.

    Cám ơn Ad đã chia sẻ kinh nghiệm này nhé.

    1. ihoan CÁO
      Minh Quang @

      Cảm ơn bạn, nói chung là mình nên sử dụng càng ít plugin thì càng tốt, vừa tối ưu tốc độ, bảo mật tốt hơn tránh bị lỗ hổng từ plugin, giảm xung đột plugin với bản cập nhật wordpress, lúc restore bản cập nhật cũng nhanh và tránh được nhiều lỗi hơn

  2. Dat khách

    Em dùng themes flastsome đưa cái này vào nó k ra nút gửi anh ạ! 🙁 a có thể giúp em không

    1. ihoan CÁO
      Dat @

      Ý là cái nút nó không được đẹp hày là nó không hiển thị, vì cái nút ở code trên mình chưa css màu bạn à, cần thì mình bổ sung cho

      1. dat khách
        ihoan @

        nó k hiển thị anh ạ. e có thể gửi ảnh qua đâu ạ.

    1. ihoan CÁO
      dat @

      Mình đã cập nhật cách 2 là sử dụng Shortcode rồi, bạn thử cách đó xem sao nhé

    1. ihoan CÁO
      dat @

      ok. cảm ơn bạn đã quan tâm về bài viết nhé

  3. Thế khách

    Hay quá, cái này làm được khối thứ khác ý chứ, mình đang tính áp dụng vào web đặt xe

  4. Hoàng khách

    Bài viết rất hay, cảm ơn nhiều nhé

  5. Khánh Lý Quý CÁO

    Ô cái này ngon nghẻ đấy, bữa nào kiếm cái nào áp dụng mới được ad nhĩ