Chia sẽ liên hệ đẹp cho web Điện Máy mới nhất 2024

Lliên hệ đẹp cho web Điện Máy – Là một dạng contact được show ra trang để tiện cho việc khách hàng muốn liên hệ với Sale hoặc admin trong trường hợp cần thiết, Từ form liên hệ này chúng ta có thể tùy chỉnh theo ý muốn của mình để việc Hộ trợ khách hoặc Sale hàng hóa được tốt nhất. Để kho contact của bạn thêm phong phú hôm nay tớ share thêm 1 form mà anh em tháy đẹp có yêu cầu RIp lại giúp, Sẳn tớ viết bài share luôn cho anh em nào cần nhé. Để làm được vui long đọc hết bài nhé hj , Hoặc nếu muốn làm được trên bất kỳ web nào xem videos của tớ để biết cách làm nhé

Chia sẽ liên hệ đẹp cho web Điện Máy mới nhất

Để bạn dể hình dung bạn xem qua liên hệ đẹp trên pc và mobile hình bến dưới nhé

Contac Form Dien May Pc — Chia sẽ liên hệ đẹp cho web Điện Máy mới nhất

Contac Form Dien May Mobile — Chia sẽ liên hệ đẹp cho web Điện Máy mới nhất

Cách Chèn liên hệ đẹp cho web Điện Máy mới nhất

trong flatsome bạn làm theo đường dẫn

Advanced / Global Settings ngay FOOTER SCRIPTS ta dán code này vào ( code bên dưới nhé )

<!--- Contact -->

<div id="quick_support"><a class="social-hl" title="Hotline" target="_blank" rel="noreferrer" href="tel:1900 0255"><img height="40" src="https://baochauelec.com/assets/images/social/call.png" alt="call"><span> Hotline <strong>1900 0255</strong></span></a><a class="social-hl social-hlkt" title="Hotline" target="_blank" rel="noreferrer" href="tel:0868500255"><img height="40" src="https://baochauelec.com/assets/images/social/icon-ky-thuat.png" alt="call"><span> Hỗ trợ kỹ thuật <strong>0868 500 255</strong></span></a><a class="social-hl social-fb" title="Fanpage" target="_blank" rel="noreferrer" href="https://www.facebook.com/baochauelec"><img height="40" src="https://baochauelec.com/assets/images/social/facebook.png" alt="facebook"><span> Fanpage </span></a><a class="social-hl social-msg" title="Chat Messenger" rel="noreferrer" href="http://m.me/baochauelec" target="_blank"><img src="https://baochauelec.com/assets/images/social/messager.png" height="40"><span> Chat FB </span></a><a class="social-hl social-zalo" title="Chat Zalo" target="_blank" rel="noreferrer" href="https://zalo.me/1721348802370464937"><img height="40" src="https://baochauelec.com/assets/images/social/zalo.png" alt="zalo"><span> Chat Zalo </span></a><a class="social-hl social-yt" title="Youtube Chanel" target="_blank" rel="noreferrer" href="https://www.youtube.com/channel/UCZNQMF8NNPNDOrocQPdrz2w"><img height="40" src="https://baochauelec.com/assets/images/social/youtube.png" alt="youtube"><span> Youtube </span></a><a class="social-hl social-tt" title="Tiktok Chanel" target="_blank" rel="noreferrer" href="https://www.tiktok.com/@baochauelec"><img height="40" src="https://baochauelec.com/assets/images/social/tiktok.png" alt="Tiktok"><span> Tiktok </span></a></div>

<style>
#quick_support {
    position: fixed;
    top: 180px;
    right: 5px;
    z-index: 100;
    transition: .5s all;
    text-align: center;
    width: 40px;
}
#quick_support a.social-hl {
    background-color: #13990A;
    font-size: 12px;
    text-align: center;
}
#quick_support a {
    display: flex;
    column-gap: 10px;
    background-color: #fff;
    align-items: center;
    margin: 5px 0;
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 50px;
    color: #fff;
    transition: all .3s ease;
    position: relative;
    right: 0;
}
#quick_support a>span {
    margin-right: 5px;
    white-space: nowrap;
}
#quick_support a.social-hl strong {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #ffd400;
}
#quick_support a.social-hl:hover {
    width: 160px;
    right: 100px;
}

#quick_support a:hover {
    z-index: 1;
}
#quick_support a.social-hl {
    background-color: #13990A;
    font-size: 12px;
    text-align: center;
}
#quick_support a {
    display: flex;
    column-gap: 10px;
    background-color: #fff;
    align-items: center;
    margin: 5px 0;
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 50px;
    color: #fff;
    transition: all .3s ease;
    position: relative;
    right: 0;
}@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
#quick_support {
    display: none;
}
}
</style>




