Create Interactive HTML Forms with CSS and JavaScript

When I was working on a website for a client who needed a complex contact form with real-time validation and conditional fields. The challenge was making it both user-friendly and visually appealing while ensuring data integrity.

While many developers rely on pre-built solutions, I found that building custom forms from scratch gave me complete control over functionality and appearance.

In this article, I’ll show you how to create interactive HTML forms enhanced with CSS and JavaScript.

The Anatomy of an HTML Form

Before styling or adding interactivity, we need to understand the basic structure of an HTML form.

<form action="/submit-form" method="post">
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

The <form> element wraps all form controls and has two important attributes:

• action: Where the form data gets sent
• method: How it’s sent (usually “get” or “post”)

Common form elements include:

• <input>: For text, email, password, checkboxes, etc.
• <textarea>: For multi-line text
• <select> and <option>: For dropdown menus
• <button>: For form submission

Read 51 jQuery Examples with Source Code

Style Forms with CSS

Plain HTML forms look outdated and uninviting. Let’s transform our form with CSS.

form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

input, textarea, select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

.input-error {
  border-color: #ff3860;
}

.error-message {
  color: #ff3860;
  font-size: 14px;
  margin-top: -15px;
  margin-bottom: 15px;
}

You can see the output in the screenshot below.

This CSS transforms our basic form into a modern, user-friendly interface with:

• Consistent spacing and alignment
• Subtle shadows and rounded corners
• Visual feedback on interactive elements
• Error state styling

Check out JavaScript Examples [51 Useful Examples]

Form Validation with JavaScript

Client-side validation improves user experience by providing immediate feedback before submission.

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form');
  const nameInput = document.getElementById('name');
  const emailInput = document.getElementById('email');
  const phoneInput = document.getElementById('phone');

  // Real-time validation
  emailInput.addEventListener('blur', function() {
    validateEmail(emailInput);
  });

  phoneInput.addEventListener('blur', function() {
    validatePhone(phoneInput);
  });

  // Form submission
  form.addEventListener('submit', function(event) {
    let isValid = true;

    // Validate all fields before submission
    if (!validateName(nameInput)) isValid = false;
    if (!validateEmail(emailInput)) isValid = false;
    if (!validatePhone(phoneInput)) isValid = false;

    if (!isValid) {
      event.preventDefault();
    }
  });

  // Validation functions
  function validateName(input) {
    const value = input.value.trim();
    if (value.length < 2) {
      showError(input, 'Name must be at least 2 characters');
      return false;
    } else {
      removeError(input);
      return true;
    }
  }

  function validateEmail(input) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(input.value.trim())) {
      showError(input, 'Please enter a valid email address');
      return false;
    } else {
      removeError(input);
      return true;
    }
  }

  function validatePhone(input) {
    // US phone format validation
    const phoneRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
    if (!phoneRegex.test(input.value.trim())) {
      showError(input, 'Please enter a valid US phone number');
      return false;
    } else {
      removeError(input);
      return true;
    }
  }

  function showError(input, message) {
    input.classList.add('input-error');

    // Remove any existing error message
    const existingError = input.nextElementSibling;
    if (existingError && existingError.classList.contains('error-message')) {
      existingError.remove();
    }

    // Create and insert error message
    const errorDiv = document.createElement('div');
    errorDiv.className = 'error-message';
    errorDiv.innerText = message;
    input.parentNode.insertBefore(errorDiv, input.nextElementSibling);
  }

  function removeError(input) {
    input.classList.remove('input-error');

    // Remove error message if it exists
    const existingError = input.nextElementSibling;
    if (existingError && existingError.classList.contains('error-message')) {
      existingError.remove();
    }
  }
});

You can see the output in the screenshot below.

This JavaScript provides:

• Real-time validation as users fill out the form
• Specific error messages for different validation failures
• Visual indicators for errors using our CSS classes
• Preventing form submission if validation fails

Read Check Which Radio Button is Selected Using jQuery

Create a Complete Registration Form

