Contact Form Configuration

The contact section includes a form that sends messages via WhatsApp, contact information display, and social media links. This guide shows you how to configure everything using the actual code from the template.

Contact Section Overview

The contact section is located in index.html at lines 404-498 and includes:

Mini contact form with WhatsApp integration
Contact information display (phone, email, location)
Social media links

WhatsApp Integration Setup

The contact form sends messages directly to WhatsApp using JavaScript. The handler code is in index.html at lines 554-583.

WhatsApp Handler Code

index.html

// Manejo del mini formulario: solo WhatsApp
(function () {
  const form = document.getElementById('miniContactForm');
  if (!form) return;

  const toWhatsapp = '573229520608'; // Número destino sin signos, con código país

  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;
    }

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

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

    // Resetear formulario
    form.reset();
  });
})();

Configuring Your WhatsApp Number

Find Your WhatsApp Number

Get your WhatsApp number including country code (e.g., USA: 1, Colombia: 57, UK: 44).

Format the Number

Remove all spaces, dashes, and special characters. Include country code.Examples:

Colombia: 573229520608
USA: 15551234567
UK: 447911123456

Update the Code

Replace the number in line 559:

index.html

const toWhatsapp = '15551234567'; // Your number here

The WhatsApp number must include the country code and have NO spaces, dashes, parentheses, or plus signs.

Customizing the Message Template

The message template is at line 574. You can customize it:

index.html

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

// Professional English template
const msg = `Hello! I'm ${name}.\nEmail: ${email}\nMessage: ${message}`;

// Detailed template with subject
const msg = `New Contact Form Submission\n\nName: ${name}\nEmail: ${email}\n\nMessage:\n${message}`;

// Simple template
const msg = `${name} (${email}) says: ${message}`;

Use \n for line breaks in the WhatsApp message. Use \n\n for paragraph spacing.

Contact Form HTML

The form structure is at lines 416-438:

index.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>

Customizing Form Fields

<div class="col-md-6">
  <label for="contactPhone" class="form-label">Phone</label>
  <input type="tel" class="form-control" id="contactPhone" name="phone" placeholder="Your phone number">
</div>

Adding Custom Fields to WhatsApp Message

If you add new form fields, update the JavaScript to include them:

index.html

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

  const name = document.getElementById('contactName').value.trim();
  const email = document.getElementById('contactEmail').value.trim();
  const phone = document.getElementById('contactPhone').value.trim(); // New field
  const subject = document.getElementById('contactSubject').value.trim(); // New field
  const message = document.getElementById('contactMessage').value.trim();

  // Updated message template
  const msg = `New Contact Form\n\nName: ${name}\nEmail: ${email}\nPhone: ${phone}\nSubject: ${subject}\n\nMessage:\n${message}`;

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

  form.reset();
});

Contact Information Display

The contact information cards are at lines 444-463:

index.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>

Update Phone Number

Replace the phone number text with your own number.

Update Email Address

Change the email address to your contact email.

Update Location

Modify the location text to your city and country.

Change Icons (Optional)

You can use different Tabler Icons like ti ti-device-mobile for mobile or ti ti-mail-forward for email.

Adding More Contact Methods

Add additional contact information:

index.html

<div class="col-md-3 contact-list mb-3">
  <i class="ti ti-brand-telegram"></i>
  <p class="contact-paragraph mt-2">@yourusername</p>
</div>

<div class="col-md-3 contact-list mb-3">
  <i class="ti ti-world"></i>
  <p class="contact-paragraph mt-2">yourwebsite.com</p>
</div>

Social media buttons are at lines 468-496:

index.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:[email protected]" class="btn btn-outline-primary btn-lg w-100">Email</a>
    </div>
  </div>
</div>

Replace GitHub URL

Update the href with your GitHub profile URL.

Replace LinkedIn URL

Update with your LinkedIn profile URL.

Replace WhatsApp Link

Use https://wa.me/YOURNUMBER or create a WhatsApp link at wa.link.

Replace Email

Update the mailto: link with your email address.

Add more social media platforms:

<div class="col-md-3 mb-3">
  <i class="ti ti-brand-x"></i>
  <a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer"
     class="btn btn-outline-primary btn-lg w-100">Twitter</a>
</div>

Social icons also appear in the sidebar at lines 509-522:

index.html

<div class="social-icon my-4">
    <a href="https://github.com/GmzQzvZ" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
    <i class="ti ti-brand-github"></i>
    </a>
    <a href="https://www.linkedin.com/in/juan-sebastian-gomez-qui%C3%B1ones-439a502b8/" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
        <i class="ti ti-brand-linkedin"></i>
    </a>
    <a href="https://wa.link/oqpuez" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
        <i class="ti ti-brand-whatsapp"></i>
    </a>
    <a href="mailto:[email protected]" class="social-link" aria-label="Email">
        <i class="ti ti-mail"></i>
    </a>
</div>

Make sure to update social media links in BOTH places: the contact section AND the sidebar for consistency.

Contact Section Styling

The contact cards styling is in style.css at lines 414-432:

style.css

.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;
}

Testing WhatsApp Integration

Update WhatsApp Number

Ensure your WhatsApp number is correctly formatted in the JavaScript code.

Fill Out Test Form

Open your portfolio in a browser and fill out the contact form with test data.

Submit Form

Click the submit button. A new tab should open with WhatsApp Web.

Verify Message

Check that the pre-filled message contains all your form data correctly formatted.

Send Test Message

Send the message to confirm it arrives at your WhatsApp account.

Test the WhatsApp integration on both desktop (WhatsApp Web) and mobile (WhatsApp app) to ensure it works correctly on all devices.

Alternative: Email Integration

If you prefer email instead of WhatsApp, you can use a mailto: link:

index.html

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();

  const subject = encodeURIComponent(`Contact from ${name}`);
  const body = encodeURIComponent(`From: ${name}\nEmail: ${email}\n\nMessage:\n${message}`);

  window.location.href = `mailto:[email protected]?subject=${subject}&body=${body}`;
  
  form.reset();
});

The mailto: method requires the user to have an email client configured. WhatsApp integration generally provides a better user experience.

Getting Started

Customization

Components

Deployment

Contact Section Overview

WhatsApp Integration Setup

WhatsApp Handler Code

Configuring Your WhatsApp Number

Customizing the Message Template

Contact Form HTML

Customizing Form Fields

Adding Custom Fields to WhatsApp Message

Contact Information Display

Adding More Contact Methods

Contact Section Styling

Testing WhatsApp Integration

Alternative: Email Integration

Build docs developers (and LLMs) love

Getting Started

Customization

Components

Deployment

​Contact Section Overview

​WhatsApp Integration Setup

​WhatsApp Handler Code

​Configuring Your WhatsApp Number

​Customizing the Message Template

​Contact Form HTML

​Customizing Form Fields

​Adding Custom Fields to WhatsApp Message

​Contact Information Display

​Adding More Contact Methods

​Social Media Links

​Updating Social Media Links

​Adding Additional Social Networks

​Sidebar Social Icons

​Contact Section Styling

​Testing WhatsApp Integration

​Alternative: Email Integration

Build docs developers (and LLMs) love

Contact Section Overview

WhatsApp Integration Setup

WhatsApp Handler Code

Configuring Your WhatsApp Number

Customizing the Message Template

Contact Form HTML

Customizing Form Fields

Adding Custom Fields to WhatsApp Message

Contact Information Display

Adding More Contact Methods

Social Media Links

Updating Social Media Links

Adding Additional Social Networks

Sidebar Social Icons

Contact Section Styling

Testing WhatsApp Integration

Alternative: Email Integration