Thanks — your message is on its way!
'; } else { throw new Error(result.message); } } catch { form.insertAdjacentHTML( 'beforeend', 'Something went wrong. Please try again.
' ); } }); ``` Because the `apiKey` is already a hidden field in the partial, `new FormData(form)` picks it up automatically — no need to repeat it in the script. The honeypot rides along in the payload too, so spam protection still applies. ## Multilingual contact forms Hugo's first-class multilingual support is one of its biggest draws, and your contact form should follow suit. Move the user-facing strings into your i18n translation files (`i18n/en.toml`, `i18n/fr.toml`, and so on): ```toml # i18n/en.toml [contactName] other = "Name" [contactMessage] other = "Message" [contactSend] other = "Send message" ``` Then reference them in the partial with the `i18n` function: ```go-html-template ``` The same single endpoint handles every language — only the labels change. You can even set a per-language email subject so you know which site version a message came from. ## Going further - **Spreadsheets and tools.** Forward submissions to a sheet with the [Google Sheets integration](https://www.staticforms.dev/integrations/google-sheets), or send them anywhere via [webhooks](https://www.staticforms.dev/integrations/webhooks). - **AJAX submission.** Prefer an inline success message over a page navigation? Submit with `fetch()` — the pattern is the same one we use in the [JAMstack contact form guide](https://www.staticforms.dev/blog/jamstack-contact-form). - **Other generators.** Using more than one static site generator? We have matching tutorials for [Astro](https://www.staticforms.dev/blog/astro-contact-form-tutorial) and other frameworks. ## Troubleshooting The most common snags on a Hugo setup: - **`partial "contact-form.html" not found`.** The partial must live at `layouts/partials/contact-form.html` in your project root (not inside `themes/`). Hugo resolves project-level layouts first, which is also how you safely override a theme. - **Raw HTML in Markdown is being stripped.** Hugo's Goldmark renderer drops raw HTML by default for safety. That's why this guide uses a partial and a shortcode instead of pasting ` ``` That top block between the `---` lines is Jekyll front matter — it tells Jekyll to wrap the page in your `default` layout and serve it at `/contact/`. Replace `YOUR_API_KEY_HERE` with your real key. A few fields are doing important work: - **`apiKey`** routes the submission to your account. - **`replyTo`** set to `@` tells Static Forms to use the submitter's own email as the reply-to address, so you can reply straight from your inbox. - **`honeypot`** is a hidden field. Real visitors never see it, but spam bots fill in every field they find — so any submission with a value here is silently rejected. ## Step 2: Make it a reusable include If you want the same form in your footer, your about page, and a dedicated contact page, copy-pasting the markup gets old fast. Jekyll includes solve this. Create `_includes/contact-form.html`: ```html ``` Store the key once in `_config.yml` so it isn't scattered across files: ```yaml staticforms_key: YOUR_API_KEY_HERE ``` Now drop the form anywhere with a single Liquid tag, optionally overriding the email subject per page: ```liquid {% include contact-form.html subject="Contact form — pricing page" %} ``` Because the API key is published in your site's HTML either way (that's true of any client-side form), treat it as a public form key rather than a secret. It only authorizes submissions to your account's endpoint. ## Step 3: Commit, push, and test GitHub Pages rebuilds automatically on every push to your publishing branch: ```bash git add contact.html _includes/contact-form.html _config.yml git commit -m "Add Static Forms contact form" git push origin main ``` Give the build a minute, then open `/contact/` on your live site and send yourself a test message. The first time you submit, Static Forms emails you a confirmation link to verify the form — click it once and every submission after that flows straight to your inbox. ## Step 4: Send visitors to a thank-you page By default the API returns a plain success response. For a Jekyll site you almost always want to send visitors to a friendly confirmation page instead. Add a `redirectTo` field pointing at a thank-you page you build in Jekyll: ```html ``` Then create `thank-you.html` with `permalink: /thank-you/` and whatever message you like. The full list of supported fields is in the [Static Forms documentation](https://www.staticforms.dev/docs/html). ## Step 5: Style the form to match your theme The default Jekyll theme (Minima) and most others give you sensible base styles, but a contact form usually wants a little polish. Add this to your `assets/css/style.scss` (or a `