Our previous two tutorials on the Drupal 8 as a static site covered the Contact Form and the journey through the action to AWS Lambda to process the form and send an email. Now the final part of the contact form journey - returning back to the static site and showing a Thank You page.
In fact in this tutorial the Thank You path will actually be the same path with the contact form on it - so we return to the starting point, but we want to show a message back to the user to thank them for filling out the form. The notification back to the user will have to be JavaScript obviously since we have no backend language functionality.
If you remember the redirect back to the static site from AWS uses a HTTP code of 307. This code matches in the incoming HTTP request with the redirect. So since in our case the form was POSTed, then the redirect will also be POSTed back to the static site. This is both a blessing and a curse as we'll see.
Common wisdom says that JavaScript can neither detect whether an incoming request is POSTed or GETed, nor retrieve any of the POSTed data. That is theoretically true, but there are always workarounds of course :) :)
{themename}.theme - in my case the custom theme is called beezee8.
<?php
function beezee8_preprocess_page(&$variables) {
// If we are on the search page, load the JS search client api
// and our implementation to Elasticsearch
if (\Drupal::routeMatch()->getRouteName() == 'search.view_node_search') {
$variables['#attached']['library'][] = 'beezee8/elastic-library';
}
// If we are on the contact form page, load the JS to show thank you message
if (\Drupal::request()->getRequestUri() == '/about') {
$variables['#attached']['library'][] = 'beezee8/thank-you-library';
}
}
?>
{themename}.libraries.yml
global-styling: css: theme: css/style.css: {} elastic-library: js: js/elasticsearch-js/elasticsearch.min.js: {} js/beezee/beezee_elastic.js: {} thank-you-library: js: js/beezee/beezee_thankyou.js: {}
{themename}_thankyou.js
(function ($, Drupal) { var thank_once; function BeezeeThankyou() { if (!thank_once) { thank_once = true; // If we are arriving here from lambda which passes on the referrer from here // then the form has been POSTed so show the thank you page if (document.referrer == document.URL) { // Markup to add the thankyou message var thanks = [ '<div class="alert alert-success alert-dismissible" role="alert">', '<button role="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>', '<h4 class="sr-only">Status message</h4>', 'Thank you for contacting me. I will be in touch.', '</div>' ]; // Inject the markup $('.region-highlighted').append(thanks.join('')); } } } Drupal.behaviors.beezee_thankyou = { attach: function (context, settings) { BeezeeThankyou(); } }; })(jQuery, Drupal);

{VM name}.conf
server { . . . error_page 405 =200 $uri; . .

Ok we should now be good to go. Submit the form and it should do the round trip from static site to AWS Lambda back to static site and an email arriving in your inbox!

If you look carefully above you will see a placeholder in the thank you message. So am I saying it is possible to retrieve the POSTed data and insert the name into the placeholder? Sort of. There is a JS library called jQuery-PostCapture which can achieve this. It works by capturing the POSTed data when the form is initially submitted. This copy of the data is stored either as a cookie or in the browser's local storage. Once the trip to AWS Lambda is completed, this data can be fetched from the cookie or local storage - so the data isn't fetched from the actual POST itself.
The problem I've got with this is neither a cookie nor local storage is secure. However if you feel that the gains (being able to customise a message on the thank you page) is worth the security risk, then give it a shot!