2 Bước Thêm Chọn Tỉnh Thành Vào Contact Form 7

Hey men! Tự dưng đang ngồi lướt facbook thì thấy một số bạn cần thêm bộ chọn Tỉnh Thành – Quận Huyện – Phường Xã Vào Contact Form 7. Mình thấy cũng hay chắc cũng nhiều nơi hướng dẫn nhưng có thể dài dòng nên mình sẽ hướng dẫn các bạn Thêm Chọn Tỉnh Thành Vào Contact Form 7 một cách rất là nhanh. Chỉ 3 phút thôi.

Thêm Chọn Tỉnh Thành Vào Contact Form 7

Bước 1: Các bạn vào chỉnh sửa ctf7 và thêm đoạn code sau vào:

/* Code thêm vào Contact Form 7*/
<div class="form-row">
<div class="column-half">Thành phố [select city id:city "Chọn"]</div>
<div class="column-half">Quận huyện [select district id:district "Chọn"]</div>
</div>

<div class="form-row">
<div class="column-full">Phường xã [select ward id:ward "Chọn"]</div>
</div>

/* Code html này các bạn có thể tùy biến thêm vào bất cứ đâu */
<div>
<select id="city">
<option value="" selected>Chọn tỉnh thành</option>           
</select>
          
<select id="district">
<option value="" selected>Chọn quận huyện</option>
</select>

<select id="ward">
<option value="" selected>Chọn phường xã</option>
</select>
 </div>   

Đoạn trên mình thêm bộ chọn select vào contact from 7. Các bạn có thể thay đổi tùy chỉnh nhưng bắt buộc phải có những phần sau:

[select city id:city “Chọn”]

[select district id:district “Chọn”]

[select ward id:ward “Chọn”]

Bước 2: Các bạn copy đoạn code SCRIPTS sau và thêm vào trong theme của mình. Ví dụ mình dùng theme Flatsome thì chọn: Flatsome -> Advanced -> Global Settings -> FOOTER SCRIPTS

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script>
	var citis = document.getElementById("city");
var districts = document.getElementById("district");
var wards = document.getElementById("ward");
var Parameter = {
  url: "https://raw.githubusercontent.com/kenzouno1/DiaGioiHanhChinhVN/master/data.json", 
  method: "GET", 
  responseType: "application/json", 
};
var promise = axios(Parameter);
promise.then(function (result) {
  renderCity(result.data);
});

function renderCity(data) {
  for (const x of data) {
	var opt = document.createElement('option');
	 opt.value = x.Name;
	 opt.text = x.Name;
	 opt.setAttribute('data-id', x.Id);
	 citis.options.add(opt);
  }
  citis.onchange = function () {
    district.length = 1;
    ward.length = 1;
    if(this.options[this.selectedIndex].dataset.id != ""){
      const result = data.filter(n => n.Id === this.options[this.selectedIndex].dataset.id);

      for (const k of result[0].Districts) {
		var opt = document.createElement('option');
		 opt.value = k.Name;
		 opt.text = k.Name;
		 opt.setAttribute('data-id', k.Id);
		 district.options.add(opt);
      }
    }
  };
  district.onchange = function () {
    ward.length = 1;
    const dataCity = data.filter((n) => n.Id === citis.options[citis.selectedIndex].dataset.id);
    if (this.options[this.selectedIndex].dataset.id != "") {
      const dataWards = dataCity[0].Districts.filter(n => n.Id === this.options[this.selectedIndex].dataset.id)[0].Wards;

      for (const w of dataWards) {
		var opt = document.createElement('option');
		 opt.value = w.Name;
		 opt.text = w.Name;
		 opt.setAttribute('data-id', w.Id);
		 wards.options.add(opt);
      }
    }
  };
}
	</script>

Cảm ơn các bạn đã ghé thăm. Chúc các bạn thành công!