# Añade un formulario de contacto a tu web de portfolio

> Un formulario de contacto para portfolio que hace las preguntas de una primera llamada: proyecto, presupuesto, plazos y un enlace, sin servidor y respondiendo desde tu bandeja.

Publicado el 2026-10-25 · https://ikiform.com/es/guides/contact-form-static-site/portfolio-website

Pide las cuatro cosas que necesitas antes de una primera llamada: de qué trata el proyecto, un rango de presupuesto, cuándo empieza y un enlace para echar un vistazo. Envía el formulario a Ikiform desde tu portfolio estático, para que cada consulta llegue a tu bandeja de entrada con **Reply** dirigido al cliente. Rellena de antemano el tipo de proyecto según el caso de estudio del que viene el visitante, para saber qué lo convenció.

## Qué tiene de especial un formulario de portfolio

En un portfolio, el formulario de contacto es el embudo de ventas. Un formulario con solo nombre, email y mensaje trae mensajes que tienes que contestar con preguntas: cuál es el presupuesto, cuándo quieres empezar, si ya tiene una web. Preguntarlo de entrada te ahorra una ronda de emails, y las respuestas te dicen qué consultas contestar primero.

Además, los portfolios suelen vivir en hosting estático gratuito, se generan una vez y se dejan meses sin tocar. El formulario tiene que seguir funcionando sin un servidor que parchear y sin que tengas que revisar un panel.

| Campo | Para qué sirve | Tipo |
| --- | --- | --- |
| `project` | A quién responder y qué enviarle | `select`, así que es seguro filtrar por él |
| `budget` | Los rangos filtran mejor que un número libre, y la gente los responde | `radio` con rangos |
| `start` | "Este mes" y "más adelante, aún planeando" necesitan respuestas distintas | `select` |
| `link` | Su web actual o un brief, para que respondas con algo concreto | `url` |
| `message` | El proyecto con sus propias palabras | `textarea`, al menos 30 caracteres |

Deja fuera el teléfono y el tamaño de la empresa. Cada campo obligatorio extra te cuesta consultas, y sabrás ambas cosas en la primera llamada.

Formulario: Work with me

- **Tu nombre** (`name`, text, obligatorio)
- **Email** (`email`, email, obligatorio)
- **¿Qué necesitas?** (`project`, select, obligatorio)
- **Presupuesto** (`budget`, radio, obligatorio)
- **¿Cuándo te gustaría empezar?** (`start`, select)
- **Tu web actual o un brief** (`link`, url)
- **Cuéntame sobre el proyecto** (`message`, textarea, obligatorio)
- **Viene de** (`seen`, text)

Pega esta definición en la pestaña **Fields** del formulario. Ikiform aceptará entonces solo los valores de presupuesto y proyecto de la lista, y rechazará un mensaje de menos de 30 caracteres con un error de campo. `seen` está en la definición porque un formulario con campos rechaza cualquier input que no figure en ella; en la página es un input oculto.

> La subida de archivos aún no está disponible. Un envío con un archivo recibe `422 files_not_supported`.

## El formulario

HTML plano, así que funciona en un portfolio escrito a mano, en un tema de Jekyll o Hugo o en una plantilla de Astro. El script del final rellena el tipo de proyecto a partir del enlace que trajo al visitante y registra qué página era:

`contact.html`:

```html
<form id="enquiry" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" maxlength="120" required />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="project">What do you need?</label>
  <select id="project" name="project" required>
    <option value="website">A website</option>
    <option value="branding">Branding</option>
    <option value="product">Product design</option>
    <option value="other">Something else</option>
  </select>

  <fieldset>
    <legend>Budget</legend>
    <label><input type="radio" name="budget" value="under_5k" required /> Under $5k</label>
    <label><input type="radio" name="budget" value="5k_15k" /> $5k to $15k</label>
    <label><input type="radio" name="budget" value="over_15k" /> Over $15k</label>
    <label><input type="radio" name="budget" value="unsure" /> Not sure yet</label>
  </fieldset>

  <label for="start">When would you like to start?</label>
  <select id="start" name="start">
    <option value="now">This month</option>
    <option value="soon">In 1 to 3 months</option>
    <option value="later">Later, still planning</option>
  </select>

  <label for="link">Your current site or a brief</label>
  <input id="link" name="link" type="url" placeholder="https://" />

  <label for="message">Tell me about the project</label>
  <textarea id="message" name="message" rows="6" minlength="30" required></textarea>

  <input type="hidden" name="seen" value="" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button type="submit">Send enquiry</button>
</form>

<script>
  const params = new URLSearchParams(location.search);
  const enquiry = document.querySelector("#enquiry");
  const project = params.get("project");
  if (project && enquiry.project.querySelector(`option[value="${CSS.escape(project)}"]`)) {
    enquiry.project.value = project;
  }
  enquiry.seen.value = params.get("from") ?? document.referrer;
</script>
```

