Create Contact Form In Hugo Using AWS Lambda Serverless
Here is a very quick way to setup a contact form in hugo.
Is it possible to add a contact form to a site? - support - HUGO
I decided to hack this using n8n
# got this from postman!
curl --location --request POST 'https://n8n.santoshsrinivas.com/webhook/4/get-data/webhook' \
--form 'name=Santosh Srinivas' \
--form 'email=santosh@n0c0de.com'
IMPORTANT:
To ensure authorization to work correctly with n8n. I had to do the following:
- Set
export NODE_ENV=production
while starting n8n as mentioned here: - Set nginx config as below as mentioned here
My final nginx config was:
server {
server_name *****************; # Replace with your domain
access_log /var/log/n8n_ss_acc.log;
error_log /var/log/n8n_ss_err.logs;
# credit: [Strange behavior of self-hosted version · Issue #595 · n8n-io/n8n](https://github.com/n8n-io/n8n/issues/595)
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;
# credit: [Reverse Proxy · Issue #36 · n8n-io/n8n](https://github.com/n8n-io/n8n/issues/36#issuecomment-539647882)
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 43200000;
proxy_buffering off;
proxy_cache off;
chunked_transfer_encoding off;
# proxy_set_header Connection '';
proxy_pass http://************;
}
listen 443 ssl; # managed by Certbot
ssl_certificate ****************/fullchain.pem; # managed by Certbot
ssl_certificate_key ****************/privkey.pem; # managed by Certbot
include **************options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam **************ssl-dhparams.pem; # managed by Certbot
}
References⌗
- Create Dynamic Contact Forms for S3 Static Websites Using AWS Lambda, Amazon API Gateway, and Amazon SES | AWS Architecture Blog
- Serverless contact forms with AWS Lambda | by Marko Francekovic | Calyx | Medium
- Building Serverless Contact Form For Static Websites | Hacker Noon
- Hosting a Private Serverless Static Website on AWS
- How to Create a Contact Form in Hugo with Netlify Forms | brianli.com
- Forms on Hugo using Shortcode | FormKeep
- Building Newsletter and contact forms for Hugo site. | Pritesh Usadadiya
- Embed HTML file in page - support - HUGO
- Simple Shortcode to Insert Raw HTML in Hugo · Ana Ulin
- Need multiple static pages - home, about, contact, prices etc. · Issue #679 · gohugoio/hugo
- javascript - How to add Header Authorization for POST FORM using JS/AJAX/JQUERY? - Stack Overflow
Read other posts