Forms for the Win: 8 Types of Forms You Should Know How to Design
Form design can often be one of the most overlooked elements of a website. And it can be a fatal flaw.
Forms are the foundation for communicating with your audience, generating leads, making sales, creating great user interactions, and expanding your marketing reach.
Every designer should have a good idea of how to design these eight form types to help create the most meaningful experiences possible for your online audience.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Contact Form
It’s difficult to find a website without a contact form. This type of form is one of the most simple and most used examples of forms online. They are used to connect with visitors and generate leads.
What fields should a contact form include?
- Name
- Email address
- Other contact information, such as physical address or phone number
- Fillable field for a request or message
- Optional fields that pertain to specific requests from the landing page
Email Sign Up Form
This might be the simplest form type out there – the email signup form.
This simple form might just be one field with an explanation of why someone should share their email address with your website. (It is important to note that many email signup forms are followed by an automated double opt-in email that potentially asks for additional information from users.)
The email signup often has a simple and streamlined design that can be filled out in an instant with an immediate email response to confirm signup or provide the offer used to entice the user to fill the form out.
The key to this form design is simplicity within your website aesthetic. It should look like part of the website but stand out just enough to grab attention.
What fields should an email signup form include?
- Email address
E-Commerce Forms
There are two distinct types of e-commerce forms: Product selectors and payment forms.
Product selector forms should help a consumer make the right product choices so that they can apply items to the shopping cart for purchase. These forms generally include options or choices to help a shopper understand a product and get everything they need to make a purchase.
What fields should an product selector form include?
- Size or color (any product options)
- Quantity
- Product add-ons
- Special options (such as customization
A payment form is used to collect payment information to finalize an online sale. Many websites use third-party payment processors for e-commerce security, but still require a form to ensure they ship products to the right place and confirm billing. Try to keep payment forms to one page and eliminate unnecessary fields for quick checkout.
What fields should a payment form include?
- Name
- Phone
- Address (billing and/or shipping)
- Amount/total
- Coupon/promo
- Taxes or fees
- Payment information (credit card, PayPal etc.)
- Special instructions
Survey or Feedback Form
Survey or feedback forms are among the most customized forms you will likely design for a website. The content needed to create an effective survey or feedback form directly correlates to what you are trying to learn from the form or survey.
The key design element here is to be direct with forms and questions. Use rating scales rather than open-ended questions where appropriate to make surveys easy to answer. Consider showing a timeline so that users know where in the survey they are and how many questions are left. Take care with questions so that surveys don’t get too long because it can lead to abandonment.
What fields should a survey or feedback form include?
- Fields pertain to the topic at hand
- Name (optional)
- Email (optional)
Account Signup/Login
An account signup or login form can be almost as simple as an email form. The easier it is to signup or log in, the more likely users are to perform this action frustration-free.
This field should only ask for necessary information and provide an incentive for signing up. ASICS, above, offers a discount for new accounts and the pop-up for new accounts is a great way to help users understand that having an account is beneficial for using the site.
What fields should an account signup/login form include?
- Email address (or username)
- Password
- Toggle to signup/login
Job Application Form
Job applications are common forms on websites for companies that are hiring. This can also be one of the longest and most complex forms you will build.
Job applications often ask for quite a bit of information from candidates as well as uploads for resumes or cover letters. The trick with a job application is not to overthink it. A minimally designed form with easy-to-read information, instructions, and navigation is a must.
What fields should a job application form include?
Indeed has a great guide to all the fields you might include here. These forms will likely include multiple sections for content:
- Personal information
- Educational background
- Work history
- Resume upload
- References
- Signature
- Date
Support or Help Request Form
Support or help request forms can also be fairly custom based on what your company or website does. For many websites that have support or help forms, they are only available to logged-in users, which can streamline the form process so that people don’t have to fill in account or contact information.
These forms should be simple and to the point, allowing users to state who they are and what issue they are having. Make sure to ask for any relevant information about software, browsers, or tools if that’s relevant to your product or service.
What fields should a support or help request form include?
- Name
- Other contact information (optional)
- Account number or information
- Description of problem
- Browser or device type
- Screenshot of problem
Donation Form
For nonprofit organizations, donation forms are a vital part of their online strategy. These forms should make it easy for people to donate and understand what they are donating to.
Donation forms often include an image or description of the cause being supported as well as multiple options for donations – one-time vs. recurring, for different amounts, in honor of someone, etc. The fields on a donation form are similar to those used with payment forms.
What fields should a donation form include?
- Name
- Phone
- Address (billing and/or shipping)
- Amount/total
- Taxes or fees (or fee reimbursements for online processing)
- Payment information (credit card, PayPal etc.)
- Special instructions
Conclusion
A good form can propel the value of a website forward. They help generate leads, email signups, user engagement, and sales. A well-designed form includes just enough information to convey a message in a simple manner that’s easy to understand.
A user who is frustrated or doesn’t understand your forms will often leave them unfilled. Make sure to design forms to ask for only necessary information and work intuitively and with ease.