Cómo crear un formulario de solicitud de presupuesto para tu web

Un formulario de solicitud de presupuesto te dice más que uno de contacto: qué necesita el cliente, con qué presupuesto cuenta y para cuándo lo quiere. Vas a crearlo en HTML puro, recibirás cada solicitud como un correo bien organizado y el cliente recibirá automáticamente un “lo hemos recibido”.

Necesitas: una cuenta gratuita de Frontmail y unos quince minutos.

1. Conecta tu buzón

En Servicios de correo → Añadir servicio, conecta Gmail, Outlook, un servidor SMTP o un proveedor transaccional, activa Marcar como predeterminado y haz clic en Verificar y guardar.

2. Crea la plantilla de solicitud de presupuesto

1. Abre Plantillas → Desde la galería y elige Solicitud de presupuesto (categoría Negocios).
2. Haz clic en Usar plantilla. La solicitud llega a tu dirección; Reply-To es el cliente.

La plantilla tiene estos parámetros:

Parámetro	Tipo	Obligatorio	Notas
name	string	sí
email	email	sí
phone	string	no
company	string	no
service	enum	sí	uno de los valores de la pestaña Parámetros
budget	enum	no	uno de los valores de la pestaña Parámetros
deadline	date	no	YYYY-MM-DD, justo lo que envía <input type="date">
details	text	sí	al menos 10 caracteres

service y budget solo aceptan los valores de su lista. El código de ejemplo usa los valores de la plantilla en inglés (Website, E-shop, Mobile app, Consulting, Other y Under $5k, $5k–20k, $20k–50k, Over $50k). Si creas la plantilla en español, los valores son Sitio web, Tienda online, App móvil, Consultoría, Otro y Menos de 5000 €, 5000–20 000 €, 20 000–50 000 €, Más de 50 000 €. Adáptalos a lo que vendes en la pestaña Parámetros: el formulario debe enviar exactamente los valores que aparecen ahí.

3. Añade una confirmación automática

1. Plantillas → Desde la galería → Respuesta automática: gracias por tu mensaje → Usar plantilla.
2. En su pestaña Parámetros, define valores por defecto para company_name (tu empresa) y response_time (por ejemplo en un día laborable). Guardar.
3. Abre la plantilla de solicitud de presupuesto → Ajustes → Entrega y elige la nueva plantilla como Plantilla de respuesta automática. Guardar.

Ahora cada envío genera dos correos: la solicitud para ti y la confirmación para el cliente. La respuesta automática solo la puede disparar tu propio formulario, así que nadie puede usarla para enviar correos a desconocidos.

4. Permite tu sitio web

En Seguridad, añade tu dominio en Sitios web permitidos y pulsa Guardar. Después protege el formulario frente a bots: crea un widget gratuito de Cloudflare Turnstile, pega sus claves en Seguridad → Protección contra bots y activa la CAPTCHA en todas las plantillas.

5. Añade el formulario

Usa tu clave pública y el ID de la plantilla de la pestaña Fragmentos:

<form id="quote">
  <label>Name <input name="name" required /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Company <input name="company" /></label>
  <label>What do you need?
    <select name="service" required>
      <option>Website</option>
      <option>E-shop</option>
      <option>Mobile app</option>
      <option>Consulting</option>
      <option>Other</option>
    </select>
  </label>
  <label>Budget
    <select name="budget">
      <option value="">Not sure yet</option>
      <option>Under $5k</option>
      <option>$5k–20k</option>
      <option>$20k–50k</option>
      <option>Over $50k</option>
    </select>
  </label>
  <label>Deadline <input name="deadline" type="date" /></label>
  <label>Project details <textarea name="details" required minlength="10"></textarea></label>
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Request a quote</button>
  <p id="quote-status" role="status"></p>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script
  src="https://cdn.jsdelivr.net/npm/@frontmail/browser@0.1.0/dist/frontmail.umd.js"
  integrity="sha384-g2Rxznkz2yb/YYSdVTkXLxZFZ2Nh2+XdhPStxh0stydXFF3gYjDuyHimWIZLJDCc"
  crossorigin="anonymous"></script>
<script>
  frontmail.init({ publicKey: 'pk_…' });
  const form = document.getElementById('quote');
  const status = document.getElementById('quote-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thanks! Check your inbox – we’ve sent you a confirmation.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset();
    }
  });
</script>

Los campos opcionales vacíos (un presupuesto sin elegir, sin fecha límite) simplemente no aparecen en el correo.

6. Pruébalo

Envía una solicitud de prueba con tu propia dirección en el campo Email. Deberías recibir la solicitud y, un momento después, la confirmación. Ambos correos aparecen en Historial, cada uno con su propia cronología.

Cada correo consume un crédito, así que una solicitud con respuesta automática cuesta dos. Si te quedas sin créditos en temporada alta, las solicitudes esperan en la cola de correos retenidos y salen en cuanto recargas: no se pierde ninguna.

Próximos pasos

• Guarda a cada cliente en Contactos: la plantilla ya asigna email, name y company; activa la recogida de contactos en los Ajustes de la plantilla.
• ¿Quieres la solicitud en el idioma del cliente? Añade una variante de idioma a la plantilla y envía el formulario con un campo oculto fm_locale (por ejemplo de).