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. How to Build a Responsive Handmade SVG Form

    How to Build a Responsive Handmade SVG Form

    Tutorial Intermediate

    In this tutorial, we’ll continue the journey into the “forms” world and learn to create a responsive handmade SVG form from scratch.

  2. Quick Tip: How to Create an Off-Canvas Feedback Form With Pure CSS

    Quick Tip: How to Create an Off-Canvas Feedback Form With Pure CSS

    Tutorial Beginner

    In this tutorial, we’ll walk through the process of creating an off-canvas feedback form. We won’t use any JavaScript to accomplish this, in fact, we’ll...

  3. Create a Stylish Dark Contact Form with HTML, CSS, and JavaScript

    Create a Stylish Dark Contact Form with HTML, CSS, and JavaScript

    Tutorial Intermediate

    In this tutorial, we’ll walk through the process of styling basic contact form elements. We’ll examine different ways for making a form beautiful and fully...

  4. New Course: Best Practices for Displaying Form Errors

    New Course: Best Practices for Displaying Form Errors

    Tutorial Beginner

    Helpful error messages can improve the user experience. Learn how to get it right in our new short course, Best Practices for Displaying Form Errors.

  5. How to Make Custom Accessible Checkboxes and Radio Buttons

    How to Make Custom Accessible Checkboxes and Radio Buttons

    Tutorial Beginner

    In this tutorial I’ll explain how to customize the appearance of checkboxes and radio buttons, whilst making sure that they remain accessible for Assistive...

  6. New Course: Form Validation With Parsley

    New Course: Form Validation With Parsley

    Tutorial Beginner

    If you ever have to tackle form validation, you can save yourself a lot of time and headaches by taking our new short course, Form Validation With Parsley.

  7. JotForm 4.0: Mobile Builder, Collaboration and More

    JotForm 4.0: Mobile Builder, Collaboration and More

    Tutorial Beginner

    JotForm is an online form building service and it’s recently undergone an update. The new UI is easier to use, comes with some new features, and has a ton of...

  8. How to Build a Responsive Form With Flexbox

    How to Build a Responsive Form With Flexbox

    Tutorial Beginner

    In this tutorial, we’ll learn how to take advantage of flexbox to create a responsive form. What’s interesting (and exciting at the same time) is that...

  9. Form Design: How to Automatically Format User Input

    Form Design: How to Automatically Format User Input

    Tutorial Intermediate

    In this tutorial you’ll learn how to format, real time, user input in a form field. As a user types something into an input field the value will be adjusted...

  10. How to Make Floating Input Labels With HTML5 Validation

    How to Make Floating Input Labels With HTML5 Validation

    Tutorial Intermediate

    Replace your JavaScript validation with HTML5 validation. It’s easier than you think, and gives you a ton of markup and styling control.

  11. Learning Material Design Lite: Text Fields

    Learning Material Design Lite: Text Fields

    Tutorial Beginner

    Next up in our series learning the ins and outs of Material Design Lite (MDL) we’re going to look into the Text Fields component. A text field could be used...

  12. A Quick Introduction to 123FormBuilder

    A Quick Introduction to 123FormBuilder

    Tutorial Beginner

    Welcome to this quick introduction to a web service called 123FormBuilder. 123FormBuilder allows you to create many different kinds of forms, plus quizzes,...