Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
* {
 box-sizing: border-box;
}

body {
 margin: 0px;
 background-color: #ffffff;
}

/**Typeo CSS End**/
.widget-demo-sidebar, .widget-demo-sidebar * {
 --base-fm: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 --base-size: 16px;
 --title-size: 35px;
 --base-clr: #424242;
 --white-clr: #ffffff;
 --bkack-clr: #000000;
 --bdr-clr: #d8d8d8;
 --theme-clr: #6366f1;
 --bg-clr: #f5f5f5;
}

.widget-demo-sidebar {
 font-family: var(--base-fm);
 font-size: var(--base-size);
 background-color: var(--bg-clr);
}

.widget-demo-inner {
 display: flex;
 flex-direction: column;
 justify-content: center;
 margin: auto;
 max-width: 500px;
 align-content: center;
 text-align: center;
 height: 100vh;
}

.widget-demo-inner h2 {
 margin: 0px;
 font-size: 33px;
 color: var(--theme-clr);
}

/**Forms Widget Form**/
.cw-widget-btn {
 width: 60px;
 height: 60px;
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: center;
 border-radius: 100%;
 position: fixed;
 right: 20px;
 bottom: 20px;
 border: none;
 background-color: var(--theme-clr);
 color: var(--white-clr);
 cursor: pointer;
 box-shadow: #c4c4c4 0px 4px 10px;
}

.chatclose-icon {
 display: none;
}

.widget-btn-show .chatclose-icon {
 display: block;
}

.widget-btn-show .chatmess-icon {
 display: none;
}

/**Form Design**/
.widget-form-group {
 border-radius: 10px;
 overflow: hidden;
 max-width: 340px;
 width: 100%;
 position: fixed;
 right: 20px;
 bottom: 90px;
 background-color: var(--white-clr);
 box-shadow: #ccc 0 0 14px;
 transition: 0.5s all;
 pointer-events: none;
 opacity: 0;
}

.form-top {
 color: var(--white-clr);
 background-color: var(--theme-clr);
 text-align: center;
 padding: 20px 10px;
}

.form-top h4 {
 margin: 0px 0px 5px 0px;
 font-size: 20px;
 line-height: normal;
}

.form-group-main {
 padding: 15px 20px 5px 20px;
}

.form-group {
 width: 100%;
 margin: 8px 0;
 display: inline-block;
}

.form-control {
 width: 100%;
 padding: 12px 15px;
 border-radius: 4px;
 outline: none;
 line-height: normal;
 border: var(--bdr-clr) 1px solid;
 font-size: var(--base-size);
 font-family: var(--base-fm);
 color: var(--base-clr);
 transition: 0.5s all;
}

textarea.form-control {
 min-height: 100px;
 display: block;
}

.form-control::-webkit-input-placeholder {
 color: var(--base-clr);
}

.form-control:-ms-input-placeholder {
 color: var(--base-clr);
}

.form-control::placeholder {
 color: var(--base-clr);
}

.form-control:focus {
 border-color: var(--theme-clr);
}

.send-message-btn {
 width: 100%;
 border: none;
 font-family: var(--base-fm);
 font-size: 18px;
 font-weight: 500;
 background-color: var(--theme-clr);
 color: var(--white-clr);
 padding: 12px;
 border-radius: 5px;
 cursor: pointer;
 outline: none;
 transition: 0.5s all;
}

.send-message-btn:hover {
 opacity: 0.9;
}

.poweredby {
 text-align: center;
 font-size: 14px;
 margin: 0px 0 10px 0;
 color: var(--base-clr);
}

.widget-form-show {
 pointer-events: auto;
 opacity: 1;
 bottom: 110px;
}

/*Button and Form Left Side Open*/
.widget-form-left {
 left: 20px;
 right: auto;
}

.widget-btn-left {
 left: 20px;
 right: auto;
}

document.querySelector('.cw-widget-btn').addEventListener('click', function(e){
	document.querySelector('.cw-widget-btn').classList.toggle('widget-btn-show');
	document.querySelector('.widget-form-group').classList.toggle('widget-form-show');
});