• Home
  • blog
  • Build (Custom Styled) Online Forms with Wufoo

Build (Custom Styled) Online Forms with Wufoo

Category: Forms, Link, sponsored, wufoo

Need to put a form on a website? I’ve been using Wufoo to do that for a decade. It’s so simple. Just drag and drop the fields you need and select the options you want. Even things that could be complex aren’t, like adding logic (e.g. if they select this, show that) or pagination. Never worry about spam. Never worry about losing data, since it’s all stored right in Wufoo itself (with API access!).

There are too many features to explain right here (OK two more: payments! reports!). One of my favorites, though, which might appeal to all y’all CSS people: you have complete CSS control over the forms you build. Let’s take a look at how that works.

There are themes in Wufoo. You create them any then apply to as many different forms as you like. There are lots of options in here for things like changing fonts, colors, borders, etc.

There is even a good amount of custom fonts available. But here on CSS-Tricks, right now we’re using Source Sans Pro from Google Fonts, and that doesn’t happen to be one of the options.

No big deal though! Since we have complete CSS control, we’ll just link up some CSS that can set that font throughout the form.

Under Advanced, I just put a URL to a CSS file that links up my custom CSS. I can do that super quickly, easily, and for free on CodePen. By appending “.css” to any Pen URL, I can link directly to that CSS:

With the correct selector and rules applied there, I’ve just changed the font!

That’s what I mean by total CSS control. The stylesheet we linked up is added inside the form no matter where you use the Wufoo form, directly on or embedded elsewhere. It’s linked up after Wufoo’s own stylesheets, so it’s easy to override existing styling. Go wild!

Direct Link to ArticlePermalink

Build (Custom Styled) Online Forms with Wufoo is a post from CSS-Tricks