How to Make a Very Narrow Wufoo Form

Customise the size of your forms for use on narrow websites and mobile devices.

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

By: Chris Coyier

When you embed a Wufoo form onto another webpage, it will naturally stretch to the width of the container it is in. Imagine the purple area is the container you are pasting the Wufoo embed code into. The form will expand or contract as required to fit:

Wufoo Form Widths

Occasionally, you will be faced with having to embed a Wufoo form into a really narrow space. Here are some tips to ensure that your form looks its best.

In the Form Builder

Top-Aligned Labels

Large Field Size

Create a Narrow Theme

You may want to create a special theme just for your narrow forms. Although not required, this will allow some design tweaks to make them look their best.

Smaller Font Sizes

End Result

With all these tips at work, you can make a Wufoo form pretty darn narrow!

Narrow Wufoo Form