Contact Component

Overview

The contact section includes a functional form with client-side validation and a success message animation. The footer displays social media links with hover effects.

HTML Structure

Contact Section

index.html (lines 411-458)

<section id="contact" class="py-20 bg-black bg-opacity-50">
  <div class="container mx-auto px-6">
    <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center">
      Contáct<span class="red-accent">ame</span>
    </h2>

    <div class="max-w-2xl mx-auto">
      <!-- Contact Form -->
      <form id="contactForm" class="space-y-6">
        <!-- Form fields -->
      </form>

      <!-- Success Message (hidden by default) -->
      <div id="successMessage" class="hidden mt-8 p-6 bg-green-900 bg-opacity-50 rounded-md text-center">
        <svg class="w-12 h-12 text-green-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        <h3 class="text-xl font-semibold mb-2">¡Mensaje enviado!</h3>
        <p class="text-gray-300">Gracias por contactarme. Te responderé lo antes posible.</p>
      </div>
    </div>
  </div>
</section>

Contact Form

Form Fields

Name Field
Email Field
Message Field
Submit Button

index.html (lines 418-423)

<div>
  <label for="name" class="block text-gray-300 mb-2">Nombre</label>
  <input type="text" id="name" name="name"
    class="form-input w-full px-4 py-2 rounded-md focus:outline-none text-white" required>
  <p class="text-red-500 text-sm mt-1 hidden" id="nameError">Por favor ingresa tu nombre</p>
</div>

index.html (lines 425-432)

<div>
  <label for="email" class="block text-gray-300 mb-2">Correo electrónico</label>
  <input type="email" id="email" name="email"
    class="form-input w-full px-4 py-2 rounded-md focus:outline-none text-white" required>
  <p class="text-red-500 text-sm mt-1 hidden" id="emailError">
    Por favor ingresa un correo válido
  </p>
</div>

index.html (lines 434-441)

<div>
  <label for="message" class="block text-gray-300 mb-2">Mensaje</label>
  <textarea id="message" name="message" rows="5"
    class="form-input w-full px-4 py-2 rounded-md focus:outline-none text-white" required></textarea>
  <p class="text-red-500 text-sm mt-1 hidden" id="messageError">
    Por favor escribe tu mensaje
  </p>
</div>

index.html (lines 443-446)

<button type="submit"
  class="bg-red-accent hover:bg-red-700 text-white px-6 py-3 rounded-md w-full font-medium transition hover-scale">
  Enviar mensaje
</button>

Form Input Styling

estilos.css (lines 102-111)

.form-input {
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid #333;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-bottom-color: #E50914;
  background: rgba(255, 255, 255, 0.15);
}

The form inputs have a subtle transparent background that brightens on focus, with a bottom border that changes to the accent color.

Form Validation

While the HTML includes validation error messages, the JavaScript implementation for validation is not present in the current source code. Here’s a recommended implementation:

JavaScript Validation (Recommended)

Form Validation Implementation

const contactForm = document.getElementById('contactForm');
const successMessage = document.getElementById('successMessage');

if (contactForm) {
  contactForm.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Get form fields
    const name = document.getElementById('name');
    const email = document.getElementById('email');
    const message = document.getElementById('message');
    
    // Get error elements
    const nameError = document.getElementById('nameError');
    const emailError = document.getElementById('emailError');
    const messageError = document.getElementById('messageError');
    
    // Reset errors
    let isValid = true;
    nameError.classList.add('hidden');
    emailError.classList.add('hidden');
    messageError.classList.add('hidden');
    
    // Validate name
    if (name.value.trim() === '') {
      nameError.classList.remove('hidden');
      isValid = false;
    }
    
    // Validate email
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email.value)) {
      emailError.classList.remove('hidden');
      isValid = false;
    }
    
    // Validate message
    if (message.value.trim() === '') {
      messageError.classList.remove('hidden');
      isValid = false;
    }
    
    // If valid, show success message
    if (isValid) {
      // Hide form
      contactForm.style.display = 'none';
      
      // Show success message
      successMessage.classList.remove('hidden');
      
      // Optional: Reset form after 3 seconds
      setTimeout(() => {
        contactForm.reset();
        contactForm.style.display = 'block';
        successMessage.classList.add('hidden');
      }, 5000);
    }
  });
}

