Drupal 8 as a Static Site: Contact Form Architecture

Submitted by nigel on Wednesday 26th December 2018

As I have already mentioned in this sequence of blogs, the intention is to use AWS products for my static site contact form. It's worthwhile explaining the proposed architecture and steps involved to implement such a solution. On the face of it, it may appear somewhat convoluted, but AWS provide a number of complementary products to achieve what we want, and the configuration can be saved in code so it is easy to reproduce. 

Architecture
Architecture Diagram

The above diagram shows the architecture of our contact form, and the flow through the form ecosystem. Let's have a look at the components. 

Webpage with Contact Form

Drupal comes with a contact form in core, and therefore this is fairly straightforward, albeit with a couple of hurdles to jump. Firstly I would like to place my contact form on my About Me page underneath my existing bio. To achieve this I need the form to be a block which will require the installation of a contrib module. In addition I want my form's action to POST the form data to an external URL which isn't supported in the core form - so that will need a solution too. 

AWS API Gateway

The form will be submitted for processing to AWS since we don't have a backend on our own static site - hence why the form needs an external URL for its action parameter. 

We will use AWS API Gateway which is a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale. This will give us access to AWS compute backend services to process our POSTed form. 

AWS Lambda Function

AWS Lambda is a FaaS (Function as a Service) compute service. It is excellent at running a snippet of code on demand once it's been triggered, for instance in our case by the contact form being POSTed.

PHP isn't a supported Lambda language, but there are workarounds for this - as explained in my sequence of blogs here. Using these workarounds, we will develop a PHP app to process the form, and in addition we will need the AWS PHP SDK to interface with AWS SES (Simple Email Service). 

The PHP code will reside in Amazon's S3 object storage, and we will use the serverless product along with the aws console to manage the deploy process. 

AWS SES

AWS SES is a very cost effective method of sending marketing, notification and transactional emails. For the amount of usage a blog contact form would see, it's highly unlikely to go above the AWS free tier threshold. It is the perfect tool for sending the contact form contents onto my personal email account. 

Inbox

The objective is the form contents should arrive into my Gmail inbox for me to read and action if necessary. 

Thank you page

The last activity of the Lambda function is to redirect the submitted form back to the website's thank you page which will have to be constructed as part of this exercise. The redirect will be a 307 to preserve the POSTed parameters that can be parsed and injected into the thank you message with a few lines of JavaScript.