Why would you need email footer creator? #
Recently my team was tasked with creating email footer for clients company. Graphic design of the footer was pretty complicated, so we decided to use MJML email framework. Once our work on footer was complete, we were supposed to pass it over to our client. Then it would be distributed among our client's employees - and they would fill footer with their personal data.
There was just one problem - HTML source code generated by MJML was by no means easy to read. For a non-technical person - it looked like gibberish and it was very probable that someone would break something in footer code while trying to edit it.
To solve this problem, I decided to use Craft CMS (which was already used to power client's website) to create email footer creator. Each employee would receive a link to this creator, type in his own data and paste generated HTML code into an email client.
How does it work? #
The basic premise is very simple. Take email footer HTML code, and replace default values of employee personal info with input from the user. User will see a preview of footer and have the ability to copy generated HTML code, so it can be pasted into an email client. Such a simple app can be created using just Twig templates - no custom modules needed.
To make the creator available to user, we just need to place its file in templates directory. It will be available under the same URL as creator template filename, thanks to Craft routing functionality.
As for user interface - we will use a few Bulma framework classes. Thanks to them, creator will have a simplistic and sleek look.
Email creator code #
{# personal info values #}
{% set fields = {
field_name: 'Full name',
field_email: 'Email address',
field_phone: 'Phone number',
} %}
{# disable seomatic if installed #}
{% if seomatic is defined %}
{% do seomatic.config.renderEnabled(false) %}
{% endif %}
{# load email template #}
{% set template %}
{% include 'footer/template' %}
{% endset %}
{# replace default with values from url params #}
{% for key, label in fields %}
{% if craft.app.request.getParam(key) is not empty %}
{% set template = template|replace({(key): craft.app.request.getParam(key)}) %}
{% endif %}
{% endfor %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{'Email footer creator'|t}}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">
<style>
.hidden{
height: 0px;
width: 0px;
opacity: 0;
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="columns">
<div class="column">
{# preview #}
<div class="title">{{'Preview:'|t}}</div>
<div class="box">
{{template|raw}}
</div>
</div>
<div class="column">
{# fields #}
<div class="title">{{'Contact info:'|t}}</div>
<form class="box">
<div class="intro">
{{'Please type in your contact info, click "reload" and then "copy" to copy footer code to clipboard.'|t}}
</div>
<br>
{% for key, label in fields %}
<div class="field">
<label class="label" for="{{key}}">{{label}}</label>
{{tag('input', {
type: 'text',
name: key,
id: key,
value: craft.app.request.getParam(key),
class: 'input'
}) }}
</div>
{% endfor %}
<button class="button is-link">{{'Reload'|t}}</button>
<button class="button is-primary js-copy-trigger">{{'Copy'|t}}</button>
<a href="{{url(_self)}}" class="button is-danger">{{'Reset'|t}}</a>
</form>
<textarea class="js-copy-content hidden">{{template|escape}}</textarea>
<script>
document.getElementsByClassName("js-copy-trigger")[0].addEventListener("click", function(e){
e.preventDefault();
var copyText = document.getElementsByClassName("js-copy-content")[0];
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
document.execCommand("copy");
alert("Copied the text");
});
</script>
</div>
</div>
</div>
</body>
</html>
Let's walk through each part of the creator code. I assumed that it is supposed to be completely standalone and independent of any other templates. Therefore, I wrapped it in basic HTML markup and added a link to Bulma CDN file at the beginning of the code.
That aside, let's take a look at Twig code. First, we define list of values to replace, as Twig object named fields. Each key of the object is text that is supposed to be present in the HTML code of footer, and be later replaced with user input. Make sure that you don't use any common words for keys, to avoid accidental replacement of other parts of email source code. Keys of fields object will also be used as keys for GET parameters added to URL when user submits the form - so remember to format them correctly. Values of fields object are human-readable labels that will be used along with inputs.
Next, we load email footer template by including footer.html file contents into a variable. After that, we replace default employee info values with values taken from GET parameters. These values are available if form was submitted, and form fields are created from fields object by using for loop. Each field is a regular text field.
We also need to take care of Seomatic plugin - assuming it is installed. By default it will insert Tag manager code into HTML source code of email footer - we need to disable this behavior for our template file.
Now, time for buttons. First one submits a form and reloads the page. Second has Javascript code attached - when clicked, it copies footer HTML code from hidden textarea into the clipboard. There is also "reset" button - it is link with URL of creator stripped of all GET params - clicking it will revert creator to initial state.
Finally - textarea with generated HTML code. Code from textarea can be copied and textarea itself is hidden, but not by using display: none or hidden attribute - that would make it impossible to copy from. Instead, textarea is hidden by making it very small and with 0 opacity by using CSS class.
Making email footer creator admin restricted #
If you don't want to expose your creator to outside world, just wrap its code within this condition:
{% if currentUser and currentUser.can('accessCp') %}
{# email footer creator code... #}
{% else %}
You must be logged in to see this.
{% endif %}
