Category · Forms Difficulty Level · Intermediate Published on · January 30, 2024

Modern Contact Form

Sleek contact form with floating labels, validation animations, and smooth transitions, perfect for professional websites.

#contact #form #validation #floating-labels #modern

Responsive Design

Yes

Dark Mode Support

lines

436

Browser Compatibility

Chrome · Firefox · Safari · Edge

Live Preview

Interact with the component without leaving the page.

450px

Overview

Sleek contact form with floating labels, validation animations, and smooth transitions, perfect for professional websites.

How to use

Copy the HTML markup into your page.
Paste the CSS into your stylesheet and ensure the selectors match your markup.
Paste the JavaScript and load it after the markup.
Adjust spacing, colors, and text to match your design system.

Customization tips

Rename class names to avoid collisions with your existing CSS.
Replace hard-coded colors with CSS variables for theming.
Verify the layout at 320px, 768px, and 1024px widths.

HTML

lines

CSS

257

lines

JavaScript

111

lines

                <div class="contact-form-container">
  <div class="form-header">
    <h2>Get In Touch</h2>
    <p>We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
  </div>
  
  <form class="contact-form" id="contactForm">
    <div class="form-row">
      <div class="form-group">
        <input type="text" id="firstName" name="firstName" required>
        <label for="firstName">First Name</label>
        <span class="form-line"></span>
      </div>
      
      <div class="form-group">
        <input type="text" id="lastName" name="lastName" required>
        <label for="lastName">Last Name</label>
        <span class="form-line"></span>
      </div>
    </div>
    
    <div class="form-group">
      <input type="email" id="email" name="email" required>
      <label for="email">Email Address</label>
      <span class="form-line"></span>
      <span class="error-message" id="emailError"></span>
    </div>
    
    <div class="form-group">
      <input type="tel" id="phone" name="phone">
      <label for="phone">Phone Number (Optional)</label>
      <span class="form-line"></span>
    </div>
    
    <div class="form-group">
      <select id="subject" name="subject" required>
        <option value=""></option>
        <option value="general">General Inquiry</option>
        <option value="support">Support</option>
        <option value="business">Business Partnership</option>
        <option value="other">Other</option>
      </select>
      <label for="subject">Subject</label>
      <span class="form-line"></span>
    </div>
    
    <div class="form-group">
      <textarea id="message" name="message" rows="5" required></textarea>
      <label for="message">Message</label>
      <span class="form-line"></span>
    </div>
    
    <div class="form-group checkbox-group">
      <input type="checkbox" id="newsletter" name="newsletter">
      <label for="newsletter" class="checkbox-label">
        <span class="checkbox-custom"></span>
        Subscribe to our newsletter for updates
      </label>
    </div>
    
    <button type="submit" class="submit-btn">
      <span class="btn-text">Send Message</span>
      <span class="btn-loader">
        <span class="spinner"></span>
      </span>
    </button>
  </form>
</div>

              

                .contact-form-container {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
}

.form-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 15px 0;
}

.form-header p {
  color: #666;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  position: relative;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 15px 0 10px 0;
  border: none;
  border-bottom: 2px solid #e1e5e9;
  background: transparent;
  font-size: 16px;
  color: #333;
  transition: all 0.3s ease;
  outline: none;
  font-family: inherit;
}

.form-group label {
  position: absolute;
  top: 15px;
  left: 0;
  color: #999;
  font-size: 16px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-group input:focus + label,
.form-group input:valid + label,
.form-group select:focus + label,
.form-group select:valid + label,
.form-group textarea:focus + label,
.form-group textarea:valid + label {
  top: -5px;
  font-size: 12px;
  color: #667eea;
  font-weight: 600;
}

.form-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: width 0.3s ease;
}

.form-group input:focus ~ .form-line,
.form-group select:focus ~ .form-line,
.form-group textarea:focus ~ .form-line {
  width: 100%;
}

