Forms are the backbone of the interactive web, but for non-programmer, they’ve always been a bit troublesome. I have a friend and client (Noel from Mycomputergallery.com)that is a bit lazy, and i’m always looking for ways to make his life easier. So today I’m going to show you how to use a form building service called Wufoo to make forms that fit right into a website, completely seamlessly.

Step 1 – Getting Started with Wufoo

So first things first, we go to Wufoo.com to get an account.

If you’ve never used a service like Wufoo or Formspring, what they do is to let you drag and drop forms together with all sorts of features. They host the forms and take care of all of the form handling, including all the usual form validation, file handling, paypal integration and all sorts of stuff. It’s pretty cool and worth exploring the site to learn more.

There are pricing packages to choose from, in this tutorial you can do almost everything but the last step (redirecting after the form) using the free package.

Step 2 – Creating our Form

Once you have an account just click on Forms and create your form. It’s fairly straightforward to do and you can figure it out just by clicking around.

Step 3 – Creating a Theme

Now that’s a nice form, but right now we have two major problems:

1. The form looks totally different to the site
2. The form is at a weird URL – http://dataviking.wufoo.com/forms/angel/ – and not on my page

So let’s deal with the styles first. So we’ll create a new Wufoo Theme with our own CSS to make the form match. Here’s what you need to do:

1. Click on the Themes tab
2. Down the bottom you will see a link that reads Wufoo Form Gallery
3. Download the CSS for the Gray theme. This will be our starting point and we’ll just modify that to look right

Step 4 – Adapting the Theme Files

Once the theme is downloaded we open up the files to find a series of files, most of which we can ignore completely. Here’s what the file structure looks like:

The two files we need are:

1. index.html – We don’t need to alter this file in any way, just to open it in your favourite browser to use for testing.
2. theme.css – this is the CSS file we will be working with

Now unfortunately the CSS isn’t very straightforward. This is because the Wufoo people have strewn style definitions all over the shop; some are in form.css, some in structure.css and of course lots are in theme.css. That means when we put in our CSS definitions we not only need to define our own, but we also have to make sure we overwrite any existing ones.

Step 5 – Upload and Test

Now if we go back to Wufoo and again click on Themes and this time we’ll create our custom theme by:

1. Under Theme select Create New …
2. Under Properties select Advanced
3. Then link up your stylesheet in the form field
4. and Save Theme

Once this is done you can go back to Forms and set the theme for your form.

Step 6 – Embedding the Form with iFrames

Now that our form is looking good, it’s time to stick it into the page. We can do this by using an iFrame.

The name iFrame stands for inline frame, and that’s because it’s basically a little frame window in the middle of your page to another page. Using an iFrame we can place this Wufoo page into my regular HTML page and to the end user it will look like a single page.

And happily Wufoo even provides the iFrames code for us. All you do is go to Forms and then click on Code and you’ll get three options – Integrated Form Code, Full Page Form Code and XHTML/CSS Code Only. We need the first option – Integrated Form Code.

Step 7 – Where to after that?

Now there is one problem at the moment. After you send the form we get a big white Wufoo page appearing in the iFrame saying something about your form submission being successful. But we want to use our page. So first of all let’s create a HTML page called success.html on the server using this HTML.

Finished!

So there you have it, to the casual observer it’s not at all obvious that we’ve used an external form processor. By logging into Wufoo you can set notification preferences so that you can pick up the form mail. And it didn’t involve any code at all.

The hardest part of this process is the styling because Wufoo’s templating isn’t very easy. One other annoyance is that the return URL breaks out of the frame. Ideally that final HTML page should have appeared in the iFrame so that the user never leaves the page.

If you’re interested in trying out a form provider, you might also want to look at FormSpring, who do pretty much everything that Wufoo does. And there are probably other form processors out there too, if you know some, please leave a comment!