3 bước tạo khung liên hệ cho blogger tuyệt đẹp theo mẫu docs.google có kèm captcha

Posted on by mtoplistChuyên mục:Top List
Hôm  nay mình sẽ hướng dẫn các bạn cách tạo một khung contact theo mẫu của google tuyệt đẹp chỉ với 3 bước mà thôi. Đặc biệt hơn nữa khung contact này còn có tích hợp thêm captcha bảo mật của google nên bảo đảm được độ xác thực cao của thông tin gửi đến



Bước 1. Tạo Form Liên hệ

Các bạn truy cập Google Biểu mẫu từ địa chỉ

Hướng dẫn tạo trang Liên hệ cho Blog với Form Google tùy chỉnh tích hợp reCAPTCHA v2

  • (1): Ghi tiêu đề cho mẫu
  • (2): Ghi mô tả
  • (3): Click chọn Trả lời ngắn tương đương với thẻ input, Đoạn tương đương với thẻ textarea
  • (4): Ghi tiêu đề của thẻ
  • (5): Chọn Bắt buộc nếu yêu cầu phải điền vào thẻ đó
  • (6): Giữ chuột kéo sắp xếp giữa các thẻ
  • (7): Thêm thẻ mới
  • (8): Xóa thẻ

Ảnh ví dụ sau khi tạo Form

Nhìn vào ảnh có thể xác định được có tồng cộng 4 thẻ input và 1 thẻ textarea và tất cả các thẻ đều yêu cầu Bắt buộc phải điền.

Đến đây các bạn nhấp vào biểu tượng Xem trước phía trên bên phải để mở ra tab mới trình duyệt nó sẽ có dạng như ảnh

Tại đây các bạn click tổ hợp phím Ctrl + U trên bàn phím máy tính để mở tab view-source: của trang đó. Mình cung cấp sẵn một mẫu form tùy chỉnh, các bạn copy các thẻ input vào thay thế

<form name="Contact-Form" action="" onsubmit="return validateform();" method="POST" target="_blank" id="">
  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ input -->

      <span class="fa fa-user"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ input -->

      <span class="fa fa-envelope"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ input -->    
 
      <span class="fa fa-phone"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ input -->

      <span class="fa fa-font"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ textarea -->

      <span class="fa fa-align-left"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb recapcha">

    <div class="g-recaptcha" data-sitekey="your_site_key"></div>

  </div>

  <div class="col-sm-mb">

    <input type="submit" value="Gửi liên hệ"/>

  </div>

</form>

-Tại trang view-source đầu tiên các bạn click tổ hợp phím Ctrl + F gõ vào ô tìm kiếm từ khóa <form nhấn Enter, bên trong thẻ form có link dạng https://docs.google.com/forms/…/formResponse, các bạn copy vào action=”” bên trong thẻ form ở mẫu trên.

Tương tự các bạn cũng copy id trong thẻ form đó vào thẻ form mẫu

-Tiếp theo các bạn lại gõ tìm kiếm từ khóa type=”text” và copy nguyên mẫu thẻ input vào mẫu thay thế cho đoạn <!– Thẻ input –>  bên trên, ví dụ

<input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Họ tên" aria-describedby="i.desc.1390653728 i.err.1390653728" name="entry.1624308118" value="" required="" dir="auto" data-initial-dir="auto" data-initial-value=""/>

Cuối cùng các bạn gõ tìm kiếm từ khóa <textarea copy nguyên mẫu thay thế cho <!– Thẻ textarea –> của mẫu trên, ví dụ:

<textarea class="quantumWizTextinputPapertextareaInput exportTextarea" jsname="YPqjbf" data-rows="1" tabindex="0" aria-label="Nội dung" jscontroller="gZjhIf" jsaction="input:Lg5SV;ti6hGc:XMgOHc;rcuQ6b:WYd;" required name="entry.1527296560" dir="auto" data-initial-dir="auto" data-initial-value="" aria-describedby="i.desc.1887520106 i.err.1887520106"></textarea>

Các bạn phải lưu ý cứ mỗi câu Trả lời ngắn là 1 thẻ input, với Đoạn nhập nội dung chinh cuối cùng  là thẻ textarea

Khi đã copy thay thế đầy đủ vào mẫu, các bạn thêm thẻ placeholder=”” vào các thẻ input có type=”text” và thẻ textarea,
vi dụ placeholder=”Họ tên”, placeholder=”Email”,…

2. Chèn mã reCAPTCHA v2

Các bạn truy cập địa chỉ

Mẫu đăng ký điền có dạng

Libellé
bietko.com

Type de reCAPTCHA
reCAPTCHA version 2
  Case à cocher “Je ne suis pas un robot”

