Responsive Chat Box UI Design using HTML and CSS

March 19, 2021
HTML/CSS
Responsive Chat Box UI Design using only HTML & CSS

Tutorial: How to Create a Responsive Chat Box UI Design using HTML and CSS

About How to Create a Responsive Chat Box UI Design using HTML and CSS

Hello readers. Today we are going to create a Responsive Chat Box UI Design using HTML and CSS. 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, at first, on the webpage, there is only a messenger button on the right bottom corner. When you click on that button, the chatbox form appears with sliding animation, and the icon of the messenger icon is also changed into the 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 entirely based on HTML & CSS, so when you filled up your info and click on the start chat button, this form won’t submit your information anywhere.

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.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CampCodes -->
<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 | CampCodes</title> -->
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <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);
}
Responsive Chat Box UI Design using HTML and CSS

Responsive Chat Box UI Design using HTML and CSS

Video Demonstration


Related Tutorial: Responsive Pricing Tables using only HTML & CSS

Download Here

Leave a Reply

Your email address will not be published. Required fields are marked *