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

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.

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.

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:

<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:

<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 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 y Hugo.

Responde primero a las consultas adecuadas

Ikiform envía todas las consultas igual; el filtrado por presupuesto ocurre en la herramienta que recibe el webhook. En Zapier o n8n, 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 o Slack.

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

Preguntas