Contact page - we need one! Or.... many?

[gerbrent]

We need a Contact page!

Historically we have had a contact form/page for JB.com, and one on each of the Show websites.

With the current all-shows-in-one site, it could be possible to have a single Contact page that allows for a Show selection - i.e. I want to send feedback to LUP, or to SSH, or to the JB Network generally, or a sponsorship request.

So:

• create a Contact page with link in the menu
• each Show should have a contact method that directs the feedback/mail to a Show-specific email address
• each Show and Episode page should include a link to the Contact page, and potentially auto-choose/populate/direct the contact form to the right Show

[kbondarev]

@gerbrent what you described is a good process, but there's also an important technical question here: what will be the backend to send these emails?

The generated Hugo site is static.

Here are some ideas:

• Use some third-party services like mentioned here
• Make a minimal backend script (python 🐍 ?) that would send emails to specific inboxes via SMTP
• Need to add recaptcha to the contact form(s) to reduce spam from bots

[gerbrent]

great points, and seemingly the first apparent downside to Hugo we've come across so far. Hmm!

[elreydetoda]

Ya, I've used this service in the past, but they have payment tiers and with how much you all get feedback it might end up costing 😅 https://formspree.io

Make a minimal backend script (python snake ?) that would send emails to specific inboxes via SMTP

@kbondarev, how would you get the script to run with nginx?

seemingly the first apparent downside to Hugo we've come across so far

Ya, that's a downfall for any static site generator (SSG), because it all "compiles" down to HTML, CSS, or JS. You'd typically have to have some type of backend running (php, python, ruby, etc...) to process things like that.

An alternative to a backend script would be similar to @reesericci's other issue (#41), where we could do some type of backend processing via a serverless/edge function that'll get processed before it even hits the hugo website.

This seems like a pretty good overview (as in diagrams, even though they give you the code as well) of what we're looking to do, just with AWS infra (which isn't necessary, just some type of edge processing service (Cloudflare has one)): https://aws.amazon.com/blogs/architecture/create-dynamic-contact-forms-for-s3-static-websites-using-aws-lambda-amazon-api-gateway-and-amazon-ses/

Lastly, we might be able to try and embed a nextcloud form into an iframe? I don't know if you can configure Nextcloud forms to submit to specific emails, and there might be other quirks but I'd imagine it might be an option.

[kbondarev]

@kbondarev, how would you get the script to run with nginx?

Use nginx to proxy a specific URL location to a different port (possibly even host) where the backend-script/app will run on.

For example: POST requests to /contact-form/send are proxies to localhost:5000 where the script listens at for a POST request.

Then the html form will be: <form action="contact-form/send" method="post">...

[kbondarev]

@elreydetoda, the AWS article you linked is pretty much how it would work with a script that would send mail via any SMTP server (even using gmail).

IMO it's simpler than serverless and not dependant on any infrastructure.
Maybe it even can be achieved without python at all (CGI + bash 😅)

It would have one API point it listens to. Accepts form data:

• Subject
• name
• email of the sender
• message
• and I guess context (basically which show it relates to. Based on this we send it to different inboxes or add extra label in the subject line for filtering)

[elreydetoda]

Ah, gotcha I didn't realize you were meaning reverse proxy for an API endpoint when you said backend script 😅

Ya, if that's something they're comfortable deploying it'd probably be the easiest. Plus if we do it in FastAPI then maybe @noblepayne'll even be happy about it 😁 (IIRC, he talked about it with @dominickm in the Coder Radio show 🙂 )

Plus FastAPI has a nice self documenting feature + swagger doc creation while using pydantic to help validate types and such 🥳

[kbondarev]

I WAS thinking of doing it in using FastAPI 😉
I ❤️ FastAPI as well! (and all everything developed by tiangolo tbh!!)

[elreydetoda]

Ya, I love it as well! I used it to create a pretty basic RSS feed merger for all of my podcasts which then get placed in an S3 bucket. I expose it over my internal network and provision it with aws creds in a docker container, and an able to just hit it with curl + a cron every 12 hours to update all my podcast to one feed 😁 (almost like the all shows feed but for more than just JB shows)

Here is the project if anyone wants to check it out 🙃
https://github.com/elreydetoda/all-linux-tings/tree/master/apis%2Frssaggregator%2Fapp

[trev-dev]

Going with the simplicity of SSG sites, would it be too terrible to have a simple mailto link, perhaps guarded by some form of CAPCHA?

[reesericci]

I think that Netlify Forms is a simple elegant solution for creating forms on a static site. You just make a normal html form then add the "netlify" attribute and it automagically works. (assuming the site is deployed with netlify)

[reclaimingmytime]

The current contact form at https://www.jupiterbroadcasting.com/contact/ is already using the external form builder Wufoo: https://jblive.wufoo.com/embed/w7x2r7/

This should also be compatible with Hugo. We could just iframe the page above, and not lose any functionality, while we find a different solution long-term.

[gerbrent]

GREAT potential solution - and nice investigative work.
I say lets do it! Unless there's some reason why this approach is not good enough for the 1.0 Milestone?

[reclaimingmytime]

All right, I'm going to create the page and work on a pull request ;)

[reclaimingmytime]

I created the pull request #189