How to Create a Practical Form with JavaScript

JavaScript
Written by Rick Bowen (JavaScript)

I’m your friendly neighborhood developer, and today I’m going to walk you through the process of creating a practical form using JavaScript. Forms are an essential part of web development, whether you’re building a simple contact form or a complex multi-step registration process. You’ll have a solid understanding of how to create a functional, user-friendly form with JavaScript.

Why Forms Matter

Before we jump into the code, let’s talk about why forms are so important. Forms are the primary way users interact with your website. They allow users to input data, make selections, and submit information. Whether it’s signing up for a newsletter, logging into an account, or making a purchase, forms are everywhere.

But here’s the thing: a poorly designed form can frustrate users and lead to abandoned submissions. That’s why it’s crucial to create forms that are not only functional but also intuitive and responsive. JavaScript plays a key role in enhancing form functionality by adding interactivity, validation, and real-time feedback.

Building a Practical Form

For this project, we’ll create a simple yet practical contact form. The form will include fields for the user’s name, email, and message. We’ll use JavaScript to validate the inputs and provide feedback to the user. Here’s what the final form will do:

  1. Validate the name field to ensure it’s not empty.
  2. Validate the email field to ensure it contains a valid email address.
  3. Validate the message field to ensure it’s not empty and has a minimum length.
  4. Display error messages if any validation fails.
  5. Submit the form if all inputs are valid.

Setting Up the HTML Structure

First, let’s create the basic HTML structure for our form. Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practical Form with JavaScript</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="form-container">
    <h1>Contact Us</h1>
    <form id="contactForm">
      <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your name">
        <span class="error-message" id="nameError"></span>
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email">
        <span class="error-message" id="emailError"></span>
      </div>
      <div class="form-group">
        <label for="message">Message:</label>
        <textarea id="message" name="message" placeholder="Enter your message"></textarea>
        <span class="error-message" id="messageError"></span>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
  <script src="script.js"></script>
</body>
</html>

Explanation:

  • We’ve created a simple form with three fields: name, email, and message.
  • Each input field has a corresponding <span> element to display error messages.
  • The form has a submit button to trigger the validation and submission process.

Styling the Form with CSS

Next, let’s add some basic styling to make the form look clean and user-friendly. Here’s the CSS code:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.error-message {
  color: red;
  font-size: 12px;
  display: none;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

Explanation:

  • The form is centered on the page with a clean, modern design.
  • Error messages are hidden by default and will be displayed dynamically using JavaScript.
  • The submit button has a hover effect to enhance interactivity.

Adding JavaScript for Validation

Now, let’s add the JavaScript code to handle form validation and submission. Here’s the code:

// script.js
document.getElementById('contactForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent form submission

  // Get form values
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  const message = document.getElementById('message').value.trim();

  // Clear previous error messages
  document.getElementById('nameError').textContent = '';
  document.getElementById('emailError').textContent = '';
  document.getElementById('messageError').textContent = '';

  let isValid = true;

  // Validate name
  if (name === '') {
    document.getElementById('nameError').textContent = 'Name is required';
    isValid = false;
  }

  // Validate email
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (email === '') {
    document.getElementById('emailError').textContent = 'Email is required';
    isValid = false;
  } else if (!emailPattern.test(email)) {
    document.getElementById('emailError').textContent = 'Invalid email address';
    isValid = false;
  }

  // Validate message
  if (message === '') {
    document.getElementById('messageError').textContent = 'Message is required';
    isValid = false;
  } else if (message.length < 10) {
    document.getElementById('messageError').textContent = 'Message must be at least 10 characters';
    isValid = false;
  }

  // Submit form if valid
  if (isValid) {
    alert('Form submitted successfully!');
    // Here you can add code to send the form data to a server
  }
});

Explanation:

  • We prevent the default form submission using event.preventDefault().
  • We validate each field and display error messages if the input is invalid.
  • The email validation uses a regular expression to check for a valid email format.
  • If all inputs are valid, an alert is shown to simulate a successful submission.

Final Thoughts

Creating a practical form with JavaScript is all about balancing functionality and user experience. By adding validation and real-time feedback, you can ensure that users submit accurate information while minimizing frustration.

Related blog posts

Load more
Know More About FSIBLOG
Useful Pages

2024 © FSIBLOG. All Rights Reserved.