When to use an embed
If you are happy with a redirect to a thank-you page, you do not need any code: set the form's custom action as described on the Webflow contact form page. Use these embeds when you want the message to appear in place, the way a native Webflow form behaves. Code Embed needs a paid site plan or a paid Workspace.
Contact form embed
The fields use Webflow's w-input and w-button classes, so they pick up your site's form styles. The script stops the submit event before Webflow's own form handler sees it, then shows .w-form-done or .w-form-fail depending on what Formgong answered.
<div class="w-form">
<form id="formgong-contact" action="https://formgong.com/submit" method="POST">
<input type="hidden" name="access_key" value="fk_your_access_key">
<label for="fg-name" class="field-label">Name</label>
<input id="fg-name" class="w-input" type="text" name="name" autocomplete="name" required>
<label for="fg-email" class="field-label">Email</label>
<input id="fg-email" class="w-input" type="email" name="email" autocomplete="email" required>
<label for="fg-message" class="field-label">Message</label>
<textarea id="fg-message" class="w-input" name="message" rows="5" required></textarea>
<div aria-hidden="true" style="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
<input type="text" name="botcheck" tabindex="-1" autocomplete="off">
</div>
<input type="submit" class="w-button" value="Send message">
</form>
<div class="w-form-done" role="status" style="display:none"><div>Thanks! Your message has been sent.</div></div>
<div class="w-form-fail" role="alert" style="display:none"><div>Not sent. Please try again.</div></div>
</div>
<script>
document.getElementById("formgong-contact").addEventListener("submit", async (event) => {
event.preventDefault();
event.stopPropagation(); // keep Webflow's own form handler out of it
const form = event.currentTarget;
const wrapper = form.closest(".w-form");
const done = wrapper.querySelector(".w-form-done");
const fail = wrapper.querySelector(".w-form-fail");
const button = form.querySelector("[type=submit]");
button.disabled = true;
fail.style.display = "none";
try {
const response = await fetch(form.action, {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(form),
});
const result = await response.json();
if (result.success === true) {
form.style.display = "none";
done.style.display = "block";
} else {
fail.firstElementChild.textContent = result.message || "Not sent. Please try again.";
fail.style.display = "block";
}
} catch {
fail.firstElementChild.textContent = "Not sent: check your connection and try again.";
fail.style.display = "block";
}
button.disabled = false;
}, true);
</script>
Before you publish
Scripts in a Code Embed do not run in the Designer, so the form will only send on the published site or the staging domain. Webflow does not keep these submissions; they are in your Formgong inbox.
How we tested this code
We pasted each snippet unchanged into a fresh project (a plain page with Webflow's class names, plus a document-level submit listener standing in for Webflow's form script), filled in a real access key, and submitted it in Chromium three times against a local copy of Formgong. With the right key the form showed its success text and exactly one submission was stored, not marked as spam. With a key Formgong does not know, the form showed Formgong's own error, "That access key does not exist.", and nothing was stored. With the request cut off, the form said it was not sent. None of the snippets says "sent" before Formgong answers success: true.
That listener never fired, which shows that the embed's own handler keeps Webflow's handler out. We did not load Webflow's real script, so send one test on your published site.
Questions
Is it safe to put the access key in front-end code?
Yes. The key only lets someone send a submission to your form, the same thing your page already does. It cannot read submissions or change settings. If you want it out of the page source anyway, add your domain under allowed domains in the form settings, or post through your own server.
Can I keep my Webflow-designed form instead?
Yes. Set Custom action to https://formgong.com/submit with method POST and add the hidden access_key in a small embed inside the form. Visitors are then redirected after they submit.
Do Webflow form notifications still work?
No. These submissions never reach Webflow. Formgong emails each one, and you can add more recipients or Telegram in the form settings.
What is the hidden botcheck field?
A honeypot. It sits off screen, so people never fill it, while simple bots fill every field they find. Formgong marks a submission with it filled in as spam, so it does not reach your email. Keep the name botcheck.
Sources
Checked on 16.10.2026 against these public pages: Webflow Help: Custom code embed, Webflow Help: Forms.