Thêm một số tùy chọn cho thẻ input trong Google Contact Form

Để hạn chế thư rác, spam ngoài yếu tố bảo mật bằng reCAPTCHA, người ta thường thêm các tùy chọn bắt buộc phải nhập ĐÚNG vào ô điền hay thẻ input của form liên hệ. Ngoài ra bạn có thể tùy biến thẻ input mặc định thành tùy chọn select hay nói cách khác thay vì phải nhập thì đơn giản là click chọn mục có sẵn hay sử dụng tùy chọn checkbox thay thế cho select đều được.

Dưới đây là một số tùy chọn cho các thẻ input: phần đánh dấu màu xanh được thêm

+ Thẻ input Email:

Copy


<input type="email" name="email" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" placeholder="Email *" value="" required=""/>

+ Thẻ input Điện thoại

Copy


<input type="text" name="phone" pattern="(\+84|0)\d{9,10}" placeholder="Điện thoại *"  value="" required=""/>

+ Thẻ input với tùy chọn select

Đây là tùy chọn mở rộng cho nên thay thế chọn một thẻ input có type="text" bất kỳ thay thế thành type="hidden" và thêm tùy chọn cho các mục có sẵn. Ví dụ:

Copy


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

  <div class="field themes_list">

    <button class="select" aria-label="Chọn mẫu cần mua" role="button" type="button">

    <span class="select_option">Chọn mẫu cần mua</span>

    <span class="select_arrow" role="presentation"><b role="presentation"></b></span>

    </button>

    <ul class="option hidden">

      <li>Chọn mẫu cần mua</li>

      <li>Transimex Business</li>

      <li>Mac Life Personal</li>

      <li>News Magazine</li>

      <li>Việt Blogger Material Design</li>

      <li>Việt Blogger Personal</li>

      <li>Việt Blogger Video</li>

    </ul>

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

    <input type="hidden" name="hidden" value="" required=""/>

  </div>

</div>

Tất nhiên khi thêm tùy chọn cho các mục có sẵn cần viết script chọn mục khi nhấp chọn

Copy


<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>//<![CDATA[

$('.themes_list ul li:first-child').on('click', function() {

  var text = $(this).text()

  $('.themes_list .select_option').text(text)

  $('.themes_list ul').addClass('hidden')

})

$('.themes_list ul li:not(:first-child)').each(function() {

  $(this).on('click', function(event) {

    var theme_name = $(event.target).text()

    $('.themes_list .select_option').text(theme_name)

    $('.themes_list input').attr('value', theme_name).attr('data-initial-value', theme_name)

    $('.themes_list ul').addClass('hidden')

  })

})

$('.themes_list .select').click(function(e) {

  e.stopPropagation()

  $('.themes_list ul').toggleClass('hidden')

})

$('.themes_list ul').click(function(e) {

  e.stopPropagation()

})

$('html').click(function() {

  $('.themes_list ul').addClass('hidden')

})

//]]></script>

Ngoài ra cũng cần thêm yếu tố xác thực chọn mục trước khi submit form

Copy


<script>//<![CDATA[

function validateform() {

  var text = $('.themes_list .select_option').text();

  if (text == 'Chọn mẫu cần mua') {

    alert("Bạn vui lòng chọn mẫu cần mua");

    return false;

  }

  return true;

}

//]]></script>

Từ 3 tùy chọn ở trên ta có mẫu Google Form như sau:

#HTML của trang Liên hệ:

Copy


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

