> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/GmzQzvZ/portafolio/llms.txt
> Use this file to discover all available pages before exploring further.
# Contact Form Configuration
> Set up WhatsApp integration, update contact information, and customize social media links in your portfolio.
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
```javascript index.html theme={null}
// 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
Get your WhatsApp number including country code (e.g., USA: 1, Colombia: 57, UK: 44).
Remove all spaces, dashes, and special characters. Include country code.
**Examples:**
* Colombia: `573229520608`
* USA: `15551234567`
* UK: `447911123456`
Replace the number in line **559**:
```javascript index.html theme={null}
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:
```javascript index.html theme={null}
// 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**:
```html index.html theme={null}
```
### Customizing Form Fields
```html Add Phone Field theme={null}
```
```html Add Subject Field theme={null}
```
```html Add Company Field theme={null}
```
### Adding Custom Fields to WhatsApp Message
If you add new form fields, update the JavaScript to include them:
```javascript index.html theme={null}
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**:
```html index.html theme={null}
+57 322 952 0608
zvzgmzq@gmail.com
Bogotá, Colombia
```
Replace the phone number text with your own number.
Change the email address to your contact email.
Modify the location text to your city and country.
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:
```html index.html theme={null}
@yourusername
yourwebsite.com
```
## Social Media Links
Social media buttons are at **lines 468-496**:
```html index.html theme={null}
```
### Updating Social Media Links
Update the `href` with your GitHub profile URL.
Update with your LinkedIn profile URL.
Use `https://wa.me/YOURNUMBER` or create a WhatsApp link at [wa.link](https://wa.link/).
Update the `mailto:` link with your email address.
### Adding Additional Social Networks
Add more social media platforms:
```html Twitter/X theme={null}
```
## Sidebar Social Icons
Social icons also appear in the sidebar at **lines 509-522**:
```html index.html theme={null}
```
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**:
```css style.css theme={null}
.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
Ensure your WhatsApp number is correctly formatted in the JavaScript code.
Open your portfolio in a browser and fill out the contact form with test data.
Click the submit button. A new tab should open with WhatsApp Web.
Check that the pre-filled message contains all your form data correctly formatted.
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:
```javascript index.html theme={null}
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:your@email.com?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.