CSS

/* Container */

.flying-form {
	padding-left: 10px;
}	

.flying-form .popup-form {
	position: relative;
	margin-bottom: 50px;
	width: 320px;
	min-height: 142px;
}

/* Animation */

.flying-form .animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes slideInRight {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes slideInRight {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.flying-form .slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight;
}	

/* Styling */

.flying-form .popup-form {
	position: relative;
	margin-bottom: 50px;
	width: 290px;
	background-color: #fff;
	padding: 15px 15px 0;
	box-shadow: 0 0 4px #666!important;
	border-radius: 3px 0 0 3px !important;
}

.flying-form .popup-form h2.popup-title {
	text-transform: none;
	margin: 10px 0 0 10px;
	font-size: 16px;
	line-height: 1.3;
	font-weight: bold;
}

.flying-form .popup-form .jsn-bootstrap .jsn-form-content .control-group {
	padding: 0 !important;
}

.flying-form .popup-form .jsn-form-content .control-group .control-label .required,
.jsn-uniform.jsn-master .popup-form .jsn-form-content .control-group .control-label i {
	display: none;
}

.flying-form .popup-form .jsn-form-content .control-group.ui-state-highlight {
	background-color: transparent !important;
	border-color: transparent !important;
}

.flying-form .popup-form .jsn-column-item.jsn-uniform-others textarea.jsn-value-Others {
	width: 255px !important;
	height: 20px;
}

.flying-form .popup-form .form-actions {
	padding: 0;
	padding-top: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	background: transparent;
}

.flying-form .popup-form .form-actions .btn-toolbar {
	margin-top: 0;
}

.flying-form .popup-form .form-actions .btn-toolbar .jsn-form-submit {
	width: 270px;
	background: #2baaff;
	border: none;
	box-shadow: none;
	text-shadow: none;
	margin-left: 0;
	/*margin: -20px 0 20px 10px;*/
	margin: 0px 0 20px 10px;
	padding: 10px 0;
	font-weight: bold;
}

/* Close Button */
	
.flying-form .popup-form .close-div {
	position: absolute;
	top: -10px;
	left: -10px;
	background-color: #222;
	border-radius: 50px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
}

.flying-form .popup-form .close-div i {
	color: #eee;
	margin: 0;
}

.flying-form a.close-div {
	display: none;
}

.flying-form:hover a.close-div {
	display: block;
}

JS Dependancies (Joomla / External / 3rd Party)

• Cookie Support = jquery.cookie.js - You can probably get a newer version of this from the usual sources, but you can click on the filename and download from it from this page. Also this library has been referenced in the HTML (Bottom Content) code below.

HTML (Top Content)

<!-- Top Content -->
<div class="popup-form animated slideInRight">
	<h2 class="popup-title">You expect the next QuantumWarp survey will be about:</h2>

The form will be rendered in-between these code blocks

HTML (Bottom Content)

<!-- Bottom Content -->
	<a href="#" class="close-div"><i class="fa fa-close"></i></a>
</div>

<script src="/images/kb/2016/814/jquery.cookie.js"></script>

<script>
	(function($) {
		$(document).ready(function() {
			//$.cookie('flying-form', '0');
			$(".close-div").click(function() {
				$.cookie('flying-form', '1');
				$(".popup-form").hide();
			});

			$(".flying-form .jsn-form-submit").click(function() {
				$.cookie('flying-form', '1');
				$(".flying-form .jsn-form-content").fadeOut('slow');
				$(".flying-form .form-actions").fadeOut('slow');
				sheet = document.styleSheets[0];
				sheet.insertRule(".flying-form .jsn-form-content, .flying-form .form-actions { display: none !important }", 1);
			});

			if ($.cookie('flying-form') != 1) {
				$(".flying-form").fadeIn('slow');
			}
		});
	})((window.JoomlaShine && JoomlaShine.jQuery) ? JoomlaShine.jQuery : jQuery);
</script>

Notes

• To configure Uniform for this Flying Form effect
  • Add the CSS code to your custom.css file
  • and the load the jquery.cookie.js into your modules folder (ie images/modules/814/)
  • Create your form as a module, I called my Flying Form
  • Add flying-form as a module suffix
  • Disable the WYSIWYG in both the 'Top Content' and 'Bottom Content' boxes
  • Paste the HTML (Top Content) in to the 'Top Content' box
  • Paste the HTML (Bottom Content) in to the 'Bottom Content' box
  • Select the Stick Leftbottom [stick-leftbottom] position (or selected position)
  • Publish Module
• To make this code work for anymodule or to slide in other code
  
  • create a Custom HTML module with flying-form module suffix
  • Just combine the HTML snippets and paste this into the Custom HTML module
  • Paste you new module content inbetween the HTML blocks
  • publish to your select module position
  • Save
• The close button uses Font Awesome in the HTML and some CSS styling.
  

  <a href="#" class="close-div"><i class="fa fa-close"></i></a>

• The cookie storing of the user closing the slider does not seem to work. Code look correct though.
• Using radio selecter keeps the form short.