How to Make a Very Narrow Wufoo Form

Customize 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 web page, 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 needed to fit:

Wufoo Form Widths

Occasionally the circumstance will present itself where you need 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. While 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 get a Wufoo form pretty darn narrow!

Narrow Wufoo Form