JSFiddle - React, Tailwind, and code Playground

by Ashutosh Dave

HTML

<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/polyfiller.js"></script>
<div id="betaSignup">	
		<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" 
		onload="if(submitted){document.getElementById('successMessage').style.display='block';}" frameborder="0"></iframe>
		<form action="https://docs.google.com/forms/d/1-11zgbjmtbujyzGXxdAR4QqssBmm_2TUPhOOdgbGiPQ/formResponse" method="post" id="signup" target="hidden_iframe" onsubmit="submitted=true;" class="betaForm ws-validate">
		<div style="float:left;">
			<input type="email" class="textInput" id="email" name="entry.1064473216" placeholder="Your e-mail address" autocomplete="off" required="required"/>
		</div>
		<div style="float:left;">
			<button class="btn" type="submit">Submit</button>
		</div>
		</form>
		<div id="successMessage" style="display:none; float:left;">
			You've been added to the list.
		</div>
	</div>

CSS

div{
    display:block;
}

JavaScript

var submitted=false;
(function () {
		$.webshims.setOptions('forms', {
			lazyCustomMessages: true,
			iVal: {
				handleBubble: 'hide',
				fx: 'slide',
				sel: '.ws-validate',
				fieldWrappper: ':not(span, label, em, strong, b, i, mark, p)'
			}
		});
		$.webshims.polyfill('forms');
	})();