Survey form you can copy
Describe your own survey in a sentence, or open “Build it yourself, without AI” and edit the questions one by one. The HTML tab is selected. Tailwind, Bootstrap 5, React and Vue hold the same questions. A form can have up to 20 fields.
Fields, no AI
Live preview
Preview only. Nothing is sent from this page.
A two-minute survey
Copy the code
Replace fk_your_access_key with your own Formgong access key. The placeholder does not accept submissions. The honeypot field is named botcheck. Leave it empty.
The HTML form posts in the browser. React and Vue show an error on the page if the request fails. These class names need Tailwind on your site. This page does not load Tailwind. Bootstrap 5 class names need Bootstrap on your site. This page does not load Bootstrap.
<style>
#fg-fk_your_access_key{box-sizing:border-box;max-width:520px;width:100%;padding:28px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;color:#0f172a;font:16px/1.5 system-ui,sans-serif;display:grid;gap:16px}#fg-fk_your_access_key *{box-sizing:border-box}#fg-fk_your_access_key h2{font-size:24px;line-height:1.3;margin:0 0 4px;color:#0f172a}#fg-fk_your_access_key label{display:grid;gap:6px;font-weight:500}#fg-fk_your_access_key input,#fg-fk_your_access_key textarea,#fg-fk_your_access_key select{width:100%;font:inherit;min-height:44px;border:1px solid #94a3b8;border-radius:8px;padding:10px 12px;background:#fff;color:#0f172a}#fg-fk_your_access_key textarea{min-height:96px;resize:vertical}#fg-fk_your_access_key .fg-reminder-consent{display:flex;align-items:flex-start;gap:10px;font-weight:400}#fg-fk_your_access_key input[type=checkbox]{width:20px;min-height:20px;flex-shrink:0;margin:2px 0}#fg-fk_your_access_key button{font:inherit;font-weight:600;min-height:48px;padding:12px 20px;border:0;border-radius:8px;background:#4338ca;color:#ffffff;cursor:pointer}#fg-fk_your_access_key :focus-visible{outline:3px solid #4338ca;outline-offset:3px}#fg-fk_your_access_key button:disabled{cursor:wait;opacity:.7}#fg-fk_your_access_key p{margin:0}#fg-fk_your_access_key fieldset{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}#fg-fk_your_access_key legend{font-weight:500;padding:0;margin-bottom:6px}#fg-fk_your_access_key .fg-choice{display:flex;align-items:center;gap:10px;font-weight:400}#fg-fk_your_access_key input[type=radio]{width:20px;min-height:20px;flex-shrink:0;margin:0}#fg-fk_your_access_key .fg-trap{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
</style>
<form id="fg-fk_your_access_key" action="https://formgong.com/submit" method="POST">
<h2>A two-minute survey</h2>
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="en">
<fieldset><legend>Which describes you best? *</legend><label class="fg-choice"><input type="radio" name="role" value="Customer" required> Customer</label><label class="fg-choice"><input type="radio" name="role" value="Trying it out" required> Trying it out</label><label class="fg-choice"><input type="radio" name="role" value="Just looking" required> Just looking</label></fieldset>
<label>How did you hear about us? * <select name="source" required><option value="">—</option><option value="Search">Search</option><option value="A friend">A friend</option><option value="Social media">Social media</option><option value="Something else">Something else</option></select></label>
<fieldset><legend>What do you use it for?</legend><label class="fg-choice"><input type="checkbox" name="uses" value="Work"> Work</label><label class="fg-choice"><input type="checkbox" name="uses" value="Personal projects"> Personal projects</label><label class="fg-choice"><input type="checkbox" name="uses" value="A client's site"> A client's site</label><label class="fg-choice"><input type="checkbox" name="uses" value="School"> School</label></fieldset>
<fieldset><legend>How satisfied are you overall? (1 = not at all, 5 = very) *</legend><label class="fg-choice"><input type="radio" name="satisfaction" value="1" required> 1</label><label class="fg-choice"><input type="radio" name="satisfaction" value="2" required> 2</label><label class="fg-choice"><input type="radio" name="satisfaction" value="3" required> 3</label><label class="fg-choice"><input type="radio" name="satisfaction" value="4" required> 4</label><label class="fg-choice"><input type="radio" name="satisfaction" value="5" required> 5</label></fieldset>
<label>What is one thing we should change? <textarea name="change"></textarea></label>
<label>Email, only if you want a reply <input type="email" name="email" autocomplete="email"></label>
<div class="fg-trap" aria-hidden="true"><label>Leave this field empty<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
<button type="submit">Send answers</button>
</form><form class="relative mx-auto grid w-full max-w-lg gap-4 rounded-lg border border-slate-200 bg-white p-6 text-base text-slate-900" action="https://formgong.com/submit" method="POST"> <h2 class="text-2xl font-semibold">A two-minute survey</h2> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="en"> <fieldset class="grid gap-2 border-0 p-0"><legend class="font-medium">Which describes you best? *</legend><label class="flex items-center gap-2 font-normal" for="tw-role-0"><input class="h-5 w-5" id="tw-role-0" type="radio" name="role" value="Customer" required> Customer</label><label class="flex items-center gap-2 font-normal" for="tw-role-1"><input class="h-5 w-5" id="tw-role-1" type="radio" name="role" value="Trying it out" required> Trying it out</label><label class="flex items-center gap-2 font-normal" for="tw-role-2"><input class="h-5 w-5" id="tw-role-2" type="radio" name="role" value="Just looking" required> Just looking</label></fieldset> <div class="grid gap-1"><label class="font-medium" for="tw-source">How did you hear about us? *</label><select class="w-full rounded-md border border-slate-400 bg-white px-3 py-2 text-base text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700" id="tw-source" name="source" required><option value="">Choose</option><option value="Search">Search</option><option value="A friend">A friend</option><option value="Social media">Social media</option><option value="Something else">Something else</option></select></div> <fieldset class="grid gap-2 border-0 p-0"><legend class="font-medium">What do you use it for?</legend><label class="flex items-center gap-2 font-normal" for="tw-uses-0"><input class="h-5 w-5" id="tw-uses-0" type="checkbox" name="uses" value="Work"> Work</label><label class="flex items-center gap-2 font-normal" for="tw-uses-1"><input class="h-5 w-5" id="tw-uses-1" type="checkbox" name="uses" value="Personal projects"> Personal projects</label><label class="flex items-center gap-2 font-normal" for="tw-uses-2"><input class="h-5 w-5" id="tw-uses-2" type="checkbox" name="uses" value="A client's site"> A client's site</label><label class="flex items-center gap-2 font-normal" for="tw-uses-3"><input class="h-5 w-5" id="tw-uses-3" type="checkbox" name="uses" value="School"> School</label></fieldset> <fieldset class="grid gap-2 border-0 p-0"><legend class="font-medium">How satisfied are you overall? (1 = not at all, 5 = very) *</legend><label class="flex items-center gap-2 font-normal" for="tw-satisfaction-0"><input class="h-5 w-5" id="tw-satisfaction-0" type="radio" name="satisfaction" value="1" required> 1</label><label class="flex items-center gap-2 font-normal" for="tw-satisfaction-1"><input class="h-5 w-5" id="tw-satisfaction-1" type="radio" name="satisfaction" value="2" required> 2</label><label class="flex items-center gap-2 font-normal" for="tw-satisfaction-2"><input class="h-5 w-5" id="tw-satisfaction-2" type="radio" name="satisfaction" value="3" required> 3</label><label class="flex items-center gap-2 font-normal" for="tw-satisfaction-3"><input class="h-5 w-5" id="tw-satisfaction-3" type="radio" name="satisfaction" value="4" required> 4</label><label class="flex items-center gap-2 font-normal" for="tw-satisfaction-4"><input class="h-5 w-5" id="tw-satisfaction-4" type="radio" name="satisfaction" value="5" required> 5</label></fieldset> <div class="grid gap-1"><label class="font-medium" for="tw-change">What is one thing we should change?</label><textarea class="w-full rounded-md border border-slate-400 bg-white px-3 py-2 text-base text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700 min-h-24" id="tw-change" name="change"></textarea></div> <div class="grid gap-1"><label class="font-medium" for="tw-email">Email, only if you want a reply</label><input class="w-full rounded-md border border-slate-400 bg-white px-3 py-2 text-base text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700" id="tw-email" type="email" name="email" autocomplete="email"></div> <div class="absolute start-0 top-0 h-px w-px overflow-hidden" aria-hidden="true"><label>Leave this empty<input name="botcheck" tabindex="-1" autocomplete="off"></label></div> <button class="min-h-12 rounded-md bg-indigo-700 px-4 py-3 font-semibold text-white" type="submit">Send answers</button> </form>
<form class="position-relative mx-auto" style="max-width:32rem" action="https://formgong.com/submit" method="POST"> <h2 class="h4 mb-3">A two-minute survey</h2> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="en"> <fieldset class="mb-3"><legend class="form-label mb-1">Which describes you best? *</legend><div class="form-check"><input class="form-check-input" type="radio" name="role" id="bs-role-0" value="Customer" required><label class="form-check-label" for="bs-role-0">Customer</label></div><div class="form-check"><input class="form-check-input" type="radio" name="role" id="bs-role-1" value="Trying it out" required><label class="form-check-label" for="bs-role-1">Trying it out</label></div><div class="form-check"><input class="form-check-input" type="radio" name="role" id="bs-role-2" value="Just looking" required><label class="form-check-label" for="bs-role-2">Just looking</label></div></fieldset> <div class="mb-3"><label class="form-label" for="bs-source">How did you hear about us? *</label><select class="form-select" id="bs-source" name="source" required><option value="">Choose</option><option value="Search">Search</option><option value="A friend">A friend</option><option value="Social media">Social media</option><option value="Something else">Something else</option></select></div> <fieldset class="mb-3"><legend class="form-label mb-1">What do you use it for?</legend><div class="form-check"><input class="form-check-input" type="checkbox" name="uses" id="bs-uses-0" value="Work"><label class="form-check-label" for="bs-uses-0">Work</label></div><div class="form-check"><input class="form-check-input" type="checkbox" name="uses" id="bs-uses-1" value="Personal projects"><label class="form-check-label" for="bs-uses-1">Personal projects</label></div><div class="form-check"><input class="form-check-input" type="checkbox" name="uses" id="bs-uses-2" value="A client's site"><label class="form-check-label" for="bs-uses-2">A client's site</label></div><div class="form-check"><input class="form-check-input" type="checkbox" name="uses" id="bs-uses-3" value="School"><label class="form-check-label" for="bs-uses-3">School</label></div></fieldset> <fieldset class="mb-3"><legend class="form-label mb-1">How satisfied are you overall? (1 = not at all, 5 = very) *</legend><div class="form-check"><input class="form-check-input" type="radio" name="satisfaction" id="bs-satisfaction-0" value="1" required><label class="form-check-label" for="bs-satisfaction-0">1</label></div><div class="form-check"><input class="form-check-input" type="radio" name="satisfaction" id="bs-satisfaction-1" value="2" required><label class="form-check-label" for="bs-satisfaction-1">2</label></div><div class="form-check"><input class="form-check-input" type="radio" name="satisfaction" id="bs-satisfaction-2" value="3" required><label class="form-check-label" for="bs-satisfaction-2">3</label></div><div class="form-check"><input class="form-check-input" type="radio" name="satisfaction" id="bs-satisfaction-3" value="4" required><label class="form-check-label" for="bs-satisfaction-3">4</label></div><div class="form-check"><input class="form-check-input" type="radio" name="satisfaction" id="bs-satisfaction-4" value="5" required><label class="form-check-label" for="bs-satisfaction-4">5</label></div></fieldset> <div class="mb-3"><label class="form-label" for="bs-change">What is one thing we should change?</label><textarea class="form-control" id="bs-change" name="change" rows="4"></textarea></div> <div class="mb-3"><label class="form-label" for="bs-email">Email, only if you want a reply</label><input class="form-control" id="bs-email" type="email" name="email" autocomplete="email"></div> <div class="position-absolute top-0 start-0 overflow-hidden" style="width:1px;height:1px" aria-hidden="true"><label>Leave this empty<input name="botcheck" tabindex="-1" autocomplete="off"></label></div> <button class="btn btn-primary" type="submit">Send answers</button> </form>
import { useEffect, useRef, useState } from "react";
// Visitor language for Formgong messages, thank-you text and autoreply.
const LANG = "en";
export default function ContactForm() {
const captcha = useRef(null);
const feedback = useRef(null);
const [failed, setFailed] = useState(false);
const [busy, setBusy] = useState(false);
const [status, setStatus] = useState("");
useEffect(() => mountCaptcha(captcha.current, null), []);
useEffect(() => { if (failed && status) feedback.current?.focus(); }, [failed, status]);
async function onSubmit(event) {
event.preventDefault();
if (busy) return;
const form = event.currentTarget;
const body = new FormData(form);
body.set("access_key", "fk_your_access_key");
body.set("_lang", LANG);
setBusy(true);
setFailed(false);
setStatus("Sending…");
try {
const response = await fetch("https://formgong.com/submit", {
method: "POST", headers: { Accept: "application/json" }, body,
});
const result = await response.json();
setFailed(!result.success);
setStatus(result.success ? (result.message || "Sent. Thank you!") : (result.message || "Could not send. Please try again."));
} catch { setFailed(true); setStatus("Connection failed. Please try again."); }
finally { setBusy(false); resetCaptcha(form); }
}
return <form id="fg-fk_your_access_key" onSubmit={onSubmit} aria-busy={busy}>
<style>{"#fg-fk_your_access_key{box-sizing:border-box;max-width:520px;width:100%;padding:28px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;color:#0f172a;font:16px/1.5 system-ui,sans-serif;display:grid;gap:16px}#fg-fk_your_access_key *{box-sizing:border-box}#fg-fk_your_access_key h2{font-size:24px;line-height:1.3;margin:0 0 4px;color:#0f172a}#fg-fk_your_access_key label{display:grid;gap:6px;font-weight:500}#fg-fk_your_access_key input,#fg-fk_your_access_key textarea,#fg-fk_your_access_key select{width:100%;font:inherit;min-height:44px;border:1px solid #94a3b8;border-radius:8px;padding:10px 12px;background:#fff;color:#0f172a}#fg-fk_your_access_key textarea{min-height:96px;resize:vertical}#fg-fk_your_access_key .fg-reminder-consent{display:flex;align-items:flex-start;gap:10px;font-weight:400}#fg-fk_your_access_key input[type=checkbox]{width:20px;min-height:20px;flex-shrink:0;margin:2px 0}#fg-fk_your_access_key button{font:inherit;font-weight:600;min-height:48px;padding:12px 20px;border:0;border-radius:8px;background:#4338ca;color:#ffffff;cursor:pointer}#fg-fk_your_access_key :focus-visible{outline:3px solid #4338ca;outline-offset:3px}#fg-fk_your_access_key button:disabled{cursor:wait;opacity:.7}#fg-fk_your_access_key p{margin:0}#fg-fk_your_access_key fieldset{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}#fg-fk_your_access_key legend{font-weight:500;padding:0;margin-bottom:6px}#fg-fk_your_access_key .fg-choice{display:flex;align-items:center;gap:10px;font-weight:400}#fg-fk_your_access_key input[type=radio]{width:20px;min-height:20px;flex-shrink:0;margin:0}#fg-fk_your_access_key .fg-trap{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}"}</style>
<h2>{"A two-minute survey"}</h2>
<fieldset><legend>{"Which describes you best?"} *</legend><label className="fg-choice"><input type="radio" name="role" value={"Customer"} required /> {"Customer"}</label><label className="fg-choice"><input type="radio" name="role" value={"Trying it out"} required /> {"Trying it out"}</label><label className="fg-choice"><input type="radio" name="role" value={"Just looking"} required /> {"Just looking"}</label></fieldset>
<label>{"How did you hear about us?"} * <select name="source" required><option value="">—</option><option value={"Search"}>{"Search"}</option><option value={"A friend"}>{"A friend"}</option><option value={"Social media"}>{"Social media"}</option><option value={"Something else"}>{"Something else"}</option></select></label>
<fieldset><legend>{"What do you use it for?"}</legend><label className="fg-choice"><input type="checkbox" name="uses" value={"Work"} /> {"Work"}</label><label className="fg-choice"><input type="checkbox" name="uses" value={"Personal projects"} /> {"Personal projects"}</label><label className="fg-choice"><input type="checkbox" name="uses" value={"A client's site"} /> {"A client's site"}</label><label className="fg-choice"><input type="checkbox" name="uses" value={"School"} /> {"School"}</label></fieldset>
<fieldset><legend>{"How satisfied are you overall? (1 = not at all, 5 = very)"} *</legend><label className="fg-choice"><input type="radio" name="satisfaction" value={"1"} required /> {"1"}</label><label className="fg-choice"><input type="radio" name="satisfaction" value={"2"} required /> {"2"}</label><label className="fg-choice"><input type="radio" name="satisfaction" value={"3"} required /> {"3"}</label><label className="fg-choice"><input type="radio" name="satisfaction" value={"4"} required /> {"4"}</label><label className="fg-choice"><input type="radio" name="satisfaction" value={"5"} required /> {"5"}</label></fieldset>
<label>{"What is one thing we should change?"} <textarea name="change" /></label>
<label>{"Email, only if you want a reply"} <input type="email" name="email" autoComplete="email" /></label>
<div aria-hidden="true" style={{position:"absolute",insetInlineStart:0,top:0,width:1,height:1,overflow:"hidden",clipPath:"inset(50%)"}}><input name="botcheck" tabIndex={-1} autoComplete="off" /></div>
<button type="submit" disabled={busy}>{busy ? "Sending…" : "Send answers"}</button>
<p ref={feedback} role="status" tabIndex={-1}>{status}</p>
</form>;
}
function mountCaptcha(node, siteKey) {
if (!node || !siteKey) return () => {};
let disposed = false;
let widget;
function render() {
if (disposed || !window.turnstile) return;
window.turnstile.ready(() => {
if (disposed) return;
widget = window.turnstile.render(node, { sitekey: siteKey, language: node.dataset.language || document.documentElement.lang || "auto" });
node.dataset.widgetId = widget;
});
}
if (window.turnstile) render();
else {
let script = document.querySelector('script[src^="https://challenges.cloudflare.com/turnstile/v0/api.js"]');
if (!script) {
script = document.createElement("script");
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
script.async = true;
document.head.appendChild(script);
}
script.addEventListener("load", render, { once: true });
}
return () => { disposed = true; if (widget !== undefined) window.turnstile?.remove(widget); };
}
function resetCaptcha(form) {
const widget = form.querySelector("[data-turnstile]")?.dataset.widgetId;
if (widget !== undefined) window.turnstile?.reset(widget);
}<script setup>
import { ref } from "vue";
const status = ref("");
const busy = ref(false);
async function onSubmit(event) {
const form = event.currentTarget;
if (busy.value || !form.reportValidity()) return;
const body = new FormData(form);
body.set("access_key", "fk_your_access_key");
body.set("_lang", "en");
busy.value = true;
status.value = "Sending…";
try {
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { Accept: "application/json" },
body,
});
const result = await response.json();
status.value = result.success ? (result.message || "Sent. Thank you!") : (result.message || "Could not send. Please try again.");
} catch {
status.value = "Connection failed. Please try again.";
} finally {
busy.value = false;
}
}
</script>
<template>
<form style="position:relative;display:grid;gap:16px;max-width:32rem" @submit.prevent="onSubmit" :aria-busy="busy">
<h2>A two-minute survey</h2>
<fieldset><legend>Which describes you best? *</legend><label class="fg-choice"><input type="radio" name="role" value="Customer" required> Customer</label><label class="fg-choice"><input type="radio" name="role" value="Trying it out" required> Trying it out</label><label class="fg-choice"><input type="radio" name="role" value="Just looking" required> Just looking</label></fieldset>
<label>How did you hear about us? * <select name="source" required><option value="">—</option><option value="Search">Search</option><option value="A friend">A friend</option><option value="Social media">Social media</option><option value="Something else">Something else</option></select></label>
<fieldset><legend>What do you use it for?</legend><label class="fg-choice"><input type="checkbox" name="uses" value="Work"> Work</label><label class="fg-choice"><input type="checkbox" name="uses" value="Personal projects"> Personal projects</label><label class="fg-choice"><input type="checkbox" name="uses" value="A client's site"> A client's site</label><label class="fg-choice"><input type="checkbox" name="uses" value="School"> School</label></fieldset>
<fieldset><legend>How satisfied are you overall? (1 = not at all, 5 = very) *</legend><label class="fg-choice"><input type="radio" name="satisfaction" value="1" required> 1</label><label class="fg-choice"><input type="radio" name="satisfaction" value="2" required> 2</label><label class="fg-choice"><input type="radio" name="satisfaction" value="3" required> 3</label><label class="fg-choice"><input type="radio" name="satisfaction" value="4" required> 4</label><label class="fg-choice"><input type="radio" name="satisfaction" value="5" required> 5</label></fieldset>
<label>What is one thing we should change? <textarea name="change"></textarea></label>
<label>Email, only if you want a reply <input type="email" name="email" autocomplete="email"></label>
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"><input name="botcheck" tabindex="-1" autocomplete="off"></div>
<button type="submit" :disabled="busy">Send answers</button>
<p role="status" tabindex="-1">{{ status }}</p>
</form>
</template>Create a free form, then open Connect on that form in this browser. If it still has the default name, email and message fields, they are replaced with this form.
| Question type | HTML in the copy | Use it for |
|---|---|---|
| One answer | Radio buttons in a fieldset | Who someone is, a 1 to 5 score, yes or no |
| Several answers | Checkboxes in a fieldset, one name | What they use, which features they want |
| Long list | A select with an empty first option | Five or more options, such as a source |
| Open answer | A textarea | What to change, anything else |
How the survey questions are written in HTML
- One answer. Radio buttons that share a
name, inside afieldsetwhoselegendis the question. Screen readers read the question before each option. When the question is required, every radio carriesrequired, and the browser asks for one of them. - Several answers. A checkbox group, also in a
fieldset. Every ticked box is sent under the one name. The group is never marked required, because in plain HTML that would force people to tick every box. - A scale. The 1 to 5 question is five radio buttons. Put the meaning of the ends in the label, as the sample does, or people will guess which end is good.
- A long list. A
selectwith an empty first option, so a required list makes people choose instead of sending the first item. - Open questions. A
textarea, optional in the sample. Required open questions are where people give up.
Writing questions people answer honestly
Ask one thing per question. “Was the site fast and easy to use?” is two questions, and the answer tells you neither. Give a “Something else” option when your list may not cover everyone, so people do not pick the nearest wrong answer. Keep the wording neutral: “How satisfied are you?” rather than “How much did you enjoy it?”.
Put the easy questions first and the open one last. Ask for an email only if you will write back, and leave it optional. Without it, the answers carry no name or address unless the person types one.
Pew Research Center’s guide to writing survey questions, linked in the sources, covers question order and wording in more depth.
Where the answers go
After you add your key, each response is stored in your Formgong inbox and sent to you by email or Telegram. A checkbox group arrives as one field with every ticked option.
To count answers, connect Google Sheets. It adds one row per response, and a pivot table or COUNTIF gives you the totals. If you need branching, where question 3 depends on the answer to question 2, a survey tool is the better fit. This page writes a single-page form.
Free limits, email and storage
The survey code is free to copy. Responses are delivered only after you replace the placeholder key.
Copying the code needs no account. AI generations are limited to 5 an hour and 10 a day for each network, plus 100 a day for the whole site. When a limit is hit, use “Build it yourself, without AI”. That path does not call the model.
On the free plan, Telegram is instant and email is sent for every submission. The free plan is 1,000 submissions a month. Auto-reply is not on the free plan. Submission data is stored in the EU. Support is Formgong at support@formgong.com.
Your description is sent to the model so it can choose fields. It is not stored. Do not paste passwords, card numbers or other secrets.
Questions
What is a survey form generator?
A tool that turns your questions into form fields you can put on a website. This one writes HTML, Tailwind, Bootstrap 5, React and Vue versions of the same survey.
How do I make a survey form in HTML?
Use radio buttons for one answer, checkboxes for several and a textarea for open answers. Group each question in a fieldset with a legend. Copy the HTML tab on this page for a working example.
Can the survey be anonymous?
Make the email field optional, or delete it. Then a response carries no name or address unless the person types one into an answer.
Can I see the results as a chart?
This page does not draw charts. Connect Google Sheets to get one row per response, then chart or count them there.
Can the survey skip questions based on an answer?
No. The form is one page with every question shown. Use a survey tool if you need branching logic.
Sources
Checked on 16.10.2026 against these public pages: Pew Research Center: Writing survey questions, W3C WAI: Grouping controls, MDN: input type=radio, MDN: input type=checkbox.