Three years ago I wrote an article about how to build a contact form in jekyll. My previous work on this code lasted quite a while. I’m happy with it but It’s become a bit much to manage in its current state.
Reasons to refactor
- The TO field was an environment variable. This necessitated a 1:1 ratio of domains to containers I was running. NOT maintainable…
- yaml for mailgun proxy config
- Form generator for easy scaffolding of embedable forms.
- vue3/axios dependency updates.
Given a custom domain and a properly configured mailgun account; you can be up and running with this project in minutes. You can check it out over at derek-adair/embedded-contact. The README has more detailed instructions but here is a high level overview;
1) The api.
Currently its pretty “dumb” and takes your mailgun key as an environment variable. The most sophisticated piece of this is how it reads proxy.config.yml;
domains: # Your mailgun domain mg.<yourdomain>.com: to: <your_valid_email> uris: - https://<yourdomain>.com
2) The Form Generator
- Create a form definition, something like
- Initialize in main.js
import CustomContact from "./CustomContact.vue"; createApp(CustomContact).mount("#custom-contact");
- Build w/
docker-compose run --rm form-generator yarn run build
The only real security in place is basic CORS and some validation to ensure I dont accidently cross my clients forms.
Know the risk
This code is vulnerable to CSRF attacks. I do have auth planned, but I am not really that concerned as this would really take someone seeking to maliciously attack a specific target – for those reasons I am not sure when I will get around to this.
- Releases on pypi / npm
- Additional mail providers
- Mailing lists?
- Probably a SQLite DB??
- Official docker images
- You tell me