Hey Wufans! We know you are always looking for ways to increase your form completion rates and get more entries. In the past, we’ve discussed the key mistakes to avoid to improve form completions. Today, let’s focus on the importance of visual web form design and its impact on form completions.

We can all agree that first impressions matter. And it’s no different with online form design. Think about the time when you saw that beautifully designed car and thought, “Dang, I want to drive that,” or visited a well-designed website and thought, “That looks so cool,” or looked at a fresh-baked, hand-crafted pizza and thought, “I’d eat that whole thing in under a minute”.  That’s the same way you want your form respondents to think when they look at your forms! Studies suggest that users make their own design impressions about websites within 50ms. These impressions are based on a combination of factors like colors, fonts, spacing, and more. So, let’s look at four ways we can make your Wufoo forms stand out and make that great first impression!

1. Out-of-the-box themes

When you design stand-alone forms that won’t be embedded on websites, you can save time and effort by using one of our six awesome out-of-the-box themes. These themes are designed to make your forms look good on any device your respondent uses. So, next time you design a form, check out these six themes that are already waiting for you in your themes selection, click on one of them, and start increasing completions.

2. Custom themes

Want to let your creativity shine through your web form design? Use our theme designer to create custom themes in line with your brand image. The theme designer lets you pick elements like font, size, and color for individual elements in your form. Plus, once you make a custom theme, you can save it to use it any time you’d like to bring consistency to all the related forms in your account.

Good typography is not only a great way to polish your brand image— it makes the forms easy to read on any device, resulting in higher conversion. You can use one of the many fonts supported by Wufoo or you can import fonts and use them in custom themes.

If you are a CSS Pro and have written your own CSS for your theme, you can reference the URL of the file in the theme designer and apply the theme to your forms. The file has to be hosted in an external file storage system and appropriate access rights should be set so that the file is accessible from Wufoo.

3. Logos, logos, logos

One of the best ways to build trust with form respondents and encourage them to fill out your forms is by using your logo in Wufoo forms. Using your logo helps form respondents identify your brand. To use a logo in your custom theme, you can host the logo in an external file storage system. Remember: whether you host the image in a storage system or in your own server, please ensure that it’s SSL certified so that you don’t get any warnings.

4. Themes for forms in websites

So far we’ve covered the key aspects of themes for standalone forms. But what about Wufoo forms that are embedded in a website? You can embed forms in two ways:

1. Use the form URL in your website code, or
2. Use the embed code provided in the share page.

To ensure that the styling of the embedded Wufoo form matches the styling of your website, you can enter the URL of your website’s CSS file through theme designer.  

If you use our embed form code, we strip out the CSS elements so that the form automatically takes the theme of your website. However, this method may cause small CSS conflicts which can be resolved by making minor tweaks using theme designer.  Learn how to avoid some of the pitfalls of using embedded forms here. Our suggested method is to use embedded form code along with uploading the CSS of your website in theme designer so that any conflicts are avoided.

You now have all the tools to create web form design that looks awesome and increase form completions! Use our out-of-the-box themes or custom themes along with logos on every form to keep those form entries flowing!