Contact Us for Beautiful Website Design

This article provides a sleek and beautiful contact code that can be easily copied and pasted onto a website. The code includes HTML, CSS, and JavaScript for creating a contact icon on a webpage. It is recommended to customize the contact information within the HTML code. Additionally, if the theme does not support Font Awesome 5, users should insert a CDN link into the header of the theme. The CSS code can be added to the style.css file of the theme or through additional CSS customization options. Overall, the article aims to help users successfully implement a stylish contact icon on their website.

In this post, I’ll be sharing a beautiful and lightweight contact code snippet that you can easily copy and paste into your website. Let’s dive into the code:

HTML Code

CSS Code

a i.ticon-zalo-circle2 {
    background: url(https://giaysihcm.com/wp-content/uploads/2021/11/icon-zalo-circle2.png) no-repeat !important;
    background-size: contain !important;
    width: 36px;
    height: 36px;
    display: block;
}
#support ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#support a {
    text-decoration: none;
    color: #333;
}

 #support a span {
    display: inline-block;
    vertical-align: top;
    padding-top: 15px;
}
/* Other CSS styles here */

JS Code

jQuery(document).ready(function () {
    jQuery("#iconChat").click(function () {
        jQuery('#option').toggle();
    });
    jQuery("#iconChat").click(function (e) {
        e.stopPropagation();
    });

    jQuery(document).click(function () {
        jQuery("#option").hide();
    });
});

Remember to customize the contact information inside the HTML code to fit your needs. If your theme doesn’t support Font Awesome 5, add this CDN link to the header of your theme:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

Here’s how to insert the code:

• Add the HTML and JS code to the Footer script section (you can use a plugin like Insert Header and Footer).
• Insert the CDN link in the Header script.
• Add the CSS code to your theme’s style.css or in the Custom CSS section.

Good luck with implementing this on your website!