Form Design

Brand design can extend into all realms of a business’s designs – even into the design of feedback or subscription forms on your website. Here’s an example of how you can customize a form to match your brand design.

When you’re designing your form, keep your brand’s color palette, font style and other brand standards in mind. Here’s a designed version of the same form, followed by a discussion of the changes that were made.

1. Adding a headline can help to make the purpose of your form clear. Headlines also make the form design more eye-catching. Design the headline to match either the other headlines or sub-heads on your page, in terms of font face, alignment, color choice and size.

2. Include instructions on how to use the form, and set expectations about what will happen once the form is filled out. This helps to visually anchor the form and to also make the person filling it out feel more comfortable about doing so. Again, the font face, alignment, color choice and size of these instructions should be matched to your other materials – in this case, your body copy.

3. Style the form field labels. Change the font face, size and color palette on the form field labels (Name, Email, Company, etc.) to match your body copy.

4. Align the form field labels (usually left, unless your brand guidelines specify another choice). You may be able to do this by just styling the text, but you may have to change the table styling if your form was delivered in an HTML table.

5. Design or style the “Submit” button. Your choices here include:

1. Keeping the default style (shown here)
2. Changing the text that appears on the button. This can be done in the HTML code by changing the ‘value=”Submit”‘ text to read ‘value=”Your Text Here”‘.
3. Swapping out the default button style for a graphical button. The code for this is: <inputype=”image” src=”images/submit.jpg” value=”Submit” alt=”Submit”> where ‘submit.jpg’ is your image file. If you choose this route, design the button to match your color palette and brand, but make sure that it is still easily identifiable as a submit button. You may do this through the words on the button, or by using an arrow graphic if space is limited.

6. Consider placing a border around your form. This can help to distinguish it from other elements on the page, and help it stand out from the rest of your content. Your border can be solid, dashed or dotted. Choose the option that aligns with your brand.

7. Add a background color. This is another way that you can make your form stand out and call attention to itself. Choose a background color that your headline and body copy colors contrast with, to ensure that they will be legible. And, make sure the background color coordinates with and compliments the rest of your brand. You may also choose to place a subtle pattern in the background if your brand calls for that.