En cada caso de estudio, enlaza al formulario con el tipo de proyecto y el nombre de la página:

`case-studies/northwind.html`:

```html
<a href="/contact.html?project=branding&from=case-study-northwind">Start a branding project</a>
```

- El script solo selecciona un valor de proyecto que exista en la lista, así que un enlace editado a mano no puede añadir valores nuevos.
- `seen` guarda el nombre del caso de estudio, o el referrer cuando no hay ninguno. Después de unos meses, el CSV te dice qué trabajos traen qué consultas.
- Mantén `email` como nombre del campo. Los emails de notificación lo usan como dirección de respuesta, así que contestas desde tu propia bandeja.
- Para un portfolio hecho con un framework, la [guía principal](https://ikiform.com/es/guides/contact-form-static-site.md#form) tiene el mismo patrón de formulario en Next.js, Astro, SvelteKit, Nuxt, React y Vue. Los generadores de sitios estáticos tienen sus propias páginas de configuración, como [Jekyll](https://ikiform.com/es/docs/guides/jekyll.md) y [Hugo](https://ikiform.com/es/docs/guides/hugo.md).

## Responde primero a las consultas adecuadas

Diagrama: A dónde va una consulta del portfolio después de que el visitante pulse Enviar

1. Un visitante llega desde un caso de estudio, y el formulario se abre con el tipo de proyecto ya elegido.
2. El formulario envía a Ikiform, que ejecuta las comprobaciones antispam y guarda la consulta.
3. Recibes un email de notificación, y Reply responde directamente al cliente.
4. Un webhook manda la misma consulta a Telegram o Slack, donde una automatización puede avisarte solo de los presupuestos grandes.
5. Todas las consultas se quedan en el panel, así que puedes exportar un año entero a CSV y ver qué trabajos las trajeron.

Para empezar basta con el email. Añade el aviso al móvil cuando empieces a perder trabajos por responder tarde.

Ikiform envía todas las consultas igual; el filtrado por presupuesto ocurre en la herramienta que recibe el webhook. En [Zapier](https://ikiform.com/blog/form-submissions-to-zapier.md) o [n8n](https://ikiform.com/blog/form-submissions-to-n8n.md), añade un filtro sobre `budget` antes del paso del mensaje. Para que te llegue directamente al móvil, sigue la guía de [Telegram](https://ikiform.com/blog/form-submissions-to-telegram.md) o [Slack](https://ikiform.com/blog/form-submissions-to-slack.md).

Ikiform no envía emails a la persona que rellena el formulario. Los emails de notificación van solo a ti y a tu equipo, así que no hay respuesta automática, email de confirmación ni doble opt-in. Envíalos desde tu herramienta de email, activada por un [webhook](https://ikiform.com/es/docs/webhooks.md). En un portfolio, una página de agradecimiento breve que diga cuándo vas a responder cubre casi todo lo que haría una respuesta automática.

## Una página de agradecimiento que agenda la llamada

Configura **Redirect after submit** con una página de agradecimiento propia. En un portfolio puede hacer algo más que dar las gracias: enlaza tu página de reservas del calendario para quien quiera hablar ya, y di cuándo respondes a los demás. Añade dos o tres casos de estudio que no hayan visto; todavía se están decidiendo.

Mantén la página fuera de los resultados de búsqueda con una meta etiqueta `noindex`, y no cuentes las visitas a ella como conversiones en tus analíticas sin revisar también el panel, porque el spam recibe la misma redirección que una consulta real.

## Spam en el portfolio

Los portfolios reciben un tipo de spam particular: ofertas de SEO, propuestas de guest posts y plantillas de "rediseña tu web". La puntuación de Ikiform suma +2 por frases de spam conocidas, +3 por un enlace en el campo de nombre y +2 por tres o más enlaces; con 5, el mensaje se guarda como spam y no envía ningún email.

Un cliente rara vez manda dos consultas en diez minutos, así que pon el límite de frecuencia en Strict, 2 cada 10 minutos por visitante. Añade tu dominio en **Allowed domains** y revisa de vez en cuando el filtro **Spam** las primeras semanas: una consulta real con tres enlaces a trabajos anteriores puede puntuar alto.

## Comprueba que funciona

1. En **Allowed domains** del formulario, añade el dominio de tu sitio, más `localhost` mientras desarrollas. Déjalo vacío para aceptar envíos desde cualquier sitio.
2. Abre `contact.html?project=branding&from=test` y comprueba que **Branding** está seleccionado.
3. Envía una consulta. En **Submissions**, `seen` debería decir `test`.
4. Quita `minlength` del textarea con las devtools del navegador y envía un mensaje de tres palabras. Ikiform lo rechaza con `422 validation_failed`, indicando `message`.
5. Revisa la bandeja de entrada de cada destinatario de notificaciones. Cada uno recibe un email con los campos, y **Reply** va a quien envió el formulario cuando este tiene un campo `email`.
6. ¿No llegó nada? Cambia el filtro de estado del panel a **Spam**. El spam recibe la misma respuesta de éxito que un envío real.

## Problemas habituales

| Problema | Qué hacer |
| --- | --- |
| `422 validation_failed` para `budget` | Un `value` de radio en el HTML no coincide con las opciones de la definición. Tienen que coincidir exactamente, guiones bajos incluidos. |
| El proyecto no aparece rellenado | El valor de `project` del enlace no es ninguno de los valores de las opciones. Revisa la ortografía y las mayúsculas. |
| La consulta de un cliente real está en spam | Tres o más enlaces suman puntos, y si encima hay una frase de la lista de spam o una dirección desechable, se pasa del umbral. Márcala como no spam; entonces salen su email y sus webhooks. |
| `422 files_not_supported` | El formulario tiene un `<input type="file">` con un archivo elegido. La subida de archivos aún no está disponible; quita el input o pide un enlace. |

## Preguntas

### ¿Debe un formulario de contacto de portfolio pedir un presupuesto?

Normalmente sí, con rangos en lugar de un número. Los rangos son fáciles de responder y te dicen qué consultas necesitan una respuesta rápida. Incluye una opción Aún no lo sé para que nadie se vaya.

### ¿Pueden los clientes adjuntar un brief o archivos?

Con Ikiform todavía no. Pide un enlace en su lugar: un documento compartido, una carpeta en la nube o su web actual. El campo url comprueba que sea una dirección web real.

### ¿Necesito un servidor para el formulario de contacto de un portfolio?

No. El portfolio sigue siendo estático en cualquier host, y el formulario envía a Ikiform, que guarda cada consulta y te envía un email.

### ¿Dónde veo qué caso de estudio trajo una consulta?

En el campo seen de cada envío. Fíltralo o búscalo en el panel, o exporta un CSV y cuenta las consultas por página cada pocos meses.

### ¿Ikiform es gratis?

No, no hay plan gratuito. Probar es gratis: puedes enviar 50 envíos de prueba al mes desde localhost antes de pagar. Para pasar a producción, Pro empieza en 6 $/mes por 500 envíos, o puedes pagar una sola vez 10.000 envíos por 49 $ o 50.000 envíos por 149, $ con créditos que no caducan nunca.

## Más guías

- [Formulario de contacto en un sitio estático](https://ikiform.com/es/guides/contact-form-static-site.md): Añade un formulario de contacto que funcione a un sitio estático sin servidor: a dónde va el POST, el spam, las respuestas por email y código para cada host y framework.
- [GitHub Pages](https://ikiform.com/es/guides/contact-form-static-site/github-pages.md): GitHub Pages no ejecuta código de servidor, así que un POST de formulario recibe 405 Not Allowed; envía a un backend de formularios y configura bien las redirecciones del project site.
- [Netlify](https://ikiform.com/es/guides/contact-form-static-site/netlify.md): Usa un formulario de contacto en un sitio de Netlify sin Netlify Forms: sin detección en el build, envíos JSON desde React y un formulario aparte para las deploy previews.
- [Vercel](https://ikiform.com/es/guides/contact-form-static-site/vercel.md): Una página estática en Vercel responde al POST de un formulario con 405 Method Not Allowed; aquí verás por qué y cómo enviar el formulario a un backend.
- [Cloudflare Pages](https://ikiform.com/es/guides/contact-form-static-site/cloudflare-pages.md): Añade un formulario de contacto a Cloudflare Pages sin escribir una Function: envía a un backend de formularios, define cabeceras en _headers y usa tus propias claves de Turnstile.
- [Amazon S3](https://ikiform.com/es/guides/contact-form-static-site/aws-s3.md): Los website endpoints de S3 solo aceptan GET y HEAD por HTTP plano, así que envía el formulario de contacto a un backend y configura bien las redirecciones con CloudFront.