Nội dung

Thêm Tỉnh thành phố quận huyện phường xã vào contact form 7

3 năm trước, Plugin, Plugin netweb, 4123 Lượt xem

Hello xin chào các bạn! tiện nay đang làm cái sợt tìm kiếm cho bất động sản tiện làm luôn cái plugin thêm Tỉnh thành phố quận huyện phường xã vào contact form 7, 1 tính năng mở rộng hay cho contact form 7 áp dụng cho việt nam, tiện mình làm rồi dùng luôn cho nhiều web cho dễ

Tích hợp select2 lên theme để chạy plugin cho đẹp

Thêm file css select2 trên thẻ </head> của theme bạn đang dùng

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

Chèn trên thẻ </body> file footer.php của theme

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
Link cdn

Hướng dẫn sử dụng plugin thêm tỉnh thành phố

Sau khi active plugin các bạn vào mịc contact form sẽ thấy hiển thị 3 trường city-netweb-dropdown, district-netweb drop-down, ward-netweb drop-down các bạn có thể thêm trường như form bình thường, hoặc nhanh thì các bạn dùng code mẫu mình chia sẻ bên dưới chèn thẳng vào cho nhanh nhé

Form mẫu cho plugin 

<div class="container form-tinh-thanh">
	<div class="row">
		<div class="col-sm-12">

			Tỉnh thành phố <span class="red"> *</span>
			[netweb_city* thanh-pho]

			Quận Huyện <span class="red"> *</span>
			[netweb_district* quan-huyen]

			Phường xã <span class="red"> *</span>
			[netweb_ward* phuong-xa]

			Họ và tên <span class="red"> *</span>
			[text* ho-ten id:ho-ten placeholder "Nhập họ tên"]


			Điện thoại <span class="red"> *</span>
			[tel* sdt id:phone placeholder "Nhập điện thoại"]

			[submit id:submitTP "Gửi yêu cầu"]

		</div>
	</div>
</div>

thêm file css cấu hình cho form các bạn cấu hình tùy thích ở ngoài nhé chèn vào file style.css của theme bạn đang dùng

.select2-container .select2-selection--single {
height: 34px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 3px 0 0 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 33px !important;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}

.form-tinh-thanh input {
    width: 100%;
    height: 34px;
    padding: 8px;
    border: 1px solid #99A;
    border-radius: 5px;
}
.form-tinh-thanh input#submitTP {
    width: 100%;
    background: #0d5ba7;
    font-size: 19px;
    height: 43px;
}

Để sử dụng tính năng quản lý database như hình dưới các bạn cài đặt thêm plugin Contact Form 7 Database Addon

Tải Plugin Contact Form 7 Database Addon

Hình ảnh sau khi submit form
Link demo plugin netweb đang dùng luôn!
Plugin có phí 199k liên hệ zalo mua plugin

Bài viết mới cập nhập

  • Hướng dẫn Plugin floating contact

    Hướng dẫn Plugin floating contact

    10 tháng trước, 338 Lượt xem

    Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

  • Backup Yandex Mail

    Backup Yandex Mail

    12 tháng trước, 228 Lượt xem

    Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo
Chủ đề liên quan theo Tag
, , , ,

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)