Contact Section Component

Contact form with WhatsApp integration, contact info cards, and social links

Contact Section Component

The contact section includes a form that sends messages via WhatsApp, contact information cards, and social media links.

Section Structure

<section id="contact">
  <div class="container">

    <!-- Title -->
    <div class="py-4 my-4">
      <h1 class="fw-bold mt-5">Contacto</h1>
      <p>¿Tienes una idea o quieres trabajar conmigo? ¡Hablemos!</p>
    </div>

    <hr class="mid-break my-2">

    <!-- Contact Form -->
    <div class="py-4 my-4">
      <!-- Form content -->
    </div>

    <hr class="mid-break my-2">

    <!-- Contact Information -->
    <div class="py-4 my-4">
      <!-- Contact cards -->
    </div>

    <hr class="mid-break my-2">

    <!-- Social Networks -->
    <div class="py-4 my-4">
      <!-- Social links -->
    </div>
  </div>
</section>

Contact Form

The form collects user information and sends it via WhatsApp using JavaScript.

Form HTML

<div class="py-4 my-4">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <form id="miniContactForm" class="row g-3">
        <div class="col-md-6">
          <label for="contactName" class="form-label">Nombre</label>
          <input type="text" 
                 class="form-control" 
                 id="contactName" 
                 name="name" 
                 placeholder="Tu nombre" 
                 required>
        </div>
        
        <div class="col-md-6">
          <label for="contactEmail" class="form-label">Email</label>
          <input type="email" 
                 class="form-control" 
                 id="contactEmail" 
                 name="email" 
                 placeholder="[e-mail]" 
                 required>
        </div>
        
        <div class="col-12">
          <label for="contactMessage" class="form-label">Mensaje</label>
          <textarea class="form-control" 
                    id="contactMessage" 
                    name="message" 
                    rows="4" 
                    placeholder="Cuéntame brevemente tu idea" 
                    required></textarea>
        </div>
        
        <div class="col-12 d-flex gap-2">
          <button type="submit" class="btn btn-primary">
            <i class="ti ti-send"></i> Enviar
          </button>
          <button type="reset" class="btn btn-outline-secondary">
            <i class="ti ti-rotate"></i> Limpiar
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

Form Layout

col-lg-8 · class

Form container uses 8 columns (66% width) on large screens, centered

row g-3 · class

Grid layout with 1rem gap between elements

col-md-6 · class

Name and email fields use 50% width on medium screens and above

col-12 · class

Message field and buttons span full width

WhatsApp Integration

The form submission is handled by JavaScript that formats the data and opens WhatsApp.

JavaScript Implementation

// Form handling: WhatsApp only
(function () {
  const form = document.getElementById('miniContactForm');
  if (!form) return;

  const toWhatsapp = '573229520608'; // Destination number without symbols, with country code

  form.addEventListener('submit', function (e) {
    e.preventDefault();

    const name = document.getElementById('contactName').value.trim();
    const email = document.getElementById('contactEmail').value.trim();
    const message = document.getElementById('contactMessage').value.trim();

    if (!name || !email || !message) {
      alert('Por favor completa nombre, email y mensaje.');
      return;
    }

    // Build base message
    const msg = `Hola Buen DIa, soy ${name}.\n mi correo es: ${email}\n y quiero conversar con tigo de:${message}`;

    // Send to WhatsApp
    const waUrl = `https://wa.me/${toWhatsapp}?text=${encodeURIComponent(msg)}`;
    window.open(waUrl, '_blank');

    // Reset form
    form.reset();
  });
})();

WhatsApp Integration Details

How it works:

1. Prevent default form submission behavior
2. Validate all required fields are filled
3. Format message with name, email, and message content
4. Encode message using encodeURIComponent() for URL safety
5. Build WhatsApp URL using wa.me API format
6. Open in new tab using window.open()
7. Reset form after successful submission

WhatsApp URL Format:

https://wa.me/{phone_number}?text={encoded_message}

Phone Number Format:

• No spaces, dashes, or parentheses
• Include country code
• Example: 573229520608 (Colombia +57)

Customizing WhatsApp Number

const toWhatsapp = '573229520608'; // Change this to your number

Message Template

const msg = `Hola Buen DIa, soy ${name}.\n mi correo es: ${email}\n y quiero conversar con tigo de:${message}`;

Contact Information Cards

Three cards display contact methods with icons.