Advanced: Server-Side Submission

To actually send emails, integrate with a backend service:

// Using FormSubmit.co (no backend required)
contactForm.addEventListener('submit', async function(e) {
  e.preventDefault();
  
  const formData = new FormData(contactForm);
  
  try {
    const response = await fetch('https://formsubmit.co/[email protected]', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      contactForm.style.display = 'none';
      successMessage.classList.remove('hidden');
    }
  } catch (error) {
    console.error('Error:', error);
    alert('Hubo un error al enviar el mensaje');
  }
});

Success Message

The success message appears after form submission with a checkmark icon.

Success Message HTML

index.html (lines 448-456)

<div id="successMessage" class="hidden mt-8 p-6 bg-green-900 bg-opacity-50 rounded-md text-center">
  <!-- Checkmark SVG Icon -->
  <svg class="w-12 h-12 text-green-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
  </svg>
  
  <h3 class="text-xl font-semibold mb-2">¡Mensaje enviado!</h3>
  <p class="text-gray-300">Gracias por contactarme. Te responderé lo antes posible.</p>
</div>

Success Animation (Optional)

Add a fade-in animation to the success message:

#successMessage {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

The footer displays social media links with hover effects.

index.html (lines 461-493)

<footer class="bg-black py-8 border-t border-gray-800">
  <div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center text-sm text-gray-400 space-y-4 md:space-y-0">
    <!-- Copyright -->
    <div class="text-center md:text-left w-full md:w-auto">
      <p>© 2026 <span class="text-white font-semibold">NILVER T.I</span> — Todos los derechos reservados.</p>
    </div>
    
    <!-- Social Media Links -->
    <div class="flex space-x-5 text-xl text-gray-400 w-full md:w-auto justify-center md:justify-end">
      <a href="https://www.instagram.com/nilvert.i/" 
         class="hover:text-pink-500 transition" 
         target="_blank"
         title="Instagram">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="https://github.com/NilverTI" 
         class="hover:text-white transition" 
         target="_blank"
         title="GitHub">
        <i class="fab fa-github"></i>
      </a>
      <a href="https://www.linkedin.com/in/nilverti/" 
         class="hover:text-blue-500 transition" 
         target="_blank"
         title="LinkedIn">
        <i class="fab fa-linkedin"></i>
      </a>
      <a href="https://tiktok.com/@nilvert.i" 
         class="hover:text-pink-400 transition" 
         target="_blank"
         title="TikTok">
        <i class="fab fa-tiktok"></i>
      </a>
      <a href="https://www.youtube.com/@nilvert.i" 
         class="hover:text-red-600 transition" 
         target="_blank"
         title="YouTube">
        <i class="fab fa-youtube"></i>
      </a>
    </div>
  </div>
</footer>

The footer uses Font Awesome icons. Each link includes:

Hover color: Platform-specific color (e.g., pink for Instagram)
Target: Opens in new tab (target="_blank")
Title: Accessible tooltip for screen readers
Transition: Smooth color change on hover

Customization Examples

<a href="https://twitter.com/yourusername" 
   class="hover:text-blue-400 transition" 
   target="_blank"
   title="Twitter">
  <i class="fab fa-twitter"></i>
</a>

Change Form Layout

<form id="contactForm" class="space-y-6">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Name field -->
    <div>
      <label for="name" class="block text-gray-300 mb-2">Nombre</label>
      <input type="text" id="name" name="name" class="form-input w-full px-4 py-2 rounded-md focus:outline-none text-white" required>
    </div>
    
    <!-- Email field -->
    <div>
      <label for="email" class="block text-gray-300 mb-2">Correo electrónico</label>
      <input type="email" id="email" name="email" class="form-input w-full px-4 py-2 rounded-md focus:outline-none text-white" required>
    </div>
  </div>
  
  <!-- Message field spans full width -->
  <div>
    <label for="message" class="block text-gray-300 mb-2">Mensaje</label>
    <textarea id="message" name="message" rows="5" class="form-input w-full px-4 py-2 rounded-md focus:outline-none text-white" required></textarea>
  </div>
  
  <button type="submit" class="bg-red-accent hover:bg-red-700 text-white px-6 py-3 rounded-md w-full font-medium transition hover-scale">
    Enviar mensaje
  </button>
