How to Add Custom CSS to Wufoo Forms

This article was originally posted on October 31, 2016.

How to Use Your Own CSS on Wufoo Forms I’ve discussed Wufoo forms in previous blog posts. I like using Wufoo forms for various reasons. Being able to create and edit form fields by dragging and dropping them is one of the many reasons. I can also make Wufoo forms have the same styles as my website if I apply a theme to them.

In the past, I had to manually code HTML, PHP, and CSS if I wanted to create an online form for our website and our clients’ websites. Although I don’t have to manually code HTML and PHP when using a Wufoo form anymore, a little manual CSS coding is still needed occasionally. For example, our website uses the Arvo font, but Wufoo doesn’t offer that font in their theme maker. I wanted to have the Arvo font in our embedded Wufoo forms (our contact form and our long ass website project questionnaire form) for consistency reasons.

Although Wufoo is a third party, I didn’t want the Wufoo forms looking like they come from a third party. Luckily, Wufoo allows you to use your own stylesheet to add any styles that they don’t have in their forms theme maker (i.e. fonts, borders, etc). The stylesheet can be hosted on your website server or in a Dropbox folder.

If you decide to upload the stylesheet to your website’s server, make sure that you have a SSL certificate and are using https for the CSS file URL. The styles may not show if you use http. I’ve experienced this a few times. All Dropbox URLs use https, so you don’t have to worry about http URLs if you go that route.

This tutorial assumes that you know how to code HTML and CSS and you understand how to upload files to a server. Now that we’ve gotten that out of the way, let’s get down to the nitty gritty.

Create Your CSS Stylesheet File

This is a snippet of the Wufoo form stylesheet file for our website:

 @import url("https://use.typekit.net/jms2zpe.css");
 form.wufoo {
   font-family: "mr-eaves-xl-modern"; }

Mr Eaves XL is an Adobe Font, so there is no need to download the font files to our website’s server. I just imported Adobe’s stylesheet url. You’re not limited to just choosing fonts. You can add whatever styles you want (i.e. borders, margins, background images, etc). In this stylesheet that is used to style a Wufoo form on a client’s website, I added a border to a field label that couldn’t be styled with the theme maker.

title322 {
 border-bottom: 1px dotted #ccc;
 }

I used Google Chrome’s Inspect feature to find out the styles used in the Wufoo form. After creating the stylesheet file, you can apply it to a Wufoo form by 1) going to the themes section, 2) selecting your form’s theme, 3) selecting the Advanced property, 4) pasting your CSS file URL, and 5) saving your Wufoo form theme. You can see these steps in the screenshot below:

Adding a custom CSS stylesheet in Wufoo In the screenshot above, you’ll see that I used a CSS file hosted on our website’s server. To get the URL of a stylesheet saved in a Dropbox folder, you would right click on the CSS file and select “Copy Dropbox Link”. Copy Dropbox File URL Screenshot

When you paste the Dropbox URL, you will need to change the 0 to a 1. For example, this Dropbox URL:

https://www.dropbox.com/s/w92bz5kqkefupqu/wufoo.css?dl=0

would be changed to:

https://www.dropbox.com/s/w92bz5kqkefupqu/wufoo.css?dl=1

In the past, you were able to use CSS files hosted on Google Drive, but they stopped allowing this as of August 31, 2016. Back to the topic at hand, don’t forget to apply the theme to your Wufoo form. Applying a Theme to a Wufoo Form That’s all there is to adding custom CSS to a Wufoo form. Here’s what the Mr Eaves XL font looks like on a Wufoo form that is on our contact page:

Custom CSS Styled Wufoo Form

I changed the look of the button with the following code:

form.wufoo input[type=submit] {
width: 100%;
background-color: #759d46;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
transition: .5s ease-in-out; }

form.wufoo input[type=submit]:hover {
background-color: #5f8039; }

If you benefitted from this tutorial or if you have any questions, please feel free to comment below. Thanks for reading!

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.