Domaines
bietko.com
sub.bietko.com (Thêm miền sub hoặc miền khác đều được)

Propriétaires
Để trống hoặc thêm địa chỉ tài khoản quản lý khác

Khi điền xong click Enregistrer đăng ký mới trang sẽ chuyển hướng đến giao diện quản lý và hiển thị sẵn 2 khóa: trang web và bí mật, các bạn chỉ copy khóa trong mục mình tô đâm bên ảnh dưới

Các bạn copy khóa vào mẫu ở trên của mình đoạn data-sitekey=”your_site_key”

3. Tạo trang Liên hệ cho Blog

Các bạn đăng nhập vào Blog của mình, truy cập tab Trang tạo trang mới hoặc chỉnh sửa trang đã có, các bạn chuyển qua khung soạn thảo HTML sau đó copy tất cả mẫu bên dưới vào trang

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

<style type='text/css'>

form[name=Contact-Form] .col-sm-mb{margin-bottom:15px}

form[name=Contact-Form] .col-sm-mb:last-child{margin-bottom:0}

form[name=Contact-Form] .field{display:block;position:relative}

form[name=Contact-Form] input,form[name=Contact-Form] textarea{font-family:Roboto,helvetica,arial,sans-serif;font-size:14px;outline:none}

form[name=Contact-Form] input[type="text"],form[name=Contact-Form] textarea{background-color:#fdfdfd;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #d3d3d3;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;transition:all 0.3s ease}

form[name=Contact-Form] input[type="text"]{height:42px;padding:0 10px 0 40px}

form[name=Contact-Form] textarea{height:120px;vertical-align:top;resize:vertical;padding:10px 10px 10px 40px}

form[name=Contact-Form] input[type="submit"]{display:inline-block;background-color:#1a73e8;color:#fff;border-radius:3px;padding:9px 18px;text-transform:uppercase;border:none;line-height:normal;cursor:pointer;position:relative;z-index:2;overflow:hidden;-webkit-appearance:none;cursor:pointer}

form[name=Contact-Form] .field input[type="text"]:focus,form[name=Contact-Form] .field input[type="text"].focus,form[name=Contact-Form] .field textarea:focus,form[name=Contact-Form] .field textarea.focus{background:#fff;border-color:#ea4242}

form[name=Contact-Form] .field input[type="text"]:focus ~ .bar,form[name=Contact-Form] .field input[type="text"].focus ~ .bar,form[name=Contact-Form] .field textarea:focus ~ .bar,form[name=Contact-Form] .field textarea.focus ~ .bar{width:100%;opacity:1;filter:alpha(opacity=100)}

form[name=Contact-Form] .field input[type="text"]:focus ~ .fa,form[name=Contact-Form] .field input[type="text"].focus ~ .fa,form[name=Contact-Form] .field textarea:focus ~ .fa,form[name=Contact-Form] .field textarea.focus ~ .fa{color:#fff;background:#ea4242;border-color:#ea4242}

form[name=Contact-Form] .field .fa{position:absolute;top:0;bottom:0;left:0;text-align:center;width:30px;line-height:38px;color:rgba(141,199,63,0.2);pointer-events:none;background:#fff;border:1px solid #ddd;border-right:none;-webkit-border-radius:2px 0 0 2px;-moz-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px}

form[name=Contact-Form] .field .fa,form[name=Contact-Form] .field .bar{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease}

form[name=Contact-Form] .field .bar{position:absolute;right:0;bottom:0;left:0;margin:auto;background:#ea4242;width:0;height:2px;opacity:0;filter:alpha(opacity=0);-webkit-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px}

</style>

<script async='' defer='' src='https://www.google.com/recaptcha/api.js'></script>

<script>

function validateform() {

  var captcha_response = grecaptcha.getResponse();

  if (captcha_response.length == 0) {

    alert("Vui lòng chứng minh rằng bạn không phải là rô-bốt");

    return false;

  }

  return true;

}

</script>

Liên hệ công việc hoặc yêu cầu trợ giúp với Biết Không<br />

<br />

<form name="Contact-Form" action="" onsubmit="return validateform();" method="POST" target="_blank" id="">

  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ input 1 --> 
      <span class="fa fa-user"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ input 2 --> 
      <span class="fa fa-envelope"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ input 3 -->    
 
      <span class="fa fa-phone"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ input 4  --> 
      <span class="fa fa-font"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb">

    <div class="field">

      <!-- Thẻ textarea -->
      <span class="fa fa-align-left"></span>

      <span class="bar"></span>

    </div>

  </div>

  <div class="col-sm-mb recapcha">

    <div class="g-recaptcha" data-sitekey="your_site_key"></div>

  </div>

  <div class="col-sm-mb">

    <input type="submit" value="Gửi liên hệ"/>

  </div>

</form>

Thay thế các thẻ input, thẻ textarea và data-sitekey, trước khi Xuất bản trang hoặc Cập nhật trang. Các bạn xem demo:
Chúc các bạn làm thành công một contact form chuyên nghiệp cho trang web của mình nhé

Blogger có tích hợp sẵn mẫu contact form, Tuy nhiên mẫu có sẵn này trông khá cứng nhắc và không được chuyên nghiệp cho lắm.Hôm nay mình sẽ hướng dẫn các bạn cách tạo một khung contact theo mẫu của google tuyệt đẹp chỉ với 3 bước mà thôi. Đặc biệt hơn nữa khung contact này còn có tích hợp thêm captcha bảo mật của google nên bảo đảm được độ xác thực cao của thông tin gửi đếnDemo mẫu liên hệ mình đã tao xong các bạn xem có ok không nhé: https://www.bietko.com/p/formnamecontact-form.html Các bạn truy cập Google Biểu mẫu từ địa chỉ https://docs.google.com/forms/ đăng nhập bằng tải khoản Google, nhấp vào biểu tượng dấu + bắt đầu tạo Form mớiHướng dẫn tạo trang Liên hệ cho Blog với Form Google tùy chỉnh tích hợp reCAPTCHA v2Ảnh ví dụ sau khi tạo FormNhìn vào ảnh có thể xác định được có tồng cộng 4 thẻ input và 1 thẻ textarea và tất cả các thẻ đều yêu cầu Bắt buộc phải điền.Đến đây các bạn nhấp vào biểu tượng Xem trước phía trên bên phải để mở ra tab mới trình duyệt nó sẽ có dạng như ảnhTại đây các bạn click tổ hợp phím Ctrl + U trên bàn phím máy tính để mở tab view-source: của trang đó. Mình cung cấp sẵn một mẫu form tùy chỉnh, các bạn copy các thẻ input vào thay thế-Tại trang view-source đầu tiên các bạn click tổ hợp phím Ctrl + F gõ vào ô tìm kiếm từ khóanhấn Enter, bên trong thẻ form có link dạng https://docs.google.com/forms/…/formResponse, các bạn copy vàobên trong thẻ form ở mẫu trên.Tương tự các bạn cũng copy id trong thẻ form đó vào thẻ form mẫu-Tiếp theo các bạn lại gõ tìm kiếm từ khóavà copy nguyên mẫu thẻ input vào mẫu thay thế cho đoạn bên trên, ví dụCuối cùng các bạn gõ tìm kiếm từ khóacopy nguyên mẫu thay thế cho của mẫu trên, ví dụ:Các bạn phải lưu ý cứ mỗi câu Trả lời ngắn là 1 thẻ input, với Đoạn nhập nội dung chinh cuối cùng là thẻ textareaKhi đã copy thay thế đầy đủ vào mẫu, các bạn thêm thẻvào các thẻ input có type=”text” và thẻ textarea,vi dụ placeholder=”Họ tên”, placeholder=”Email”,…Các bạn truy cập địa chỉ https://www.google.com/recaptcha/admin/create đăng nhập và tạo cho mình một tên miền, lưu ý với mỗi tên miền đều phải đăng ký và tương tự nếu sử dụng sub cũng phải đăng ký mới.Mẫu đăng ký điền có dạngLibelléType de reCAPTCHAreCAPTCHA version 2Case à cocher “Je ne suis pas un robot”Domaines(Thêm miền sub hoặc miền khác đều được)PropriétairesĐể trống hoặc thêm địa chỉ tài khoản quản lý khácKhi điền xong click Enregistrer đăng ký mới trang sẽ chuyển hướng đến giao diện quản lý và hiển thị sẵn 2 khóa: trang web và bí mật, các bạn chỉ copy khóa trong mục mình tô đâm bên ảnh dướiCác bạn copy khóa vào mẫu ở trên của mình đoạn data-sitekey=”your_site_key”Các bạn đăng nhập vào Blog của mình, truy cập tab Trang tạo trang mới hoặc chỉnh sửa trang đã có, các bạn chuyển qua khung soạn thảo HTML sau đó copy tất cả mẫu bên dưới vào trangThay thế các thẻ input, thẻ textarea và data-sitekey, trước khi Xuất bản trang hoặc Cập nhật trang. Các bạn xem demo: https://www.bietko.com/p/formnamecontact-form.html Chúc các bạn làm thành công một contact form chuyên nghiệp cho trang web của mình nhé

mtoplist