Getting Sneaky With Hidden Fields

Add useful and powerful functionality to your forms by using hidden fields.

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

Getting Sneaky With Hidden Fields

By Andrew Gosnell

Hey friends, today let’s check out one of our super-useful CSS Keywords: the hide keyword.

In case you haven’t come across CSS Keywords yet, they are simple CSS classnames which you can include in the Field Settings for a field on your form. The keywords will help you easily take advantage of CSS styles that come pre-loaded in your Wufoo form.

A couple of examples are leftHalf and rightHalf for putting fields into separate columns, and scrollText for setting a fixed height on a Section Break.

But the secret agent of the CSS Keyword realm is hide. When you hide a field, it’s still there on your form, but the person filling it out will not see it. (For you CSS experts out there, it uses {display: none} to stay invisible.)

Here’s an example form where we’re using the hide keyword — it’s a secret agent signup form. See where we added hide to Add CSS Layout Keywords at the bottom?

Field Settings

Now check out the Predefined Value setting above. If we had made the field an Admin-Only field, this wouldn’t work. Data can only be added to an admin-only field if you edit the entry in the Entry Manager. But this way, when we get a prospective secret agent signing up on the form, that value will get populated with the entry.

But what if we want to embed our signup form on several different sites, and track where we get signups? Using a Predefined Value will not work, because it’s set in the form builder. We need something that will load a different value for each page where the form is embedded.

Enter the URL Modifications feature.

With URL Modifications, we can predefine a value for that field, directly in the embed code. So if we have a page on our site about James Bond, and a page on our site about Jason Bourne, we could embed the signup form on both pages and track which entry came from which page.

Here’s what your code would look like. Check out the defaultValues line that we’re using to populate our field.

So here’s our actual embedded form, with “James_Bond_page” inserted in the hidden field. Go ahead and fill it out! You don’t have to use your real name, obviously. (First person to fill it out gets to be 007. Just sayin.)