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.
Read moreRead less
All content
Courses
Tutorials

All Forms tutorials:

  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. 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...

  7. 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...

  8. 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...

  9. 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.

  10. 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...

  11. 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,...

  12. 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...

Related Categories

CSS
HTML/CSS
UI Design
Sketch
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.