Formulario de encuesta NPS
Pregunte qué tan probable es que le recomienden, de 0 a 10, y luego un comentario opcional. Un envío, dos pasos si hay JavaScript.
¿Usas Tilda? Pégalo en un bloque T123 (plan de pago) o usa el webhook sin código.
Qué estás copiando
Esta plantilla pregunta qué probabilidad hay de que un visitante te recomiende, en una escala de 0 a 10, y luego ofrece un comentario opcional.
Es una encuesta a tus visitantes. No es una valoración de Formgong, y este sitio no publica una puntuación del producto.
Con JavaScript, el comentario está en un segundo paso. El script muestra ese paso solo después de elegir una puntuación.
Sin JavaScript, un estilo pequeño en noscript muestra los dos pasos a la vez. El visitante puede enviar un solo formulario.
Hay un único POST, al final. El primer paso no envía un envío parcial.
Campos que mostrará Telegram
La puntuación es un grupo de radios llamado score. Telegram imprime score y después el número, de 0 a 10.
El campo de comentario se llama comment. El email es opcional, con el nombre email, para que puedas responder si alguien deja una dirección.
No añadas un segundo grupo llamado score. Los radios con el mismo nombre son una sola respuesta.
El honeypot botcheck va incluido, vacío y fuera de la pantalla. Un honeypot relleno es spam y no se entrega.
El fragmento extra envía las mismas respuestas como JSON con fetch, después de los pasos. Sigue necesitando la clave de acceso en el formulario.
Turnstile se queda comentado hasta que lo actives y pegues una clave de sitio. YOUR_TURNSTILE_SITE_KEY es un marcador, no una clave que funcione.
Lo que esto no afirma
La plantilla no calcula un índice de promotores, un gráfico ni un punto de referencia. Lees los números en la bandeja o en Telegram.
No puntúa contactos y no manda las respuestas a un modelo. El número es solo un campo.
El gratuito guarda los envíos 30 días y permite 300 al mes. Telegram es inmediato. En el plan gratuito llega un email por cada envío.
El almacenamiento está en la UE. Formgong es el operador. Escribe a support@formgong.com sobre el producto.
Si en lugar de esta pregunta en dos pasos necesitas un formulario largo de un sector, usa las plantillas de sector del hub.
Vista previa
Código del formulario
<form id="fg-nps" action="https://formgong.com/submit" method="POST" style="position:relative">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="es">
<fieldset data-step="1">
<legend>¿Qué tan probable es que nos recomiende?</legend>
<p><span>Poco probable</span> <span>Muy probable</span></p>
<label><input type="radio" name="score" value="0" required> 0</label>
<label><input type="radio" name="score" value="1" required> 1</label>
<label><input type="radio" name="score" value="2" required> 2</label>
<label><input type="radio" name="score" value="3" required> 3</label>
<label><input type="radio" name="score" value="4" required> 4</label>
<label><input type="radio" name="score" value="5" required> 5</label>
<label><input type="radio" name="score" value="6" required> 6</label>
<label><input type="radio" name="score" value="7" required> 7</label>
<label><input type="radio" name="score" value="8" required> 8</label>
<label><input type="radio" name="score" value="9" required> 9</label>
<label><input type="radio" name="score" value="10" required> 10</label>
<button type="button" data-next>Siguiente</button>
</fieldset>
<fieldset data-step="2" hidden>
<label>¿Qué debemos saber? <textarea name="comment"></textarea></label>
<label>Correo electrónico <input type="email" name="email" autocomplete="email"></label>
<button type="button" data-back>Atrás</button>
<button type="submit">Enviar</button>
</fieldset>
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
<label>Deja este campo vacío <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Opcional. Active Turnstile para este formulario, quite estas marcas de comentario y pegue la clave del sitio.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="es"></div>
-->
</form>
<noscript><style>[data-step]{display:block}</style></noscript>
<script>
(function () {
var form = document.getElementById("fg-nps");
if (!form) return;
var steps = form.querySelectorAll("[data-step]");
function show(index) {
steps.forEach(function (step, i) { step.hidden = i !== index; });
}
var next = form.querySelector("[data-next]");
var back = form.querySelector("[data-back]");
if (next) next.addEventListener("click", function () {
var picked = form.querySelector('input[name="score"]:checked');
if (!picked) return;
show(1);
});
if (back) back.addEventListener("click", function () { show(0); });
})();
</script>Las mismas respuestas en un fetch JSON
<form id="fg-nps" action="https://formgong.com/submit" method="POST" style="position:relative">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="es">
<fieldset data-step="1">
<legend>¿Qué tan probable es que nos recomiende?</legend>
<p><span>Poco probable</span> <span>Muy probable</span></p>
<label><input type="radio" name="score" value="0" required> 0</label>
<label><input type="radio" name="score" value="1" required> 1</label>
<label><input type="radio" name="score" value="2" required> 2</label>
<label><input type="radio" name="score" value="3" required> 3</label>
<label><input type="radio" name="score" value="4" required> 4</label>
<label><input type="radio" name="score" value="5" required> 5</label>
<label><input type="radio" name="score" value="6" required> 6</label>
<label><input type="radio" name="score" value="7" required> 7</label>
<label><input type="radio" name="score" value="8" required> 8</label>
<label><input type="radio" name="score" value="9" required> 9</label>
<label><input type="radio" name="score" value="10" required> 10</label>
<button type="button" data-next>Siguiente</button>
</fieldset>
<fieldset data-step="2" hidden>
<label>¿Qué debemos saber? <textarea name="comment"></textarea></label>
<label>Correo electrónico <input type="email" name="email" autocomplete="email"></label>
<button type="button" data-back>Atrás</button>
<button type="submit">Enviar</button>
</fieldset>
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
<label>Deja este campo vacío <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Opcional. Active Turnstile para este formulario, quite estas marcas de comentario y pegue la clave del sitio.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="es"></div>
-->
</form>
<noscript><style>[data-step]{display:block}</style></noscript>
<script>
(function () {
var form = document.getElementById("fg-nps");
if (!form) return;
var steps = form.querySelectorAll("[data-step]");
function show(index) {
steps.forEach(function (step, i) { step.hidden = i !== index; });
}
var next = form.querySelector("[data-next]");
var back = form.querySelector("[data-back]");
if (next) next.addEventListener("click", function () {
var picked = form.querySelector('input[name="score"]:checked');
if (!picked) return;
show(1);
});
if (back) back.addEventListener("click", function () { show(0); });
})();
</script>
<script>
(function () {
var form = document.getElementById("fg-nps");
if (!form) return;
var status = document.createElement("p");
status.setAttribute("role", "status");
form.appendChild(status);
form.addEventListener("submit", function (event) {
event.preventDefault();
var data = Object.fromEntries(new FormData(form));
fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(data)
}).then(function (res) { return res.json(); }).then(function (result) {
status.textContent = result && result.success ? (result.message || "Enviado. ¡Gracias!") : ((result && result.message) || "No se pudo enviar. Inténtalo de nuevo.");
if (result && result.success) form.reset();
}).catch(function () {
status.textContent = "No se pudo enviar. Inténtalo de nuevo.";
});
});
})();
</script>Preguntas y respuestas
¿El 0 es el extremo bajo?
Sí. Los radios van de 0 a 10. Las etiquetas dicen qué extremo es bajo y cuál es alto. El valor guardado es el número.
¿Puedo exigir el comentario?
Puedes añadir el atributo required en el textarea. Esta plantilla lo deja opcional para que se pueda enviar solo la puntuación.
¿El primer paso guarda algo?
No. Formgong recibe un envío cuando se envía el formulario. Pasar al comentario no publica nada.
¿Por qué el email es opcional?
Algunas personas dejan una puntuación y ninguna dirección. Si necesitas un camino para responder, dilo en la etiqueta y marca el campo como required.