Menu

Get Your Embed On With The Wufoo Form Embed Kit

Integrating Wufoo forms into your web application is easier than ever with the Form Embed Kit.

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

By: Tim Sabat Back to Guides

Greetings friendly Wufoo fans! We've been hard at work on a project for our fellow Wufoo developers called the Wufoo Form Embed Kit. While the kit is targeted primarily at developers (yeah, we're about to nerd it up in here) the rest of you should be delighted to know that it's aimed at making it much easier to have your favorite web apps add Wufoo integration to their software.

Ok, here's the rundown...The Wufoo Form Embed Kit is a tool that helps developers easily let their users embed Wufoo forms into their software. With just a few lines of JavaScript, your content manager or website builder can pop up a user-friendly dialog box to quickly access that user's account and add their Wufoo forms.

Video Introduction

But you don't have to take my word for it, here's Chris Coyier with a little video rundown on what this product is all about.

Live Demo

The best way to experience the awesomeness of the Wufoo Form Embed Kit is to actually play with it in person. So we took some time and created a live demo for anyone to play with to show the kit being used in a simple application:

View the Wufoo Form Embed Kit Live Demo

One thing to note is that while the example lives on Wufoo.com, which makes iframe communication a lot easier, this kit does work easily on any domain. Be sure to check out the demo in the video above and our developer documentation to see how it's as easy as copy and paste to make it all just work.

The Experience

The following sections show off the important screens that are part of the Wufoo Form Embed Kit experience.

Logging in with the Wufoo Form Embed Kit

No need to use the Login API to get your user's API key. With the Wufoo Form Embed Kit, your users will log in using their normal username and password. Look ma, no API Keys!

Wufoo Form Embed Kit Login

Inserting Existing Forms

After login, the user can choose from their existing forms. If they choose "Insert", you're magically passed back the embed snippet to your page. This flow is similar to what your users would normally have to do with the Code Manager, but without error-prone copy and pasting and dealing with strange and unfamiliar code.

Chose A Form

Choosing From Our Most Popular Form Templates

If your users need a form that they haven't created yet in Wufoo, this kit also gives them the ability to quickly use some of the most popular templates from our Form Gallery. With a single click, they can add a new form right from your app without having to go to Wufoo proper.

Choose A Theme

What's also nice about using a template from the kit is that an email notification is automatically set up for the user so that the form is useful right from the get go.

Editing and Creating Forms

With the press of a button, your user is whisked away to their Wufoo account (they won't need to log in again) to take care of maintenance tasks like creating or editing existing forms. "Oh no, they leave my app?!" Yep they do momentarily, we need the extra room to have an excellent form building experience. But don't worry, when the user is done saving their new form or edits, they are reminded to return to your app from our Form Builder. Peep the scene below.

Return to your Website

Unlock More Power!

The Wufoo Form Embed Kit can do a few other things beyond what you've seen here. Most notably, it can also allow for user signups. Imagine this: a user using your app wants to embed a form. They've never even heard of Wufoo, but regardless, they can sign up for a Wufoo account right from within yours and have a working form inserted in just a minute or two.

Form Embed Kit Signup

In addition to signups, you can have a co-branded experience by having your logo appear next to Wufoo's when the kit is opened, increasing user confidence. If a user needs to jump over to Wufoo to create a new form or edit an existing one, we can also prompt them to return to your app by name.

To get these more advanced features (the ability to offer new Wufoo registration and co-branding), you'll just need to register your kit and we'll get back with you on how to unlock these goodies.

What can you build with this?

Why is this useful?

Need more? Download our Integration PDF for more reasons on whay our new Wufoo Form Embed Kit is the cat's pajamas. It'll also help you pitch the idea to your dev team!

Back to Guides


Don't have a Wufoo Account?

Wufoo makes creating HTML online forms fast, easy, and fun. No coding required.

Wufoo Signup Screen