<!--- Mobile -->
<ul class="helpbar"><li class="toggle_categories" id="toggle_categories"><a rel="nofollow" href="#"><i class="three_bar"></i> Menu </a></li><li><a target="_blank" rel="noreferrer" href="tel:1900 0255"><strong>1900 0255</strong> Gọi Tư Vấn </a></li><li><a target="_blank" rel="noreferrer" href="http://m.me/baochauelec"><i class="iconmobile-fbmsg"></i> Nhắn Tin </a></li><li><a target="_blank" rel="noreferrer" href="https://zalo.me/1721348802370464937"><i class="iconmobile-fzalo"></i> Chat Zalo </a></li><li class="showAdress"><a href="#"><i class="iconmobile-fmap"></i> Chỉ Đường </a></li></ul>



<style>
.helpbar {
    display: none;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

.helpbar {
  display: block !important;
    width: 100%;
    max-width: 640px;
    background: #fff;
    position: fixed;
    height: 60px;
    bottom: 0;
    z-index: 9;
    border: 1px solid #ececec;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0px;
}
.helpbar li {
    display: inline-block;
    float: left;
    width: 20%;
    text-align: center;
}
.helpbar li a {
    display: block;
    font-size: 13px;
}
.helpbar li.toggle_categories i {
    background: #ee3338;
    height: 3px;
    width: 35px;
    display: block;
    position: relative;
    margin: 15px auto;
}
.helpbar li.toggle_categories i:before {
    top: -6px;
}
.helpbar li.toggle_categories i:before, .helpbar li.toggle_categories i:after {
    content: "";
    background: #ee3338;
    height: 3px;
    width: 35px;
    display: block;
    position: absolute;
    left: 0;
}
.helpbar li a {
    display: block;
    font-size: 13px;
}
.helpbar li a strong {
    display: block;
    margin: 2px auto;
    line-height: 28px;
    overflow: hidden;
    color: #ee3338;
}.helpbar li i {
    width: 30px;
    height: 28px;
    display: block;
    margin: 2px auto;
}
[class^=iconmobile-], [class^=iconmobile-], [class*=iconmobile-] {
    background-image: url(https://baochauelec.com/assets/images/iconmb/iconmobile@2x.webp);
    background-image: url(https://baochauelec.com/assets/images/iconmb/iconmobile@2x.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    vertical-align: middle;
    background-size: 265px 65px;
}
.iconmobile-fbmsg {
    background-position: 0 -36px;
}
.iconmobile-fzalo {
    background-position: -30px -36px;
}
.iconmobile-fmap {
    background-position: -60px -36px !important;
}

}

</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

<div id="quick_support"><a class="social-hl" title="Hotline" target="_blank" rel="noreferrer" href="tel:1900 0255"><img height="40" src="https://baochauelec.com/assets/images/social/call.png" alt="call"><span> Hotline <strong>1900 0255</strong></span></a><a class="social-hl social-hlkt" title="Hotline" target="_blank" rel="noreferrer" href="tel:0868500255"><img height="40" src="https://baochauelec.com/assets/images/social/icon-ky-thuat.png" alt="call"><span> Hỗ trợ kỹ thuật <strong>0868 500 255</strong></span></a><a class="social-hl social-fb" title="Fanpage" target="_blank" rel="noreferrer" href="https://www.facebook.com/baochauelec"><img height="40" src="https://baochauelec.com/assets/images/social/facebook.png" alt="facebook"><span> Fanpage </span></a><a class="social-hl social-msg" title="Chat Messenger" rel="noreferrer" href="http://m.me/baochauelec" target="_blank"><img src="https://baochauelec.com/assets/images/social/messager.png" height="40"><span> Chat FB </span></a><a class="social-hl social-zalo" title="Chat Zalo" target="_blank" rel="noreferrer" href="https://zalo.me/1721348802370464937"><img height="40" src="https://baochauelec.com/assets/images/social/zalo.png" alt="zalo"><span> Chat Zalo </span></a><a class="social-hl social-yt" title="Youtube Chanel" target="_blank" rel="noreferrer" href="https://www.youtube.com/channel/UCZNQMF8NNPNDOrocQPdrz2w"><img height="40" src="https://baochauelec.com/assets/images/social/youtube.png" alt="youtube"><span> Youtube </span></a><a class="social-hl social-tt" title="Tiktok Chanel" target="_blank" rel="noreferrer" href="https://www.tiktok.com/@baochauelec"><img height="40" src="https://baochauelec.com/assets/images/social/tiktok.png" alt="Tiktok"><span> Tiktok </span></a></div>

<style>

#quick_support {

position: fixed;

top: 180px;

right: 5px;

z-index: 100;

transition: .5s all;

text-align: center;

width: 40px;

}

#quick_support a.social-hl {

background-color: #13990A;

font-size: 12px;

text-align: center;

}