.form-group select {
  cursor: pointer;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.checkbox-group input[type="checkbox"] {
  display: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  position: static;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
}

.checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  color: white;
  font-size: 12px;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.checkbox-group input[type="checkbox"]:checked + .checkbox-label .checkbox-custom {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
}

.checkbox-group input[type="checkbox"]:checked + .checkbox-label .checkbox-custom::after {
  transform: translate(-50%, -50%) scale(1);
}

.submit-btn {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 18px 40px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  margin-top: 20px;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.btn-text {
  transition: opacity 0.3s ease;
}

.btn-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.submit-btn.loading .btn-text {
  opacity: 0;
}

.submit-btn.loading .btn-loader {
  opacity: 1;
}

.error-message {
  position: absolute;
  bottom: -20px;
  left: 0;
  color: #e74c3c;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.form-group.error input {
  border-bottom-color: #e74c3c;
}

.form-group.error .error-message {
  opacity: 1;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.form-success {
  text-align: center;
  padding: 40px;
  color: #27ae60;
}

.form-success h3 {
  font-size: 1.5rem;
  margin: 0 0 15px 0;
}

.form-success p {
  color: #666;
  margin: 0;
}@media (max-width: 768px) {
  .contact-form-container {
    padding: 30px 20px;
    margin: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .form-header h2 {
    font-size: 1.75rem;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('contactForm');
  const submitBtn = form.querySelector('.submit-btn');
  const inputs = form.querySelectorAll('input, select, textarea');
  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+\$/;
    return re.test(email);
  }
  
  function showError(input, message) {
    const formGroup = input.closest('.form-group');
    const errorElement = formGroup.querySelector('.error-message');
    
    formGroup.classList.add('error');
    if (errorElement) {
      errorElement.textContent = message;
    }
  }
  
  function clearError(input) {
    const formGroup = input.closest('.form-group');
    formGroup.classList.remove('error');
  }
  inputs.forEach(input => {
    input.addEventListener('blur', function() {
      validateField(this);
    });
    
    input.addEventListener('input', function() {
      clearError(this);
    });
  });
  
  function validateField(field) {
    const value = field.value.trim();
    
    if (field.hasAttribute('required') && !value) {
      showError(field, 'This field is required');
      return false;
    }
    
    if (field.type === 'email' && value && !validateEmail(value)) {
      showError(field, 'Please enter a valid email address');
      return false;
    }
    
    clearError(field);
    return true;
  }
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    let isValid = true;
    inputs.forEach(input => {
      if (!validateField(input)) {
        isValid = false;
      }
    });
    
    if (!isValid) {
      return;
    }
    submitBtn.classList.add('loading');
    setTimeout(() => {
      submitBtn.classList.remove('loading');
      showSuccessMessage();
    }, 2000);
  });
  
  function showSuccessMessage() {
    const container = document.querySelector('.contact-form-container');
    container.innerHTML = `
      <div class="form-success">
        <div style="font-size: 4rem; margin-bottom: 20px;">✅</div>
        <h3>Message Sent Successfully!</h3>
        <p>Thank you for contacting us. We'll get back to you within 24 hours.</p>
        <button onclick="location.reload()" style="
          margin-top: 30px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          border: none;
          padding: 12px 24px;
          border-radius: 25px;
          cursor: pointer;
          font-weight: 600;
        ">Send Another Message</button>
      </div>
    `;
  }
  inputs.forEach(input => {
    input.addEventListener('focus', function() {
      this.closest('.form-group').classList.add('focused');
    });
    
    input.addEventListener('blur', function() {
      this.closest('.form-group').classList.remove('focused');
    });
  });
  const focusStyles = `
    .form-group.focused {
      transform: translateY(-2px);
    }
    
    .form-group {
      transition: transform 0.2s ease;
    }
  `;
  
  const styleSheet = document.createElement('style');
  styleSheet.textContent = focusStyles;
  document.head.appendChild(styleSheet);
});

              

Browser Compatibility

Chrome

>= 50

Firefox

>= 45

Safari

>= 10

Edge

>= 15

Markdown to HTML Converter

Privacy Policy Generator

Modern Contact Form

Live Preview

Overview

How to use

Customization tips

Browser Compatibility

Related Code Snippets

3D Flip Card FAQ

Animated Gradient FAQ

Glassmorphism FAQ Accordion

Explore template packs