</form>

Modify Form Colors

/* Change accent color to blue */
.form-input:focus {
  border-bottom-color: #3B82F6; /* Blue */
  background: rgba(59, 130, 246, 0.1);
}

/* Change submit button color */
.bg-red-accent {
  background-color: #3B82F6; /* Blue */
}

.hover\:bg-red-700:hover {
  background-color: #2563EB; /* Darker blue */
}

Customize Success Message

<!-- Add custom icon or emoji -->
<div id="successMessage" class="hidden mt-8 p-6 bg-green-900 bg-opacity-50 rounded-md text-center">
  <div class="text-6xl mb-4">✅</div>
  <h3 class="text-xl font-semibold mb-2">Success!</h3>
  <p class="text-gray-300">Your message has been sent successfully.</p>
  <button onclick="location.reload()" class="mt-4 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition">
    Send Another Message
  </button>
</div>

Accessibility Enhancements

Form Field Labels

All form fields have associated labels with proper for attributes:

<label for="name" class="block text-gray-300 mb-2">Nombre</label>
<input type="text" id="name" name="name" ... />

Error Messages

Error messages are announced to screen readers:

<input type="text" id="name" aria-describedby="nameError" ... />
<p id="nameError" role="alert" class="text-red-500 text-sm mt-1 hidden">
  Por favor ingresa tu nombre
</p>

Social Media Link Labels

Focus States

Ensure focus states are visible for keyboard navigation:

.form-input:focus {
  outline: 2px solid #E50914;
  outline-offset: 2px;
}

Email Service Integration

To actually send emails, integrate with one of these services:

FormSubmit

Free form backend - no registration required

EmailJS

Send emails using JavaScript - 200 free emails/month

Netlify Forms

Built-in form handling for Netlify sites

Formspree

Form backend with spam protection - 50 submissions/month free

Complete Form Example with Validation

<section id="contact" class="py-20 bg-black bg-opacity-50">
  <div class="container mx-auto px-6">
    <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center">
      Contáct<span class="red-accent">ame</span>
    </h2>

    <div class="max-w-2xl mx-auto">
      <form id="contactForm" class="space-y-6">
        <!-- Name -->
        <div>
          <label for="name" class="block text-gray-300 mb-2">Nombre</label>
          <input type="text" id="name" name="name" class="form-input w-full px-4 py-2 rounded-md focus:outline-none text-white" required>
          <p class="text-red-500 text-sm mt-1 hidden" id="nameError">Por favor ingresa tu nombre</p>
        </div>

        <!-- Email -->
        <div>
          <label for="email" class="block text-gray-300 mb-2">Correo electrónico</label>
          <input type="email" id="email" name="email" class="form-input w-full px-4 py-2 rounded-md focus:outline-none text-white" required>
          <p class="text-red-500 text-sm mt-1 hidden" id="emailError">Por favor ingresa un correo válido</p>
        </div>

        <!-- Message -->
        <div>
          <label for="message" class="block text-gray-300 mb-2">Mensaje</label>
          <textarea id="message" name="message" rows="5" class="form-input w-full px-4 py-2 rounded-md focus:outline-none text-white" required></textarea>
          <p class="text-red-500 text-sm mt-1 hidden" id="messageError">Por favor escribe tu mensaje</p>
        </div>

        <!-- Submit -->
        <button type="submit" class="bg-red-accent hover:bg-red-700 text-white px-6 py-3 rounded-md w-full font-medium transition hover-scale">
          Enviar mensaje
        </button>
      </form>

      <!-- Success Message -->
      <div id="successMessage" class="hidden mt-8 p-6 bg-green-900 bg-opacity-50 rounded-md text-center">
        <svg class="w-12 h-12 text-green-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        <h3 class="text-xl font-semibold mb-2">¡Mensaje enviado!</h3>
        <p class="text-gray-300">Gracias por contactarme. Te responderé lo antes posible.</p>
      </div>
    </div>
  </div>
