Responsive Chat Box UI Design using only HTML & CSS

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 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 realtime 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.

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 these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <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">
            <!-- Due to more textarea fields I got an error so I've changed the textarea name into changeit..Change the tag name to use it -->
            <changeit cols="30" rows="10" placeholder="Explain your queries.." required></changeit>
          </div>
<div class="field">
            <button type="submit">Start Chat</button>
          </div>
</form>
</div>
</div>
</body>
</html>

CSS FILE:

@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);
}

Video Tutorial of Responsive Chat Box UI Design

You might like this:

Responsive Chatbox Widget [Source Codes]

Thanks for visiting, Keep visiting.

8 Comments

Post a Comment

About Us

Contact Form