JavaScript Form Embed Fallback

Ensure your forms always look good by using this JavaScript fallback.

Not already signed up for Wufoo? Let's get started!

By: Chris Coyier

The general consensus is that, internet wide, about 2% of users browse the internet with JavaScript turned off in their web browser (less, worldwide). It’s a bit hard to track, since most analytics tracking software is JavaScript based, so those users just don’t show up at all. If you are trying to figure out this number for your own site (a good idea), here’s how you might do that (and still use the popular Google Analytics).

Because of this overwhelming saturation of JavaScript, we really (really really) encourage you to embed your forms on your site with our JavaScript embed method. It’s not just because we heart JavaScript, it’s because your forms will behave better when you do it that way. Specifically, if a user submits a form with errors, our forms grow in height, and with the JavaScript embed method the container that contains the form will grow with it.

However, 2% ain’t nothing. That’s exactly why we offer the direct iframe embed method as well. And that brings us to the point! You can combine both of these embed methods together to for the ultimate bulletproof best-of-both-worlds embed code. It’s super simple, just use the JavaScript embed code, then right below, it, use the iframe embed code within <noscript> HTML tags. It looks like this:

<!-- Your JavaScript Embed Code Here -->
<noscript>
<!-- Your iFrame Embed Code Here -->
</noscript>

The final product with real code would look like this:

<script type="text/javascript">var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3Cscript src='"   host   "wufoo.com/scripts/embed/form.js' type='text/javascript'%3E%3C/script%3E"));</script>

<script type="text/javascript">
var s7p7r3 = new WufooForm();
s7p7r3.initialize({
'userName':'examples', 
'formHash':'s7p7r3', 
'autoResize':true,
'height':'978', 
'ssl':true});
s7p7r3.display();
</script>
    
<noscript>
<iframe height="978" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="https://examples.wufoo.com/embed/s7p7r3/"><a href="https://examples.wufoo.com/forms/s7p7r3/" title="Mike and Jenny's Wedding RSVP" rel="nofollow">Fill out my Wufoo form!</a></iframe>
</noscript>