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 Multi Step Form Wizard with JavaScript

    How to Build a Multi Step Form Wizard with JavaScript

    Tutorial Intermediate

    In this tutorial, we will build a multi step form using JavaScript, HTML, and CSS (perfect for questionnaires and quizzes).

  2. JavaScript Form Validation (Practical Tutorial)

    JavaScript Form Validation (Practical Tutorial)

    Tutorial Intermediate

    In this tutorial, we’ll build a simple login form and add front-end validation with vanilla JavaScript. The overarching goal is to provide helpful feedback...

  3. Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript

    Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript

    Tutorial Beginner

    Let’s reduce spam from form submissions. This technique will use PHP and JavaScript to block form submission until the user provides the correct answer to a...

  4. How to Customize Contact Form 7 for WordPress: Enhanced Email Template

    How to Customize Contact Form 7 for WordPress: Enhanced Email Template

    Tutorial Beginner

    In this short tutorial, I’ll show you a straightforward approach for customizing the email template sent from WordPress Contact Form 7 (CF7) plugin, making...

  5. How to Customize Contact Form 7 for WordPress: Checkboxes and Radio Buttons

    How to Customize Contact Form 7 for WordPress: Checkboxes and Radio Buttons

    Tutorial Beginner

    Learn how to build custom checkboxes and radio buttons with the WordPress Contact Form 7 (CF7) plugin.

  6. 25 Best WordPress Login Forms on CodeCanyon (Free & Premium)

    25 Best WordPress Login Forms on CodeCanyon (Free & Premium)

    Tutorial Beginner

    CodeCanyon has WordPress login plugins for any type of website or business. Add a fully customizable login form to your website to welcome your users.

  7. Best WordPress Form Builder Plugins for 2023

    Best WordPress Form Builder Plugins for 2023

    Tutorial Beginner

    Find the best form builder plugin for WordPress to make the professional forms for your website. Also, we've got form builder WordPress plugin free options...

  8. Better Focus Styles with CSS Pseudo-Class :focus-visible

    Better Focus Styles with CSS Pseudo-Class :focus-visible

    Tutorial Beginner

    In this quick tip I’m going to show you how to create better focus styles on form elements with a CSS pseudo-class called :focus-visible.

  9. HTML5 Form Validation With the “pattern” Attribute

    HTML5 Form Validation With the “pattern” Attribute

    Tutorial Intermediate

    In this tutorial we’ll explore HTML’s pattern attribute, using it to help us customize the way we validate our forms.

  10. How to Create an Elementor Contact Form for WordPress

    How to Create an Elementor Contact Form for WordPress

    Tutorial Beginner

    Being able to get in touch is one of the most common goals for your website users. In this video, you’ll learn how to use the free version of Elementor along...

  11. Quick Tip: Add a Formspree Form to Your Static Sites

    Quick Tip: Add a Formspree Form to Your Static Sites

    Tutorial Beginner

    In this tutorial we’re going to use Formspree for a hassle-free way of adding dynamic, flexible forms to your static websites.

  12. How to Customize Contact Form 7 for WordPress: Handmade SVG

    How to Customize Contact Form 7 for WordPress: Handmade SVG

    Tutorial Intermediate

    In a previous tutorial you learned how to create a responsive handmade SVG form. Today we’ll go a step further and make it dynamic. We’ll cover how to...