Hello readers, Today in this blog you’ll learn how to create a Responsive Chat Box using only HTML & CSS. Earlier I have shared a blog on how to create a Multi-Step Form with Step Progress Bar using JavaScript. And now I’m going to create a Responsive Chat Box.
You may have seen a chat widget on different websites. A chat widget is a window on your website that allows visitors to have a chat with a sales or service in real-time. A chat widget can also be combined into social media pages and mobile apps. Chat widgets are created using different programming languages like JavaScript, PHP, Python, etc.
In this program (Responsive Chat Box UI Design), at first, on the webpage, there is only a messenger button on the right bottom corner and when you click on that button then the chatbox form appears with sliding animation and the icon of messenger also changed into a cross-sign icon. In the chatbox form, there are three input fields i.e. Name, Email, and Textarea) and a Button. This chat box is fully based on HTML & CSS, so when you filled up your info and click on the start chat button, this form won’t submit your info anywhere.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Chat Box UI Design).
Video Tutorial of Responsive Chat Box UI Design
In the video, you have seen the Responsive Chatbox Widget and I hope you’ve understood the basic codes behind creating this program. This is a pure CSS program so if you’re a beginner, you can also create this type of chatbox form but if you know backend programming languages like PHP, then you can add advanced features in this program like chat in real-time with your users.
If you like this program (Responsive Chatbox Widget) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program in your HTML pages, websites, and projects.
You might like this:
Responsive Chatbox Widget [Source Codes]
To create this program (Responsive Chatbox Widget). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Chat Box Design | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="checkbox" id="click">
<label for="click">
<i class="fab fa-facebook-messenger"></i>
<i class="fas fa-times"></i>
</label>
<div class="wrapper">
<div class="head-text">
Let's chat? - Online
</div>
<div class="chat-box">
<div class="desc-text">
Please fill out the form below to start chatting with the next available agent.
</div>
<form action="#">
<div class="field">
<input type="text" placeholder="Your Name" required>
</div>
<div class="field">
<input type="email" placeholder="Email Address" required>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" placeholder="Explain your queries.." required></textarea>
</div>
<div class="field">
<button type="submit">Start Chat</button>
</div>
</form>
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
overflow: hidden;
background: #f2f2f2;
}
#click{
display: none;
}
label{
position: absolute;
right: 30px;
bottom: 20px;
height: 55px;
width: 55px;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
text-align: center;
line-height: 55px;
border-radius: 50px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
label i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
}
label i.fas{
opacity: 0;
pointer-events: none;
}
#click:checked ~ label i.fas{
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) rotate(180deg);
}
#click:checked ~ label i.fab{
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) rotate(180deg);
}
.wrapper{
position: absolute;
right: 30px;
bottom: 0px;
max-width: 400px;
background: #fff;
border-radius: 15px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
opacity: 0;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
#click:checked ~ .wrapper{
opacity: 1;
bottom: 85px;
pointer-events: auto;
}
.wrapper .head-text{
line-height: 60px;
color: #fff;
border-radius: 15px 15px 0 0;
padding: 0 20px;
font-weight: 500;
font-size: 20px;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
}
.wrapper .chat-box{
padding: 20px;
width: 100%;
}
.chat-box .desc-text{
color: #515365;
text-align: center;
line-height: 25px;
font-size: 17px;
font-weight: 500;
}
.chat-box form{
padding: 10px 15px;
margin: 20px 0;
border-radius: 25px;
border: 1px solid lightgrey;
}
.chat-box form .field{
height: 50px;
width: 100%;
margin-top: 20px;
}
.chat-box form .field:last-child{
margin-bottom: 15px;
}
form .field input,
form .field button,
form .textarea textarea{
width: 100%;
height: 100%;
padding-left: 20px;
border: 1px solid lightgrey;
outline: none;
border-radius: 25px;
font-size: 16px;
transition: all 0.3s ease;
}
form .field input:focus,
form .textarea textarea:focus{
border-color: #fc83bb;
}
form .field input::placeholder,
form .textarea textarea::placeholder{
color: silver;
transition: all 0.3s ease;
}
form .field input:focus::placeholder,
form .textarea textarea:focus::placeholder{
color: lightgrey;
}
.chat-box form .textarea{
height: 70px;
width: 100%;
}
.chat-box form .textarea textarea{
height: 100%;
border-radius: 50px;
resize: none;
padding: 15px 20px;
font-size: 16px;
}
.chat-box form .field button{
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-size: 18px;
font-weight: 500;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
transition: all 0.3s ease;
}
.chat-box form .field button:active{
transform: scale(0.97);
}
That’s all, now you’ve successfully created a Responsive Chat Box UI Design using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
