Getting Started: How to style a web form
This article is part of a series on getting started with FormAssembly.
As you get ready to create your first survey, contact form, or any other kind of web form, you’re probably asking yourself a few questions. Will the form be attractive? Will it look professional? Will it match my organization’s visual identity? These are important factors that determine how successful your form will be at collecting your data.
Designing a web form can seem like a daunting task. Web designers use CSS (Cascading Style Sheets) to add colors, logos, pictures and more. But CSS takes years to master and you may have more important things to learn and do. FormAssembly makes it simple to create and style your web form, so you get great looking forms that work well.
In this tutorial, we’ll guide you step-by-step through the process of adding color, flair and style to a web form. If you prefer to sit back and watch a 3mn video instead, click here for our introduction to design and branding screencast.
Step 1. To get started, log in your FormAssembly account. If you don’t have an account yet, it’s easy to get one. Create your account here for free. You only need to provide your email address and choose a username and password. You’ll be done in 30 seconds.
Step 2. For this tutorial, we’ll use a form from the template library, but you can follow the same steps using your own form (check out How to create a web form if you’ve never created a form before). Follow this link to open the template in the Form Builder. You can make changes to the form if you want to, or just keep the form as-is. Click ‘Save’ to keep your copy of the form. When the save confirmation dialog appears, choose to stay in the Form Builder, so you can navigate to the Theme Editor directly.
Step 3. Click the “Theme Editor” tab at the top of the page.
Step 4. Theme Editor opens in the Basic Editing panel. This panel displays different design options that look good no matter what you select. The panel on the right side of your screen gives a preview of your selection. If you don’t like what you see, just make a different choice.
Color is a great way to enhance your form and call attention to important information and details. But, overusing color can detract from your form, making it difficult to read, especially for those with visual disabilities.
- Use color to contrast text from backgrounds. Most design experts agree that dark text against a lighter background is easiest to read.
- Be aware that color-blind users cannot distinguish the difference between certain colors, like red-green and blue-yellow. For more information on designing for users with disabilities, visit the World Wide Web Consortium (W3C) at www.w3.org/WAI/users/Overview.html.
- If you need inspiration for choosing colors, search the web for websites that use colors you like. Check out http://www.colourlovers.com or http://kuler.adobe.com. Any of these should provide inspiration to get you started.
- A font that is simple is often the best choice when designing a form. In addition, choose a font size that is large enough to read — don’t make your readers squint. Avoid using too many fonts … one for the title and a different one for text is usually good.
- After you’ve chosen the colors and design for your form, ensure your design is clean and doesn’t affect its usability. Ask a friend or coworker, or email us, we’ll be glad to help!
Once you’re more familiar with the basic settings in Theme Editor, try the “Advanced Editing” panel for more control over specific aspects of your form.
Step 5. Once you’ve settled on your colors and design, check to make sure your choices will work with any error messages your respondents may receive. To do this, simply click the “Error Examples” tab at the top of the preview panel and your selections will appear on a generic form with error messages. You can decide if the visibility of the error messages works with your color selections. Keep in mind the color issues that affect those with color blindness.
Step 6. Once you’ve finalized the “look” of your form, click the “Save” button in the top left corner then follow the on-screen instructions.
Have fun with Theme Editor. There are many different “looks” you can create with the tools in the Basic Editing panel. When you want to use a previously saved theme, simply click “Browse Themes” in the upper left corner of the page. You’ll see all your previously saved themes in this panel and you’ll also be able to delete themes you no longer want.
When you’re ready to add your logo to forms, see the following tutorial:
Tutorial: Add a logo to your form