Skip to main content

​
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="[email protected]" 
                 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();
  });
})();
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">+57 322 952 0608</p>
    </div>

    <div class="col-md-4 contact-list mb-3">
      <i class="ti ti-mail"></i>
      <p class="contact-paragraph mt-2">[email protected]</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
Full-width button links to social platforms. 
<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:[email protected]" 
         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
  • 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

Build docs developers (and LLMs) love

Get started for freeTalk to us