You're a UX designer for an online form-building company (competitors are Typeform and Jotform).

The company is doing a complete redesign of their product. It's a small company and you are tasked with designing the individual inputs and controls that clients can add to their forms.


In either a design program or HTML/CSS, design the following for the new forms:

  • Button
  • Text input
  • Textarea
  • Select
  • Checkbox
  • Radio
  • Switch/toggle
  • File input

Annotate your designs with the reasoning behind your decisions.

Extra Credit: Include mockups or guidance for how to use validation, add labels, and build layouts (like spacing, placement, input groups, etc.)


If you need help with this challenge, check out our hand-picked tutorial recommendations.

Form Design

Best Practices For Mobile Form Design

16 Tips that Will Improve Any Online Form

UX Form Design Basics


Not sure which tools to use? Try one of these.



Share Your Results

When you finish the challenge, post your work on Twitter! Be sure to use the hashtag #uxtoolschallenges and tag our account @uxtoolsco. We'll keep an eye out and repost good examples on a regular basis.

We're also building a new community for designers where you'll be able to get even more feedback. See more details.

More Challenges

Heuristic Evaluation
Digital Prototype

 All Challenges

Download hi-res versions of the cards

Join 70k+ newsletter subscribers and get a PDF download of all the cards. You'll also stay up to date with weekly lessons and news.

    Email newsletter signup