Cards HTML

<div class="py-4 my-4">
  <div class="row justify-content-around text-center">

    <div class="col-md-4 contact-list mb-3">
      <i class="ti ti-phone"></i>
      <p class="contact-paragraph mt-2">[phone]</p>
    </div>

    <div class="col-md-4 contact-list mb-3">
      <i class="ti ti-mail"></i>
      <p class="contact-paragraph mt-2">[e-mail]</p>
    </div>

    <div class="col-md-4 contact-list mb-3">
      <i class="ti ti-map-pin"></i>
      <p class="contact-paragraph mt-2">Bogotá, Colombia</p>
    </div>

  </div>
</div>

Card Styling

.contact-list {
  padding: 2rem;
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  transition: all 0.35s ease;
}

.contact-list:hover {
  transform: translateY(-8px);
  background: rgba(74, 144, 226, 0.09);
  border-color: var(--accent-color);
}

.contact-list i {
  font-size: 2.8rem;
  color: var(--accent-color);
  margin-bottom: 1.2rem;
}

Hover Effects

• Lift effect: Card moves up 8px
• Background change: Opacity increases with blue tint
• Border color: Changes to accent blue
• Transition duration: 0.35s

Social Media Links

Full-width button links to social platforms.

Social Links HTML

<div class="py-4 my-4">
  <h2 class="fw-bold pb-4 text-center">Redes Sociales</h2>

  <div class="row justify-content-around text-center">
    <div class="col-md-3 mb-3">
      <i class="ti ti-brand-github"></i>
      <a href="https://github.com/GmzQzvZ" 
         target="_blank" 
         rel="noopener noreferrer"
         class="btn btn-outline-primary btn-lg w-100">GitHub</a>
    </div>

    <div class="col-md-3 mb-3">
      <i class="ti ti-brand-linkedin"></i>
      <a href="https://www.linkedin.com/in/juan-sebastian-gomez-qui%C3%B1ones-439a502b8/"
         target="_blank" 
         rel="noopener noreferrer"
         class="btn btn-outline-primary btn-lg w-100">LinkedIn</a>
    </div>

    <div class="col-md-3 mb-3">
      <i class="ti ti-brand-whatsapp"></i>
      <a href="https://wa.link/oqpuez" 
         target="_blank" 
         rel="noopener noreferrer"
         class="btn btn-outline-primary btn-lg w-100">WhatsApp</a>
    </div>

    <div class="col-md-3 mb-3">
      <i class="ti ti-mail"></i>
      <a href="mailto:[e-mail]" 
         class="btn btn-outline-primary btn-lg w-100">Email</a>
    </div>
  </div>
</div>

Social Button Layout

col-md-3 · class

Each button occupies 25% width on medium screens and above

btn-lg · class

Large button size for better touch targets

w-100 · class

Button spans full width of its column

Form Validation

HTML5 validation is used with the required attribute.

<input type="text" required>
<input type="email" required>
<textarea required></textarea>

JavaScript Validation

if (!name || !email || !message) {
  alert('Por favor completa nombre, email y mensaje.');
  return;
}

Icons Used

Contact Cards

• ti-phone - Phone number
• ti-mail - Email address
• ti-map-pin - Location

Social Links

• ti-brand-github - GitHub profile
• ti-brand-linkedin - LinkedIn profile
• ti-brand-whatsapp - WhatsApp contact
• ti-mail - Email link

Form Buttons

• ti-send - Submit button
• ti-rotate - Reset button

Section Dividers

<hr class="mid-break my-2">

Horizontal rules separate the four subsections:

1. Title
2. Contact form
3. Contact information cards
4. Social media links

Responsive Layout

Desktop (≥ 768px)

• Form: 66% width, centered
• Contact cards: 3 columns side by side
• Social buttons: 4 columns side by side

Mobile (< 768px)

• Form: Full width
• Contact cards: Stack vertically
• Social buttons: Stack vertically

Key Features

• WhatsApp integration - Form submits directly to WhatsApp
• No backend required - Pure client-side JavaScript
• Form validation - HTML5 and JavaScript validation
• Reset functionality - Clear form with dedicated button
• Hover effects - Interactive contact cards
• Responsive grid - Bootstrap-based layout
• Icon integration - Tabler Icons for visual elements
• External links - Proper security attributes (noopener noreferrer)
• Multiple contact methods - Form, direct links, and social media