Form design and friction reduction in Digital Marketing - Mini Project: Build & Apply

Form Design and Friction Reduction

📖 Scenario: You are creating a simple online sign-up form for a newsletter on a website. The goal is to make the form easy and quick to fill out, reducing any friction that might stop users from completing it.

🎯 Goal: Build a basic sign-up form with minimal fields and clear instructions that reduce user effort and improve completion rates.

📋 What You'll Learn

Create a form with exactly two input fields: one for email and one for name

Add a configuration variable to set the maximum allowed length for the name field

Use a simple validation logic to check if the email field contains an '@' symbol

Add a submit button with a clear label encouraging users to complete the form

💡 Why This Matters

🌍 Real World

Online forms are everywhere--from signing up for newsletters to making purchases. Designing forms that are easy and quick to fill out helps keep users engaged and reduces drop-offs.

💼 Career

Marketing professionals and web designers use form design principles to improve user experience and increase conversion rates on websites.

1

Create the basic form structure

Create an HTML form element with two input fields: one with id="email" and type="email", and another with id="name" and type="text". Also include a label for each input describing what to enter.

Digital Marketing

Need a hint?

Use <label> tags with the for attribute matching the input id. Create two inputs inside the form.

2

Add a configuration variable for name length

Add a JavaScript variable called maxNameLength and set it to 50. This will limit the maximum characters allowed in the name input.

Digital Marketing

  Email address:
  
  Full name:
  


// Define maxNameLength variable
// Your code here

Need a hint?

Use const maxNameLength = 50; inside a <script> tag.

3

Add simple email validation logic

Add JavaScript code that selects the email input by its id and checks if its value contains the '@' symbol. Use a variable called isEmailValid to store the result of this check.

Digital Marketing

  Email address:
  
  Full name:
  


const maxNameLength = 50;

// Select email input and check if it contains '@'
// Your code here

Need a hint?

Use document.getElementById('email') to get the input element, then check value.includes('@').

4

Add a submit button with clear label

Add a button element inside the form with type="submit" and the text content Sign Up Now to encourage users to complete the form.

Digital Marketing

  Email address:
  
  Full name:
  
  


const maxNameLength = 50;
const emailInput = document.getElementById('email');
const isEmailValid = emailInput.value.includes('@');

Need a hint?

Add a <button> with type="submit" and the text Sign Up Now inside the form.