Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
/* Full article here */
.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;
border:1px solid #D9E0E3;
.oc-panel-active {
.gfq-oc-wrap .badge-active {
right: 620px;
.gfq-oc-wrap .gform_wrapper form input[type="submit"] {
<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 class="gfq-badge">
<img src="" alt="Icon" />
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$('.gfq-badge').click(function() {
/* Full article here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.