Learn about Forms

Learn to design user-friendly forms that improve conversion rates and minimize user frustration with these tutorials on form design best practices.
  1. Learn the Rules of Great Form Design in Our New Short Course

    Learn the Rules of Great Form Design in Our New Short Course

    Tutorial Beginner

    In this course you’ll learn the key rules for great form design. From how to organize form elements, to input lengths and types, to forms on mobile devices,...

  2. Building a Bootstrap Contact Form Using PHP and AJAX

    Building a Bootstrap Contact Form Using PHP and AJAX

    Tutorial Beginner

    In this tutorial I’ll go over the steps to create a working contact form, utilising the ever popular front-end framework Bootstrap, in combination with AJAX...

  3. CodePen Challenge #2: Results!

    CodePen Challenge #2: Results!

    Tutorial Beginner

    Last week we asked you to take part in our second CodePen Challenge: styling a mailing list sign up form. More than 60 of you took part, offering some really...

  4. CodePen Challenge #2: Style a Signup Form

    CodePen Challenge #2: Style a Signup Form

    Tutorial Beginner

    It’s time for another CodePen Challenge! This time I want you to show us what you can do to a simple signup form. That’s all. The best examples will be...

  5. Design a Material-Inspired Mobile Login Form in Sketch

    Design a Material-Inspired Mobile Login Form in Sketch

    Tutorial Beginner

    In this tutorial you’ll learn to design a sign-in form, inspired by the aesthetic lessons from Google’s Material Design. We’ll cover some good practices to...

  6. How to Integrate “No CAPTCHA reCAPTCHA” in Your Website

    How to Integrate “No CAPTCHA reCAPTCHA” in Your Website

    Tutorial Beginner

    In this tutorial we’ll introduce Google’s new No CAPTCHA form security, then integrate into a web page using PHP.

  7. How to Use JotForm’s Form Design Tool

    How to Use JotForm’s Form Design Tool

    Tutorial Beginner

    JotForm is a form building service; it allows you to build and host your forms on their platform, then slot them into your webpages however you like. Today...

  8. Designing a Web App UI Kit‏ in Adobe Photoshop

    Designing a Web App UI Kit‏ in Adobe Photoshop

    Tutorial Intermediate

    Style guide driven development offers a hugely flexible approach to modern web design. In this tutorial I'll walk you through designing a UI (user interface)...

  9. CSS Experiments With a Search Form Input and Button

    CSS Experiments With a Search Form Input and Button

    Tutorial Intermediate

    In this tutorial, I’d like to explore how you can embellish a simple search form. We won’t be doing anything crazy, instead exploring four different takes on...

  10. Sketch for Beginners: Design a Login Form Interface

    Sketch for Beginners: Design a Login Form Interface

    Tutorial Beginner

    In the following tutorial you will learn how to create a simple login screen using Sketch 3.

  11. Bring Your Forms Up to Date With CSS3 and HTML5 Validation

    Bring Your Forms Up to Date With CSS3 and HTML5 Validation

    Tutorial Beginner

    Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some...

  12. Quick Tip: Easy CSS3 Checkboxes and Radio Buttons

    Quick Tip: Easy CSS3 Checkboxes and Radio Buttons

    Tutorial Beginner

    Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can!