Hướng dẫn thêm form liên lạc google docs vào blogger năm 2024

Việc lấy được số điện thoại của khách hàng rất quan trọng đối với web dịch vụ, còn số đúng hay sai thì chúng ta phải gọi lại xác minh mới biết chính xác được, nhưng yếu tố cần trước là lấy số điện thoại bằng cách tạo một biểu mẫu form cho khách hàng tự điền và gửi đi.

Hướng dẫn thêm form liên lạc google docs vào blogger năm 2024

Các trang web dịch vụ hiện nay sử dụng theme wordpress đều cài đặt plugin dạng này nhưng trong blogspot không có plugin nên chúng ta phải tự xây dựng biểu mẫu liên hệ bằng cách sử dụng biểu mẫu liên hệ của google do chúng ta tự tạo.

Giới thiệu về biểu mẫu yêu cầu gọi lại sử dụng google form

Giao diện bao gồm 2 phần:

1. Nút mở biểu mẫu nằm cố định góc dưới trái hoặc phải

2. Biểu mẫu form được đặt trong modal popup bị ẩn đi chỉ khi nào tác động vào button mới hiển thị

Cơ chế hoạt động

+ Sử dụng cookies: biểu mẫu sẽ tự động hiển thị sau một khoảng thời gian vài giây khi khách truy cập web lần đầu và sẽ tự động hiển thị trở lại nếu không chọn tắt biểu mẫu bằng nút đóng biểu mẫu.

+ Khi khách muốn mở biểu mẫu cần tác động vào nút mở biểu mẫu nằm cố định góc dưới trái hoặc phải

+ Khi khách điền số điện thoại, chọn khu vực và gửi đi thành công, biểu mẫu form sẽ được reset lại khi khách xác nhận thông báo trình duyệt hoặc click vào nút tắt biểu mẫu

+ Thông tin của khách sẽ được gửi đến biểu mẫu liên hệ của google

Hướng dẫn tạo biễu mẫu yêu cầu gọi lại sử dụng google form

Bước 1: Chèn code biểu mẫu trong template

Đặt đoạn code bên dưới vào trước thẻ đóng của template

Call back request>

 

  } else {

    setTimeout(function() {

      $('body').addClass('modal-open');

      $('.call-now').fadeOut();

    }, 5000)

  }

});

$('

callautoform .custom-radio').click(function() {

  var target = $(this)

  var $this = $(this).find('label').text();

  $(this).parent().find('input[type=hidden]').attr('value', $this);

});

$('

callautoform').on('submit', function() {

  $(this).addClass('processing');

  $('

button-call').attr('disabled','').text('Đang gửi...');

  setTimeout(function() {

    var r = confirm("Yêu cầu của bạn đã được gửi đi thành công!");

    if (r == true){

      $('

callautoform input[type=hidden]').attr('value', '');

      $('

button-call').removeAttr('disabled').text('Tư vấn ngay');

      $('

callautoform')[0].reset();

      $('.processing').removeClass('processing');

      $('body').removeClass('modal-open');

      $('.call-now').fadeIn();

      console.clear();

    } else {

      $('.modal-header .close').click(function() {

        $('

callautoform input[type=hidden]').attr('value', '');

        $('

button-call').removeAttr('disabled').text('Tư vấn ngay');

        $('

callautoform')[0].reset();

        $('.processing').removeClass('processing');

        $('body').removeClass('modal-open');

        $('.call-now').fadeIn();

        console.clear();

      });

    }

  }, 3000);

});

//]]>

/Call back request>

Cài đặt:

+ Thay

nằm góc phải thành
nếu muốn đặt nút gọi nằm góc trái

+ Thay màu của nút gọi

ff993f thành mã màu khác

+ Thay link ảnh của modal

  • Desktop: https://4.bp.blogspot.com/-IZZ-pEw1hpQ/XSSRrTW2BcI/AAAAAAAARdo/aIOFHy0biR0FE_jp2lg_2DJztEbznX4sgCLcBGAs/s1600/bg-call-to-action-desktop.png
  • Mobile: https://1.bp.blogspot.com/-GwcK-2tao2c/XSSSF8fSGGI/AAAAAAAARd0/cxac6Qi1epAS3G0aL6MqeIJcttrILq7MACLcBGAs/s1600/bg-call-to-action-mobile.jpg

Bước 2: Tạo biểu mẫu google form

Truy cập liên kết https://docs.google.com/forms/, đăng nhập bằng tài khoản google xong click vào dấu + để bắt đầu tạo biểu mẫu mới

Hướng dẫn thêm form liên lạc google docs vào blogger năm 2024

Thêm hai câu trả lời ngắn và không bắt buộc, đặt tên cho biểu mẫu xong chuyển qua mục CÂU TRẢ LỜI, nhấp vào biểu tượng ba chấm trên góc phải tích chọn "Nhận thông báo qua email cho các câu trả lời mới", ngoài ra có thể nhấp vào biểu tượng dấu + để tạo bảng tính.

Tiếp theo nhấp vào biểu tượng con mắt ở góc trên bên phải để chọn mở trang xem trước, tại trang này chuột phải trình duyệt chọn Xem nguồn trang (view-source), tại trang view-source nhấn tổ hợp phím Ctrl+ F gõ

https://docs.google.com/forms/u/2/d/e/1FAIpQLSc4KqvHbAkFFvD-wVVVFLDa2C5nLm0qT80pyKMfrbUslZyMiw/formResponse

Các bạn copy cái link form này lại.

Tiếp tục gõ type="text" trong trang tìm kiếm view-source nhấn enter, các bạn tìm trường name=""> trong thẻ input ví dụ entry.1952657597, các bạn nhớ có bao nhiêu câu Trả lời ngắn thì sẽ có bấy nhiêu thẻ input loại type="text". Các bạn thay link form và trường name trong các mục mình đánh dấu màu xanh trong code trên.