Build Seamless, Fully Functional Forms with No Coding

Forms are the backbone of the interactive web, but as a non-programmer, they've always been a bit troublesome. Being the lazy designer that I am, I always look for ways to make my 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 - that is to say, the user shouldn't be able to tell that you've used Wufoo at all, not through the design or the web address.

What kinds of forms can you make? All sorts, from contact forms to surveys to ones that interact with PayPal. If you're a web designer who perhaps isn't familiar with server-side languages like PHP, then you'll love this, because you'll never need to worry about adding forms to a website again.

The Brief

Some weeks ago I wrote a tutorial on building a simple homepage that used Twitter and CushyCMS to make it super easy to manage. The website we built is my own little domain - CollisTaeed.com - and while I'm happy with it, there is one major flaw. At the bottom of the page I give my email address. But wouldn't it be better to have a little contact form there, thus protecting my email address from spam? Well that's what we're going to do!

Here's what I want the page to look like when we're done:

And then once the form is completed, I want that form to be replaced by a little message like this:

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. I've set myself up on the "Ad Hoc" plan.

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.

Anyhow here's the form I've made!

Step 3 - Creating a Theme

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

The form looks totally different to the site
The form is at a weird URL - http://collistaeed.wufoo.com/forms/contact-collis/ - 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:

Click on the Themes tab
Down the bottom you will see a link that reads Wufoo Form Gallery
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:

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.
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.

I recommend using the Firefox extension, Firebug, to figure out what HTML elements are being affected by what CSS selectors. If you're not familiar with Firebug, you might like to check out our NETTUTS tutorial on Firebug here.

So anyhow after a big of fiddling about in Firebug and Dreamweaver, here's my final theme.css stylesheet:

/* - - - Custom Theme - - - */
/*
	Note that I have simply gone through each class and overwritten it with 
	my own definitions to match the form to my collistaeed.com website. 
	It's a bit of a messy stylesheet, but that's OK, it works! :-)
*/

/* Backgrounds */
body, #container, body.embed{
	background-color:#191e25;
	margin:0; padding:0;	
	color:#5f6874;
	font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif;
	font-size:13px;
	line-height:21px;
}
h1 a {
	display:none;
}
h1, h2, h3, h4 {
  color:#ffffff;
  font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif;
}
h2 {
	display:none;
}

.wufoo input.text, .wufoo textarea.textarea{
	background:none;
	background-color:#101318;
	border:1px solid #222830;
	padding:8px;
	margin-top:3px;
}

.wufoo .focused{
	background-color:#191e25;
	color:#d2d9e3;
	
}
.wufoo .instruct{
	background-color:#333e4c;
	color:#d2d9e3;
	border:1px solid #434e5f;
	font-size:80%;
	font-family:inherit;
}

/* Borders */
#container{
	border:none;
}
.wufoo .info{
	border-bottom:none;
}
.wufoo .section{
	border-top:none;
}



/* Typography */
.wufoo .info h2{
	font-size:160%;
	font-family:inherit;
	font-weight:;
	font-style:;
	color:#ffffff;
}
.wufoo .info p{
	font-size:100%;
	font-family:inherit;
	font-weight:;
	font-style:;
	color:#5f6874;
}
.wufoo .section h3{
	font-size:110%;
	font-family:inherit;
	font-weight:;
	font-style:;
	color:#ffffff;
}	
.wufoo .section p{
	font-size:100%;
	font-family:inherit;
	font-weight:;
	font-style:;
	color:#5f6874;
}	
.wufoo label.desc{
	font-size:100%;
	font-family:inherit;
	font-weight:normal;
	font-style:;
	color:#aab3bf;
}
.wufoo li div, .wufoo li span, .wufoo li div label, .wufoo li span label{
	font-family:inherit;
	color:#5f6874;
}
.wufoo label.choice{
	font-size:100%;
	font-family:inherit;
	font-weight:;
	font-style:;
	color:#5f6874;
}
.wufoo input.text, .wufoo textarea.textarea, .wufoo select.select{
	font-family:inherit;
	font-weight:;
	font-style:;	
	color:#d2d9e3;
	font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif;
	font-size:13px;
	line-height:21px;
}
.wufoo li.altInstruct .instruct, .wufoo li.leftHalf .instruct, .wufoo li.rightHalf .instruct{
	color:#d2d9e3;
}
.wufoo input.btTxt{
	font-size:;
	font-family:;
	font-weight:;
	font-style:;
	color:;
}