<style>

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] .select,form[name=Contact-Form] textarea{font-family:Roboto,helvetica,arial,sans-serif;font-size:14px;color:#555;outline:none}

form[name=Contact-Form] .select{text-align:left;cursor:pointer}

form[name=Contact-Form] .select_arrow{position:absolute;height:100%;top:50%;width:20px;transform:translateY(-50%);right:10px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column;align-items:center;justify-content:center}

form[name=Contact-Form] .select_arrow::before{content:'';display:block;border-right:5px solid transparent;border-left:5px solid transparent;border-bottom:5px solid #999999;margin-bottom:2px}

form[name=Contact-Form] .select_arrow::after{content:'';display:block;border-right:5px solid transparent;border-left:5px solid transparent;border-top:5px solid #999999}

form[name=Contact-Form] .select_arrow b{border-color:transparent transparent #888 transparent;border-style:solid;border-width:0 4px 5px 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0;display:none}

form[name=Contact-Form] .themes_list ul{position:absolute;background:#ffffff;border:1px solid #ddd;margin:0;z-index:9;border-radius:3px;max-height:500px;min-width:200px;width:100%;overflow-x:hidden;overflow-y:auto;-webkit-box-shadow:0 12px 15px 0 rgba(0,0,0,0.24);box-shadow:0 12px 15px 0 rgba(0,0,0,0.24)}

form[name=Contact-Form] .themes_list ul li{cursor:pointer;font-size:14px;padding:8px 15px 8px 40px;display:block;list-style-type:none}

form[name=Contact-Form] .themes_list ul li:first-child,form[name=Contact-Form] .themes_list ul li:hover{background-color:#f7f7f7}

form[name=Contact-Form] .exportInput,form[name=Contact-Form] .select,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] .exportInput,form[name=Contact-Form] .select{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;min-width:90px;background-color:#1a73e8;color:#fff;border-radius:3px;padding:0;text-transform:uppercase;border:none;height:33px;line-height:33px;white-space:nowrap;overflow:hidden;-webkit-appearance:none;cursor:pointer}

form[name=Contact-Form] #status{padding-left:15px;vertical-align:middle;white-space:nowrap;overflow:hidden}

form[name=Contact-Form] .field .exportInput:focus,form[name=Contact-Form] .field .exportInput.focus,

form[name=Contact-Form] .field .select:focus,form[name=Contact-Form] .field .select.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.exportInput:focus ~ .bar,form[name=Contact-Form] .field .exportInput.focus ~ .bar,

form[name=Contact-Form] .field .select:focus ~ .bar,form[name=Contact-Form] .field .select.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 .exportInput:focus ~ .fa,form[name=Contact-Form] .field .exportInput.focus ~ .fa,

form[name=Contact-Form] .field .select:focus ~ .fa,form[name=Contact-Form] .field .select.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 src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

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

<script>//<![CDATA[

function validateform() {

  var text = $('.themes_list .select_option').text();

  if (text == 'Chọn mẫu cần mua') {

    alert("Bạn vui lòng chọn mẫu cần mua");

    return false;

  }

  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;

  } else {

    var message = document.getElementById('status')

    message.innerHTML = "Thư của bạn đã được gửi đi";

    message.style.color = "red";

    document.getElementById('submit').disabled = true;

  }

  return true;

}

//]]></script>

Bạn vui lòng điền đầy đủ thông tin dưới đây trước khi Gửi đi. Chúng tôi cam kết thông tin của bạn được bảo mật tuyệt đối.<br />

<br />

<form name="Contact-Form" action="https://docs.google.com/forms/u/2/d/e/1FAIpQLSdyuQ1n36Y_SjdlVUxNbFIcWxkVK7vTpO31Smj8JA0RsnLIpw/formResponse" onsubmit="return validateform();" method="POST" target="hidden_iframe" id="mG61Hd">

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

    <div class="field">

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

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

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

    </div>

  </div>

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

    <div class="field">

      <input type="email" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Email" aria-describedby="i.desc.837808090 i.err.837808090" name="entry.564702130" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" placeholder="Email *" value="" required dir="auto" data-initial-dir="auto" data-initial-value=""/>

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

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

    </div>

  </div>

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

    <div class="field">

      <input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Điện thoại" aria-describedby="i.desc.189591344 i.err.189591344" name="entry.86794325" pattern="(\+84|0)\d{9,10}" required placeholder="Điện thoại *" value="" dir="auto" data-initial-dir="auto" data-initial-value=""/>

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

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

    </div>

  </div>

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

    <div class="field themes_list">

      <button class="select" aria-label="Chọn mẫu cần mua" role="button" type="button">

        <span class="select_option">Chọn mẫu cần mua</span>

        <span class="select_arrow" role="presentation"><b role="presentation"></b></span>

      </button>

      <ul class="option hidden">

        <li>Chọn mẫu cần mua</li>

        <li>Transimex Business Landing Page - Giá 500.000 VND</li>

        <li>Mac Life Personal - Giá 200.000 VND</li>

        <li>News Magazine - Giá 300.000 VND</li>

        <li>Việt Blogger Magazine Mẫu 1 - Giá 300.000 VND</li>

        <li>Việt Blogger Magazine Mẫu 2 - Giá 300.000 VND</li>

        <li>Việt Blogger Magazine Mẫu 3 - Giá 300.000 VND</li>

        <li>Việt Blogger Magazine Mẫu 4 - Giá 300.000 VND</li>

        <li>Việt Blogger Material Design Mẫu 1 - Giá 200.000 VND</li>

        <li>Việt Blogger Material Design Mẫu 2 - Giá 200.000 VND</li>

        <li>Việt Blogger Material Design Mẫu 3 - Giá 200.000 VND</li>

        <li>Việt Blogger Personal Mẫu 2 cột - Giá 200.000 VND</li>

        <li>Việt Blogger Personal Mẫu 3 cột - Giá 200.000 VND</li>

        <li>Việt Blogger Video Mẫu 1 - Giá 300.000 VND</li>

        <li>Việt Blogger Video Mẫu 2 - Giá 300.000 VND</li>

      </ul>

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

      <input type="hidden" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Chọn mẫu cần mua" aria-describedby="i.desc.1149383233 i.err.1149383233" name="entry.1297210542" value="" required dir="auto" data-initial-dir="auto" data-initial-value=""/>

    </div>

  </div>

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

    <div class="field">

      <textarea class="quantumWizTextinputPapertextareaInput exportTextarea" jsname="YPqjbf" data-rows="1" tabindex="0" aria-label="Yêu cầu hỗ trợ" jscontroller="gZjhIf" jsaction="input:Lg5SV;ti6hGc:XMgOHc;rcuQ6b:WYd;" placeholder="Yêu cầu hỗ trợ" name="entry.1693037901" dir="auto" data-initial-dir="auto" data-initial-value="" aria-describedby="i.desc.1106067650 i.err.1106067650"></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="6LdtS5QUAAAAAO_KGrMgCNWhEGfvnbAC4TsueEAR"></div>

  </div>

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

    <input id="submit" type="submit" value="Mua ngay"/>

    <span id="status">(*) Thông tin bắt buộc phải nhập</span>

  </div>

</form>

<iframe name="hidden_iframe" width="0" height="0" border="0" style="display: none;"></iframe>

<script>//<![CDATA[

$('.themes_list ul li:first-child').on('click', function() {

  var text = $(this).text()

  $('.themes_list .select_option').text(text)

  $('.themes_list ul').addClass('hidden')

})

$('.themes_list ul li:not(:first-child)').each(function() {

  $(this).on('click', function(event) {

    var theme_name = $(event.target).text()

    $('.themes_list .select_option').text(theme_name)

    $('.themes_list input').attr('value', theme_name).attr('data-initial-value', theme_name)

    $('.themes_list ul').addClass('hidden')

  })

})

$('.themes_list .select').click(function(e) {

  e.stopPropagation()

  $('.themes_list ul').toggleClass('hidden')

})

$('.themes_list ul').click(function(e) {

  e.stopPropagation()

})

$('html').click(function() {

  $('.themes_list ul').addClass('hidden')

})

//]]></script>

+ Output:

Contact Form

(*) Thông tin bắt buộc phải nhập

+ Thẻ input với tùy chọn checkbox

Cũng giống như tùy chọn select, vì đây là tùy chọn mở rộng cho nên thay thế chọn một thẻ input có type="text" bất kỳ thay thế thành type="hidden" và thêm tùy chọn cho các mục có sẵn. Ví dụ:

Copy


<div class="form-check">

  <input class="form-check-input" type="radio" id="radio1" name="cmethod" value="Landing Page" checked=""/>

  <label class="form-check-label" for="radio1">Landing Page</label>

</div>

<div class="form-check">

  <input class="form-check-input" type="radio" id="radio2" name="cmethod" value="Magazine"/>

  <label class="form-check-label" for="radio2">Magazine</label>

</div>

<div class="form-check">

  <input class="form-check-input" type="radio" id="radio3" name="cmethod" value="Personal"/>

  <label class="form-check-label" for="radio3">Personal</label>

</div>

<div class="form-check">

  <input class="form-check-input" type="radio" id="radio4" name="cmethod" value="Video"/>

  <label class="form-check-label" for="radio4">Video</label>

</div>

<div class="form-check">

  <input class="form-check-input" type="radio" id="radio5" name="cmethod" value="Material Design"/>

  <label class="form-check-label" for="radio5">Material Design</label>

</div>

<input class="check-value" type="hidden" name="hidden" value="Landing Page" />

Và tất nhiên khi thêm tùy chọn cho các mục có sẵn cần viết script chọn mục khi nhấp chọn:

Copy


<script>//<![CDATA[

$('.form-check-input').each(function() {

  $(this).on('click', function(event) {

    var check_value = $(event.target).attr('value');

    $('.check-value').attr('value', check_value);

  });

});

//]]></script>