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
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-wrap">
<div class="gfq-panel">
<!--Change to the form ID of your form below-->
<!--[gravityform id="66" title="false" description="false" ajax="true"]-->
</div>
<div class="gfq-badge">
<img src="https://assets.jetsloth.com/wp-content/uploads/2019/02/10140857/icon.png">
</div>
</div>I’ve added my HTML to the bottom of this post within the WordPress text editor.
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-wrap {
z-index: 9999999;
position: fixed;
bottom: 40px;
right: 40px;
}
.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);
float: right;
padding: 10px;
}
.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-panel {
width: 373px; /*Panel width*/
height: auto; /*Panel height*/
max-width: 400px; /*Mac Panel width*/
max-height: 800px; /*Max Panel height*/
background: #F9FAFA;
box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.10);
position: absolute;
bottom: 40px;
right: 0px;
transition: all 0.3s ease-in-out;
opacity: 0;
border-radius: 4px;
overflow: hidden;
padding:30px;
border:1px solid #D9E0E3;
}
.panel-active {
bottom: 80px;
opacity: 100;
}
.gfield.no-label > .gfield_label {
display: none;
}
.gfq-panel input[type="submit"] {
width:100%
}Add Javascript
Copy the below jQuery and add it into a HTML field within your contact form. See screenshot below.
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$('.gfq-badge').click(function() {
$('.gfq-panel').toggleClass('panel-active');
});
});
</script>The End Result
Take a look at the bottom right-hand side of this post, you should see a floating green mail icon, click that to see the form appear in the widget panel and create a fixed floating form widget.
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.
If you´re not into coding yourself, check out Gravity Extend for extending Gravity Forms with fully functional add-ons.
"*" indicates required fields
jQuery(document).ready(function( $ ){
$(‘.gfq-badge’).click(function() {
$(‘.gfq-panel’).toggleClass(‘panel-active’);
});
});
