Multi-step quote form template

<!doctype html>
<html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Formulario de contacto</title>
<style>form[data-littlereply]{max-width:640px;margin:2rem auto;padding:1.5rem;font:16px/1.6 system-ui,sans-serif;color:#202033;background:white;border:1px solid #e4e4ee;border-radius:16px;box-sizing:border-box}form[data-littlereply] label{display:block;margin-top:1rem;font-weight:600}form[data-littlereply] input,form[data-littlereply] textarea,form[data-littlereply] select{box-sizing:border-box;width:100%;padding:.75rem;font:inherit;border:1px solid #727285;border-radius:8px;background:white;color:#202033}form[data-littlereply] input[type=checkbox],form[data-littlereply] input[type=radio]{width:auto}form[data-littlereply] button{margin-top:1rem;padding:.8rem 1.1rem;font:inherit;font-weight:600;border:0;border-radius:8px;background:var(--form-accent,#4f46e5);color:white;cursor:pointer}form[data-littlereply] :focus-visible{outline:3px solid #f59e0b;outline-offset:3px}form[data-littlereply] button:disabled{opacity:.6}form[data-littlereply] [role=status]{min-height:1.6em}form[data-littlereply] fieldset{border:0;padding:0}form[data-littlereply] .privacy-notice{font-size:.875rem;color:#4b4b60}
form[data-littlereply]{--form-accent:#4f46e5;--form-ink:#ffffff}
form[data-littlereply] button{color:var(--form-ink)}form[data-littlereply] button[data-fq-back]{background:#eee;color:#202033}form[data-littlereply] [hidden]{display:none}</style></head><body>
<form action="https://littlereply.com/api/submit" method="POST" data-littlereply="YOUR_ACCESS_KEY" data-locale="es" data-success="Su solicitud de cotización ha sido almacenada.">
  <input type="hidden" name="_fq_key" value="YOUR_ACCESS_KEY" />
  <input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true" />

<fieldset data-fq-step="0"><legend>Paso 1 de 2</legend>
  <label for="fq_service">Tipo de servicio *</label>
  <select name="service" id="fq_service" required><option value="">—</option><option>Construcción y renovación</option><option>Desarrollo de sitios web</option><option>Consultante</option><option>Otro servicio</option></select>

  <label for="fq_postal_code">Código Postal (opcional)</label>
  <input type="text" name="postal_code" id="fq_postal_code" autocomplete="postal-code" maxlength="20" />
  <small>Código postal, si tu dirección tiene uno.</small>

  <label for="fq_message">Tu proyecto *</label>
  <textarea name="message" id="fq_message" required maxlength="5000" rows="5"></textarea>
</fieldset>
<fieldset data-fq-step="1"><legend>Paso 2 de 2</legend>
  <label for="fq_name">Tu nombre *</label>
  <input type="text" name="name" id="fq_name" required autocomplete="name" />

  <label for="fq_email">Su dirección de correo electrónico *</label>
  <input type="email" name="email" id="fq_email" required autocomplete="email" />

  <label for="fq_phone">Teléfono (opcional)</label>
  <input type="tel" name="phone" id="fq_phone" autocomplete="tel" pattern="^\+?(?:[ \(\)\.\-]*[0-9]){7,15}[ \(\)\.\-]*$" maxlength="25" />
  <small>Ejemplo: +1 212 555 0123 o +33 6 12 34 56 78.</small>
</fieldset>

  <button type="submit">Enviar mi solicitud de cotización</button>
  <p role="status" aria-live="polite"></p>
</form>
<!-- Errores AJAX accesibles y reintentos sin duplicados -->
<script src="https://littlereply.com/client/v1.js" data-api="https://littlereply.com" defer></script>
</body></html>