Box liên hệ là một phần tử giao diện quan trọng trong ứng dụng hoặc trang web, giúp người dùng dễ dàng liên lạc với chủ sở hữu. Thông thường, box liên hệ bao gồm các trường thông tin như tên, email và nội dung tin nhắn. Khi người dùng điền đầy đủ thông tin và nhấn nút “Gửi”, hệ thống sẽ chuyển dữ liệu đến chủ sở hữu để xử lý hoặc phản hồi.
Hôm nay, nhanhmedia.com chia sẻ với bạn code tạo box liên hệ đẹp mà không cần sử dụng Plugin, được rồi, vào việc ngay nhé!😊
code tạo box liên hệ đẹp trong wordpress
Để anh em dễ hình dung cái box liên hệ nó sẽ trông như thế nào thì anh em có thế ngó qua con (https://natechgroup.vn/) chút nhé! Nếu ok thì tiếp tục😊
Dưới đây là cách hiển thị khi dùng code tạo box liên hệ đẹptrên phiên bản PC
Còn đây là khi được hiển thị trên Mobile:
Ok bắt đầu nào!
Bước 1: bạn cần thêm 1 file html trong UX Builder (Flatsome) hoặc Theme Builder (Elementor)
Bước 2:Việc còn lại chỉ là copy đoạn code phía dưới là chạy thôi 😊Chúc các bạn thành công!
<div class="nav-social PC d-md-block d-none">
<ul>
<li><a href="tel:0814621462" target=""><img src="https://zulihome.vn/wp-content/uploads/2022/12/Call.png"><br>Tổng đài</a></li>
<li><a href="https://www.facebook.com/messages/t/zulihome.com.vn" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/messenger-2.png"><br>Messenger</a></li>
<li><a href="https://zalo.me/2421753075440149504" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/Zalo.png"><br>Zalo</a></li>
<li class="register">
<a href="#lepopup-Form-dk-1" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/envelope.svg"><br>Đăng ký</a>
</li>
<li class="to-top-pc">
<a href="#" id="back-top" rel="nofollow" style="display: none;"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br>Back top</a>
</li>
</ul>
</div>
<!-- mobile-->
<div class="bottom-contact-mobile mobile d-md-none">
<ul>
<li><a href="tel:0814621462">
<img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-phone-mobile.png"><br>
<span>Gọi điện </span></a></li>
<li><a href="sms:0974713186">
<img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-sms-mobile.png"><br>
<span>Nhắn tin</span></a></li>
<li><a href="https://zalo.me/2421753075440149504">
<img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-zalo-mobile.png"><br>
<span>Chat zalo</span></a></li>
<li><a href="https://m.me/zulihome.com.vn">
<img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-mesenger-mobile.png"><br>
<span>Messenger</span></a></li>
<li class="to-top-pc">
<a href="#" id="back-to-top" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br><span>Back top</span></a>
</li>
</ul>
</div>
<style>
.d-md-none {
display: none;
}
.nav-social {
position: fixed;
right: 5px;
background: #fff;
border-radius: 5px;
width: auto;
z-index: 150;
top: 220px;
padding: 10px 0;
border: 1px solid #f2f2f2;
}
.nav-social ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav-social ul li {
border-bottom: 1px solid #d6d6d6;
padding-bottom: calc( .6em - 5px );
margin-bottom: .6em;
list-style: none;
text-align: center; }
.nav-social ul li:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.nav-social ul li img {
max-width: 25px;
max-height: 20px;
object-position: center;
object-fit: contain;
}
.nav-social ul li a {
padding: 5px 12px 5px 12px;
display: block;
text-align: center;
font-size: 11px;
line-height: 15px;
color: #000;
font-weight: 400;
max-width: 80px;
max-height: 60px;
text-decoration: none; }
.nav-social ul li img {
margin-bottom: 10px;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE ***************/
.PC {
display: none;
}
.bottom-contact-mobile {
display: block;
position: fixed;
bottom: 0;
background: white;
width: 100%;
z-index: 99;
box-shadow: 2px 1px 9px #dedede;
border-top: 1px solid #eaeaea;}
.bottom-contact-mobile ul {
display: flex;
justify-content: center;
margin: 0;
padding: 0; }
.bottom-contact-mobile ul li {
width: 20%;
flex-basis: 20%;
list-style: none;
text-align: center;
font-size: 13.5px; }
.bottom-contact-mobile ul li img {
width: 25px;
height: 20px;
object-position: center;
object-fit: contain;
margin-top: 10px;
margin-bottom: 3px;
}
.bottom-contact-mobile ul li span {
color: #000;
font-size: 12px;
}
}
</style>Tuy nhiên bạn cần chú ý thay đổi thành thông tin của mình nhé !