Skip to content

Create a slide out Gravity Forms widget

Create a slide-out Gravity Forms widget – expanding from our previous example on How to create a fixed floating form widget, we’ve reworked and re-jigged this idea to display your Gravity Forms in hidden side panels that pop out on activation.

Create a slide out Gravity Forms widget
Create a slide out Gravity Forms widget

HTML Markup

Add the below HTML markup to the page/post/ or global area in your theme. Tip, if you don’t have access to edit your theme PHP files, I suggest adding this markup in any global area across your website. Things like a footer widget or header widget will work well. Basically, anywhere that appears on every page.

<div class="gfq-oc-wrap">
  <div class="gfq-oc-panel">
    <!--Change to the form ID of your form below-->
    [gravityform id="9" title="false" description="false" ajax="true"]
  </div>
  <div class="gfq-badge">
    <img decoding="async" src="https://assets.jetsloth.com/wp-content/uploads/2019/02/10140857/icon.png">
  </div>
</div>

Add CSS styles

Copy the below CSS styles and add them to your WordPress theme. If you don’t have access to your WordPress theme I suggest installing the Simple Custom CSS plugin and then copying the below CSS into the settings screen. This plugin will allow you to add custom CSS to your site.

.gfq-oc-wrap {
     z-index: 9999999;
    position: fixed;
    height: 100%;
        top: 0px;
    right: 0px;
}
.gfq-badge {
    background: #0275ff;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    transition: all 0.1s ease-in-out;
    transform: scale(1.0);
    padding: 10px;
    bottom: 40px;
    position:absolute;
    right: 40px;
    animation: pulse-green 2s infinite;
}
.gfq-badge img {
    position: relative;
    left: 50%;
    transform: translate(-50% ,-50%);
    top: 50%;
    border: none!important;
    width: 80%!important;
}
.gfq-badge:hover {
	transform: scale(1.1);
	cursor: pointer;
}
.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;
    pointer-events:none;
}
.oc-panel-active {
	right:0px;
  opacity:100;
    pointer-events:all;
}
.gfq-oc-wrap .badge-active {
	right: 620px;
}
.gfq-oc-wrap .gform_wrapper form input[type="submit"] {
  width:100%;
}
@keyframes pulse-green {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(4, 116, 255, 0.7);
	}
	
	70% {
		transform: scale(1.1);
		box-shadow: 0 0 0 90px rgba(4, 116, 255, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(4, 116, 255, 0);
	}
}

Add Javascript

Copy the below jQuery and add it into an HTML field within your contact form. See the screenshot below. Add the JS to a HTML field, should look like below.

<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>
What do you think?

Show us your work & give us feedback

We’d love to see you try this on your own website! Even more, we’re potentially looking at turning this idea into a larger plugin that would be available on JetSloth. So with that in mind, we’d love to get your feedback on the idea, do you love it, hate it, or have some feature requests. Click the green icon example and leave us your feedback about this idea in the widget form on page.


"*" indicates required fields

Give us feedback

Like this idea? Would you like to see it become our next plugin? Leave your feedback below!
Sign me up to the newsletter

By signing up to the mailing list, you'll get emails when we release new WordPress plugins, or notify you of major plugin updates. That's it, no spam ever.

jQuery(document).ready(function( $ ){
$(‘.gfq-badge’).click(function() {
$(‘.gfq-oc-panel’).toggleClass(‘oc-panel-active’);
$(‘.gfq-badge’).toggleClass(‘badge-active’);
});
});

Want more?

Feb 2, 2019

Create a fixed floating form widget

Want to be able to create a cool floating form widget on your site? This tutorial talks about how to do it without using a plugin. Create a fixed floating form widget with Gravity Forms and JetSloth.com