</section>

<script>
// Form validation and submission
const contactForm = document.getElementById('contactForm');
const successMessage = document.getElementById('successMessage');

contactForm?.addEventListener('submit', function(e) {
  e.preventDefault();
  
  const name = document.getElementById('name');
  const email = document.getElementById('email');
  const message = document.getElementById('message');
  
  let isValid = true;
  
  // Validate name
  if (name.value.trim() === '') {
    document.getElementById('nameError').classList.remove('hidden');
    isValid = false;
  } else {
    document.getElementById('nameError').classList.add('hidden');
  }
  
  // Validate email
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email.value)) {
    document.getElementById('emailError').classList.remove('hidden');
    isValid = false;
  } else {
    document.getElementById('emailError').classList.add('hidden');
  }
  
  // Validate message
  if (message.value.trim() === '') {
    document.getElementById('messageError').classList.remove('hidden');
    isValid = false;
  } else {
    document.getElementById('messageError').classList.add('hidden');
  }
  
  if (isValid) {
    // Show success message
    contactForm.style.display = 'none';
    successMessage.classList.remove('hidden');
    
    // Reset after 5 seconds
    setTimeout(() => {
      contactForm.reset();
      contactForm.style.display = 'block';
      successMessage.classList.add('hidden');
    }, 5000);
  }
});
</script>

Troubleshooting

Form not submitting

Check that the form ID matches the JavaScript selector:

console.log(document.getElementById('contactForm')); // Should not be null

Ensure the submit button is type="submit", not type="button".

Error messages not showing

Verify error message elements exist with correct IDs:

console.log(document.getElementById('nameError')); // Should not be null

Check that the hidden class is being toggled correctly.

Success message not appearing

Ensure the success message has the correct ID and starts with hidden class:

<div id="successMessage" class="hidden ...">

Social icons not displaying

Security Note: Client-side validation alone is not secure. Always validate form data on the server side to prevent malicious submissions.

Get Started

Components

Customization

Deployment

Overview

HTML Structure

Contact Section

Contact Form

Form Fields

Form Input Styling

Form Validation

JavaScript Validation (Recommended)

Advanced: Server-Side Submission

Success Message

Success Message HTML

Success Animation (Optional)

Footer

Footer HTML

Customization Examples

Change Form Layout

Modify Form Colors

Customize Success Message

Accessibility Enhancements

Email Service Integration

FormSubmit

EmailJS

Netlify Forms

Formspree

Complete Form Example with Validation

Troubleshooting

Build docs developers (and LLMs) love

Get Started

Components

Customization

Deployment

​Overview

​HTML Structure

​Contact Section

​Contact Form

​Form Fields

​Form Input Styling

​Form Validation

​JavaScript Validation (Recommended)

​Advanced: Server-Side Submission

​Success Message

​Success Message HTML

​Success Animation (Optional)

​Footer

​Footer HTML

​Social Media Icons

​Customization Examples

​Add New Social Media Link

​Change Form Layout

​Modify Form Colors

​Customize Success Message

​Accessibility Enhancements

​Email Service Integration

FormSubmit

EmailJS

Netlify Forms

Formspree

​Complete Form Example with Validation

​Troubleshooting

Build docs developers (and LLMs) love

Overview

HTML Structure

Contact Section

Contact Form

Form Fields

Form Input Styling

Form Validation

JavaScript Validation (Recommended)

Advanced: Server-Side Submission

Success Message

Success Message HTML

Success Animation (Optional)

Footer

Footer HTML

Social Media Icons

Customization Examples

Add New Social Media Link

Change Form Layout

Modify Form Colors

Customize Success Message

Accessibility Enhancements

Email Service Integration

Complete Form Example with Validation

Troubleshooting