Let’s combine everything into a practical example: a user registration form for a fictional American fitness club.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>FitLife USA Membership Registration</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f5f7fa;
      padding: 20px;
    }

    h1 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 30px;
    }

    form {
      max-width: 700px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f9f9f9;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
    }

    input, textarea, select {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
    }

    .form-row {
      display: flex;
      gap: 20px;
      margin-bottom: 0;
    }

    .form-row > div {
      flex: 1;
    }

    .checkbox-group {
      margin-bottom: 20px;
    }

    .checkbox-group label {
      display: inline-flex;
      align-items: center;
      font-weight: normal;
      margin-right: 15px;
      cursor: pointer;
    }

    .checkbox-group input {
      width: auto;
      margin-right: 5px;
      margin-bottom: 0;
    }

    .membership-options,
    .card-details {
      display: none;
      padding: 15px;
      border-radius: 4px;
    }

    .membership-options {
      background-color: #e8f4f8;
    }

    .card-details {
      background-color: #f8f8e8;
    }

    .show {
      display: block;
    }

    button {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #45a049;
    }

    .input-error {
      border-color: #ff3860;
    }

    .error-message {
      color: #ff3860;
      font-size: 14px;
      margin-top: -15px;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <h1>FitLife USA Membership Registration</h1>

  <form id="registrationForm" action="/register" method="post">
    <div class="form-row">
      <div>
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" name="firstName" required />
      </div>

      <div>
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" name="lastName" required />
      </div>
    </div>

    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" required />

    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone" placeholder="(123) 456-7890" required />

    <label for="address">Street Address:</label>
    <input type="text" id="address" name="address" required />

    <div class="form-row">
      <div>
        <label for="city">City:</label>
        <input type="text" id="city" name="city" required />
      </div>

      <div>
        <label for="state">State:</label>
        <select id="state" name="state" required>
          <option value="">Select State</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <!-- Add other states here -->
          <option value="WY">Wyoming</option>
        </select>
      </div>

      <div>
        <label for="zip">ZIP Code:</label>
        <input type="text" id="zip" name="zip" pattern="[0-9]{5}" placeholder="12345" required />
      </div>
    </div>

    <label>Membership Type:</label>
    <div class="checkbox-group">
      <label><input type="radio" name="membershipType" value="basic" checked /> Basic ($29.99/month)</label>
      <label><input type="radio" name="membershipType" value="premium" /> Premium ($49.99/month)</label>
      <label><input type="radio" name="membershipType" value="family" /> Family ($79.99/month)</label>
    </div>

    <div id="membershipOptions" class="membership-options">
      <label>Additional Options:</label>
      <div class="checkbox-group">
        <label><input type="checkbox" name="personalTrainer" /> Personal Trainer (+$50/month)</label>
        <label><input type="checkbox" name="nutritionConsultation" /> Nutrition Consultation (+$30/month)</label>
      </div>
    </div>

    <label for="paymentMethod">Payment Method:</label>
    <select id="paymentMethod" name="paymentMethod" required>
      <option value="">Select Payment Method</option>
      <option value="creditCard">Credit Card</option>
      <option value="bankTransfer">Bank Transfer</option>
      <option value="PayPal">PayPal</option>
    </select>

    <div id="cardDetails" class="card-details">
      <div class="form-row">
        <div>
          <label for="cardNumber">Card Number:</label>
          <input type="text" id="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456" />
        </div>

        <div>
          <label for="expiryDate">Expiry Date:</label>
          <input type="text" id="expiryDate" name="expiryDate" placeholder="MM/YY" />
        </div>

        <div>
          <label for="cvv">CVV:</label>
          <input type="text" id="cvv" name="cvv" placeholder="123" />
        </div>
      </div>
    </div>

    <label>
      <input type="checkbox" id="terms" name="terms" required />
      I agree to the <a href="#" id="termsLink">Terms and Conditions</a>
    </label>

    <button type="submit">Register</button>
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const paymentMethod = document.getElementById('paymentMethod');
      const cardDetails = document.getElementById('cardDetails');
      const membershipOptions = document.getElementById('membershipOptions');
      const membershipRadios = document.querySelectorAll('input[name="membershipType"]');

      // Toggle card details
      paymentMethod.addEventListener('change', function () {
        if (this.value === 'creditCard') {
          cardDetails.classList.add('show');
        } else {
          cardDetails.classList.remove('show');
        }
      });

      // Toggle membership options
      membershipRadios.forEach(radio => {
        radio.addEventListener('change', function () {
          if (this.value === 'premium' || this.value === 'family') {
            membershipOptions.classList.add('show');
          } else {
            membershipOptions.classList.remove('show');
          }
        });
      });
    });
  </script>
</body>
</html>

You can see the output in the screenshot below.

This code provides:

• A full registration form with user, membership, and payment details
• Clean and modern styling with CSS
• Interactive behavior using JavaScript (shows card or extra options based on selections)

It creates a smooth and user-friendly form experience.

Creating interactive HTML forms with CSS and JavaScript gives you full control over design and behavior.
For simple forms, basic HTML and CSS styling (like in the first example) is often enough.
When you need dynamic features like conditional fields and validation, adding JavaScript becomes essential.
This hands-on approach ensures your forms are both user-friendly and fully customized to your needs.

Other tutorials you may read:

• Check if a Checkbox is Checked Using jQuery
• Handle Dropdown Change Event in jQuery
• Execute Functions After Page Load Using jQuery

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/