.wufoo li.focused label.desc{
	font-size:;
	font-family:;
	font-weight:;
	font-style:;
	color:;
}
.wufoo li.focused label.desc{
	color:;
}
.wufoo li.focused div, .wufoo li.focused span, .wufoo li.focused div label, .wufoo li.focused span label{
	font-family:;
	color:;
}

/* Drop Shadows */
#top, #bottom{
	visibility:hidden;
}

/* Extras */
form .req {
  color:#c75a33;
}

.medium { width:591px;}

input.btTxt {
  background-color:#d55633;
  border:1px solid #d56d46;
  color:#ffffff;
  padding:4px 15px 4px 15px;
	font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif;
}
input.btTxt:hover { background-color:#ab3d1f; }

I won't go through the styles as it's a little messy because I had to override some Wufoo styles. But basically I've just reset some colours and borders and fonts and made a few things on the page hidden (like the page title and logo) so that they don't interfere with my website.

Step 5 - Upload and Test

So now we rename the CSS file, I changed mine to be called collistaeed.css, and then upload to a server. My stylesheet sits at: http://collistaeed.com/collistaeed.css

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

Under Theme select Create New ...
Under Properties select Advanced
Then link up your stylesheet in the form field
and Save Theme

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

Now if we visit my form it looks like this:

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.

Here's the iFrame code for my form:

<iframe height="629" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://collistaeed.wufoo.com/embed/contact-collis/" title="HTML Form"><a href="http://collistaeed.wufoo.com/forms/contact-collis/" title="Contact Collis">Fill out my Wufoo form!</a></iframe>
<small><a href="http://wufoo.com/">Powered by Wufoo</a></small>

And of course I can even stick my form in right here on this NETTUTS page, like this:

So all we need to do is delete that "Powered by Wufoo" bit there (a nice sneaky attempt to get their link on our page), adjust the iFrame height a little (because otherwise error messages cause some cut off) and place it in my HTML page! Here's how it looks:

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Collis Ta'eed - A Little About Me</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<style>
	
		#success {
			margin:auto;
			width:310px;
			margin-top:30px;
			text-align:center;
		}
	
	</style>
</head>

<body>

	<div id="success">
      <p><img src="images/form_success.jpg" /><br />
        Your contact submission is now winging it’s way to my inbox.  Please be patient with me as I get a lot of email so I may take a while to respond!</p>
      <p><a href="index.html">Return to Homepage</a></p>
	</div>


</body>
</html>

You can see this page at http://collistaeed.com/success.html. Next we'll go into Wufoo and edit the form to give it a Return URL. Note that to complete this step you need to have a paid Wufoo account. Fortunately I have the cheapest plan so that's no problem! In the screenshot below you can see where you enter the Return URL:

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!

Enjoyed this post? Your vote is always appreciated!! Delicious StumbleUpon Float Digg

Comments

Add a Comment

Note: We use Gravatars on NETTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!

Trackbacks

Leave a Trackback

FlashDen	Flash Components
AudioJungle	Music Loops & Sound Effects
ThemeForest	Site Templates & Themes

PSDTUTS	Photoshop Tutorials
VECTORTUTS	Illustrator Tutorials
AUDIOTUTS	Music & Sound Tutorials
NETTUTS	Web Development Tutorials

FreelanceSwitch	Freelance Advice
Jobs.FSW	Freelance Jobs
FaveUp	Design Inspiration
Envato	About Us