#quick_support a {

display: flex;

column-gap: 10px;

background-color: #fff;

align-items: center;

margin: 5px 0;

height: 40px;

width: 40px;

overflow: hidden;

border-radius: 50px;

color: #fff;

transition: all .3s ease;

position: relative;

right: 0;

}

#quick_support a>span {

margin-right: 5px;

white-space: nowrap;

}

#quick_support a.social-hl strong {

display: block;

font-size: 14px;

font-weight: bold;

color: #ffd400;

}

#quick_support a.social-hl:hover {

width: 160px;

right: 100px;

}

#quick_support a:hover {

z-index: 1;

}

#quick_support a.social-hl {

background-color: #13990A;

font-size: 12px;

text-align: center;

}

#quick_support a {

display: flex;

column-gap: 10px;

background-color: #fff;

align-items: center;

margin: 5px 0;

height: 40px;

width: 40px;

overflow: hidden;

border-radius: 50px;

color: #fff;

transition: all .3s ease;

position: relative;

right: 0;

}@media only screen and (max-width: 48em) {

/*************** ADD MOBILE ONLY CSS HERE ***************/

#quick_support {

display: none;

}

</style>

<ul class="helpbar"><li class="toggle_categories" id="toggle_categories"><a rel="nofollow" href="#"><i class="three_bar"></i> Menu </a></li><li><a target="_blank" rel="noreferrer" href="tel:1900 0255"><strong>1900 0255</strong> Gọi Tư Vấn </a></li><li><a target="_blank" rel="noreferrer" href="http://m.me/baochauelec"><i class="iconmobile-fbmsg"></i> Nhắn Tin </a></li><li><a target="_blank" rel="noreferrer" href="https://zalo.me/1721348802370464937"><i class="iconmobile-fzalo"></i> Chat Zalo </a></li><li class="showAdress"><a href="#"><i class="iconmobile-fmap"></i> Chỉ Đường </a></li></ul>

<style>

.helpbar {

display: none;

}

@media only screen and (max-width: 48em) {

/*************** ADD MOBILE ONLY CSS HERE ***************/

.helpbar {

display: block !important;

width: 100%;

max-width: 640px;

background: #fff;

position: fixed;

height: 60px;

bottom: 0;

z-index: 9;

border: 1px solid #ececec;

padding: 5px;

box-sizing: border-box;

overflow: hidden;

margin: 0px;

}

.helpbar li {

display: inline-block;

float: left;

width: 20%;

text-align: center;

}

.helpbar li a {

display: block;

font-size: 13px;

}

.helpbar li.toggle_categories i {

background: #ee3338;

height: 3px;

width: 35px;

display: block;

position: relative;

margin: 15px auto;

}

.helpbar li.toggle_categories i:before {

top: -6px;

}

.helpbar li.toggle_categories i:before, .helpbar li.toggle_categories i:after {

content: "";

background: #ee3338;

height: 3px;

width: 35px;

display: block;

position: absolute;

left: 0;

}

.helpbar li a {

display: block;

font-size: 13px;

}

.helpbar li a strong {

display: block;

margin: 2px auto;

line-height: 28px;

overflow: hidden;

color: #ee3338;

}.helpbar li i {

width: 30px;

height: 28px;

display: block;

margin: 2px auto;

}

[class^=iconmobile-], [class^=iconmobile-], [class*=iconmobile-] {

background-image: url(https://baochauelec.com/assets/images/iconmb/[email protected]);

background-repeat: no-repeat;

display: inline-block;

height: 30px;

width: 30px;

line-height: 30px;

vertical-align: middle;

background-size: 265px 65px;

}

.iconmobile-fbmsg {

background-position: 0 -36px;

}

.iconmobile-fzalo {

background-position: -30px -36px;

}

.iconmobile-fmap {

background-position: -60px -36px !important;

}

</style>

Chú ý Chia sẽ liên hệ đẹp cho web Điện Máy mới nhất : thay số điện thoại và zalo thành của mình nhé

Nhớ download hình và úp lên host mình , sau đó lấy lại đường dẫn hình để chủ động tránh trường hợp trang người ta thay hình (xóa hình của ) hình web mình lỗi theo hi

( Link code full tại đây nhé https://codepen.io/Flatsome/pen/dyLGyQW )

Anh em có thể tham khảo demo của tớ tại : https://gumac.uxthemes.net

Cảm ơn anh em, nếu có thắc mắc vui lòng liên hệ tớ – Chúc anh em thành công