Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*/////////////////////////////////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%;
}
<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>
<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/ */
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.