Tip: Customizing the Wufoo Shortcode discussed in yesterday’s tutorial– Woohoo! for Wufoo in WordPress.com Blogs

*Note: You don’t need a SmugMug account to use the information in this post!

After playing around with the Wufoo shortcode, I’ve discovered a couple of customization options that make integrating your Wufoo form easier. I’ll be using the example below to explain each option. You can also view the final example at the top of my sidebar. The following form represents the default code Wufoo provides in the Form Code Manager.
(*NB- The form in this post should work so unless you want to subscribe to SmugMug Hugs, don’t click ‘Submit’!)

The Form:

The shortcode:

[wufoo username=”smugmughugs” formhash=”z7x3k1″ autoresize=”true” height=”340″ header=”show” ssl=”true”]

The first two parameters should be self explanatory:

username: Your Wufoo username
formhash: The specific form created in your Wufoo account

Now, let’s skip over to the header=”show” value. By keeping this default option, Wufoo will display the Title and Description created within Wufoo. However, it’s a bit of work trying to match it exactly to the typography of your blog and in some cases will look repetitive. Instead, you can choose to hide the header with this code:


By hiding the header, we can include the same information except now it will look more like it’s native to the blog’s design. I’ve used this option in my SmugMug Hugs Weekly Wrap-Up email subscription form in the sidebar. Personally, I think it looks better this way! You may disagree, but at least there’s the option.

Before altering WordPress Wufoo Shortcode

Default Wufoo Shortcode

After affects of customizing WordPress Wufoo Shortcode

After Customizing Shortcode

You may have also noticed the difference in height between the default use of the Wufoo shortcode and the new customized Wufoo shortcode. This is due to the height=”340″ value. Obviously, that’s more room than this widget requires and is based, in part, on using the header=”show” value. There may be a couple of other reasons for the added length, but I need to do a bit more research before I can confirm them. No matter, you will probably want to adjust the height anyway. I use the free MeasureIt! Chrome Extension by Puffnir to get a more precise measurement. A search for “ruler” in your browser’s add-ons or extensions store should offer plenty of options.

After adjusting the height to 150px or: height="150", the form doesn’t take up so much space. BUT, I’m sure some of you might of also noticed the autosize=”true” parameter. Well, yes, so did I! However, at least in the side widget version of the form, it doesn’t always work very well, especially when choosing to hide the header. I also think it might relate more to the confirmation or error message when submitting the form, by keeping the user from scrolling. But that’s only my best guess.

Last of note, is the ssl=”true” value. It’s not mentioned in the WordPress.com Wufoo documentation, so I’m not sure if it’s “suppose” to be included.  According to the Wufoo website, ssl is only provided to paying Wufoo plans. (I set up a free account for this tutorial.) Perhaps, WordPress and/or Wufoo is throwing this feature in as a free service for WordPress.com users. We’ll have to wait and see if it lasts.

For the sake of clarity, the final customized code for my Wufoo Subscription widget that hides the default Title and Description is as follows:

[wufoo username=”smugmughugs” formhash=”z7x3k1″ autoresize=”true” height=”150″ header=”hide” ssl=”true”]

Hopefully, this tip on the WordPress.com shortcode for Wufoo will provide inspiration for more visually appealing forms. Depending on the WordPress.com theme and where you want to add your form will make a difference whether or not you really need to tweak any of the shortcode values. If you have any questions or have further knowledge on the “meaning behind the code”, please feel free to leave some wisdom in the comments. I’m still testing out other features and options with this incredibly useful addition to WordPress.com blogs and will keep adding tips and tutorials as I discover the many benefits to SmugMug users as well as anyone else wanting to maximize the choices WordPress and Wufoo have to offer. Hugs for everyone!



Smug Comment...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s