Formulário de inquérito NPS
Pergunte a probabilidade de uma recomendação, de 0 a 10, e depois um comentário opcional. Um envio, dois passos se houver JavaScript.
Usa a Tilda? Cole num bloco T123 (plano pago) ou use o webhook sem código.
O que está a copiar
Este modelo pergunta qual a probabilidade de um visitante o recomendar, numa escala de 0 a 10, e depois oferece um comentário opcional.
É um inquérito aos seus visitantes. Não é uma avaliação do Formgong, e este site não publica uma pontuação do produto.
Com JavaScript, o comentário fica num segundo passo. O script mostra esse passo só depois de se escolher uma pontuação.
Sem JavaScript, um estilo pequeno em noscript mostra os dois passos de uma vez. O visitante ainda pode enviar um só formulário.
Há um único POST, no fim. O primeiro passo não envia uma submissão parcial.
Campos que o Telegram vai mostrar
A pontuação é um grupo de rádios chamado score. O Telegram imprime score e depois o número, de 0 a 10.
O campo de comentário chama-se comment. O email é opcional, com o nome email, para poder responder quando alguém deixa um endereço.
Não acrescente um segundo grupo chamado score. Rádios com o mesmo nome são uma só resposta.
O honeypot botcheck está incluído, vazio e fora do ecrã. Um honeypot preenchido é spam e não é entregue.
O excerto extra envia as mesmas respostas como JSON com fetch, depois dos passos. Continua a precisar da chave de acesso no formulário.
O Turnstile fica comentado até o ligar e colar uma chave do site. YOUR_TURNSTILE_SITE_KEY é um marcador, não uma chave que funcione.
O que isto não afirma
O modelo não calcula um índice de promotores, um gráfico nem uma referência. Lê os números na caixa de entrada ou no Telegram.
Não pontua contactos e não envia as respostas para um modelo de cálculo. O número é apenas um campo.
O gratuito conserva os envios durante 30 dias e permite 300 por mês. O Telegram é imediato. No plano gratuito chega um email por cada envio.
O armazenamento é na UE. O Formgong é o operador. Escreva para support@formgong.com sobre o produto.
Se, em vez desta pergunta em dois passos, precisar de um formulário longo de um setor, use os modelos de setor do hub.
Pré-visualização
Código do formulário
<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="pt">
<fieldset data-step="1">
<legend>Qual a probabilidade de nos recomendar?</legend>
<p><span>Pouco provável</span> <span>Muito provável</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>Seguinte</button>
</fieldset>
<fieldset data-step="2" hidden>
<label>O que devemos saber? <textarea name="comment"></textarea></label>
<label>E-mail <input type="email" name="email" autocomplete="email"></label>
<button type="button" data-back>Voltar</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>Deixe este campo vazio <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Opcional. Ative o Turnstile neste formulário, retire estas marcas de comentário e cole a chave do sítio.
<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="pt"></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>As mesmas respostas num 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="pt">
<fieldset data-step="1">
<legend>Qual a probabilidade de nos recomendar?</legend>
<p><span>Pouco provável</span> <span>Muito provável</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>Seguinte</button>
</fieldset>
<fieldset data-step="2" hidden>
<label>O que devemos saber? <textarea name="comment"></textarea></label>
<label>E-mail <input type="email" name="email" autocomplete="email"></label>
<button type="button" data-back>Voltar</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>Deixe este campo vazio <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
<!--
Opcional. Ative o Turnstile neste formulário, retire estas marcas de comentário e cole a chave do sítio.
<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="pt"></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. Obrigado!") : ((result && result.message) || "Não foi possível enviar. Tente novamente.");
if (result && result.success) form.reset();
}).catch(function () {
status.textContent = "Não foi possível enviar. Tente novamente.";
});
});
})();
</script>Perguntas e respostas
O 0 é o extremo baixo?
Sim. Os rádios vão de 0 a 10. As etiquetas dizem qual o extremo baixo e qual o alto. O valor guardado é o número.
Posso exigir o comentário?
Pode acrescentar o atributo required na textarea. Este modelo deixa-o opcional para que uma pontuação sozinha possa ser enviada.
O primeiro passo guarda alguma coisa?
Não. O Formgong recebe um envio quando o formulário é submetido. Passar ao comentário não envia nada.
Porque é que o email é opcional?
Algumas pessoas deixam uma pontuação e nenhum endereço. Se precisar de um caminho de resposta, diga-o na etiqueta e marque o campo como required.