I documented how to add a contact form to an mkdocs-material website

[velduz]

This might be interesting for others who wonder how to add an input form to their website.
See my demo at https://contact-form.papasmurf.nl.
I added the link to the repository so that everyone can see how it's done.

UPDATE: I set the repo to public. Thanks @santaimpersonator to report this!

[santaimpersonator]

The repository linked in your demo webpage required a login. I eventually found your repo(?) and instructions (for those w/o a GitLab account):

• Instructions: https://www.papasmurf.nl/en/2024/02/06/unstatic/
• Repo: https://gitlab.com/janware/papasmurf.website

[MaximilianKohler]

All the links are dead.

[kamilkrzyskow]

Quick fixup of the link leads to this address https://papasmurf.nl/en/blog/unstatic/
Looks like OP went back to Hugo.

Here is the commit with the form:

• https://gitlab.com/velduz/papasmurf.website/-/commit/54da881aabf2e14fed789dbc085a7a975527ee56

For future reference, since MkDocs generates static websites and most people host it on GitHub Pages, there is a need for external back-end service to process the form submissions. There are many such sites with free tiers etc. here un-static.com got recommended, but other services are also available with a quick search.

As for the form it's written in HTML, and styled with additional extra CSS.

At Nype we also use contact forms:

• Contact Form macros template stored in the mkdocs-nype theme to expose it to all Nype projects
  • https://npe.cm/contact/
  • (source)
• CSS styling
• JavaScript for validation and postprocessing of the form action link

This likely is not a solution that is straightforward to copy, but could be beneficial nonetheless for anyone wanting to tinker with it beyond a plain form.

[MaximilianKohler]

What backend do you use? It seems like there should be an open-source, self-hostable one. But these are what I've come across so far:

Some use Netlify forms for contact. https://www.netlify.com/platform/core/forms/ - 100 submissions per site /month ($19+ when exceeded). https://docs.netlify.com/accounts-and-billing/billing-faq/

Piko theme https://themes.gohugo.io/themes/piko/ uses FormSubmit.io (free?) or Fabform.io ($5/mo).

500/mo 17/day free https://www.formingo.co/

https://web3forms.com/ - 250/mo free, then $8/mo unlimited.

$5/mo unlimited https://formx.stream/pricing.html

Tella https://themes.gohugo.io/themes/tella/ uses getform.io opera7133/tella#63 (50/mo)

https://formspree.io/plans - $10/mo for 200, $60/mo for 20k.

PHP + PHPMailer https://www.webhostingtalk.com/showthread.php?t=1932304

[kamilkrzyskow]

What backend do you use?

Also un-static.com, as back when it was added the website wasn't hosted on a VPS, so I quickly compared the services and since most of them were similar enough we opted into an already recommended solution ^^, oh and it supports multiple forms/endpoints with the free plan. Allegedly all forms have a separate quota, but this wasn't field tested 😅

The quota for a given form of 25 submissions per month wasn't reached yet, so I'm not entirely sure what would the process look like after reaching the threshold. Would it block the message transfer or is there some buffer which allows to overflow the cap a wee bit 🤔

Formspree also has free tier of 50 submission per month which you've missed in the write-up above, and looking at the page you've linked there is also an 30 day archive which might be handy. However, even with unlimited forms / endpoints the submission quota is shared based on the description.

There is also https://www.staticforms.xyz/ which is supposedly completely free, with an undocumented submission quota 👀 aka as long as you don't misuse the service it's fine 👌 But this felt too good to be true, so I didn't use it.

Another approach I considered was to use Google Forms and similar like baserow.io, which would store the submissions in a spreadsheet. But I would not use the embedded forms, which didn't fit into the style of the website at all, instead I would sort of hijack the endpoint and use a normal HTML form with it. Google Forms supports prefilled links so every field has an ID, but I never tried it so can't say how reliable it is to bypass Google Forms and use the endpoint 🤔

It seems like there should be an open-source, self-hostable one

Now that the website is hosted on the VPS, there is the option to self-host something which I haven't considered before 🤔
A quick search lead me to this project:

• https://github.com/FormBee/FormBee
  • Also has plans like above 250 submissions per month on the free tier, shared quota for multiple forms.