Slide-out-gravity-forms.css

/*/////////////////////////////////Slide-out-gravity-forms.css/////////////////////////////////*/
/* Full article here https://jetsloth.com/gravity-forms/create-a-slide-out-gravity-forms-widget/ */
.gfq-oc-wrap {
	z-index: 9999999;
	position: fixed;
	bottom: 0px;
	right: 0px;
  height: 100%;
}
.gfq-oc-wrap .gfq-badge {
  bottom: 40px;
	right: 40px;
  position: absolute;
  transition: all 0.3s ease-in-out;
}
.gfq-oc-wrap .gfq-badge img {
	position: relative;
    left: 50%;
    transform: translate(-50% ,-50%);
    top: 50%;
    border: none!important;
    width: 50%!important;
}
.gfq-oc-panel {
	width: 600px; /*Panel width*/
	height: 100vh; /*Panel height*/
	background: #F9FAFA;
	box-shadow: -5px 0px 20px 0 rgba(0,0,0,0.10);
	position: absolute;
	right: -600px;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	overflow: hidden;
  padding:60px;
  border:1px solid #D9E0E3;
}
.oc-panel-active {
	right:0px;
  opacity:100;
}
.gfq-oc-wrap .badge-active {
	right: 620px;
}
.gfq-oc-wrap .gform_wrapper form input[type="submit"] {
  width:100%;
}

Slide-out-gravity-forms.html

<div class="gfq-oc-wrap">
  <div class="gfq-oc-panel">
    <!--Change to the form ID of your form below-->
    [gravityform id="68" title="false" description="false" ajax="true"]
  </div>
  <div class="gfq-badge">
    <img src="https://jetsloth.com/wp-content/uploads/2019/02/mail-1.svg" alt="Icon" />
  </div>
</div>

Slide-out-gravity-forms.js

<script type="text/javascript">
jQuery(document).ready(function( $ ){
        $('.gfq-badge').click(function() {
            $('.gfq-oc-panel').toggleClass('oc-panel-active');
            $('.gfq-badge').toggleClass('badge-active');
    });
});
</script>
/* Full article here https://jetsloth.com/gravity-forms/create-a-slide-out-gravity-forms-widget/ */