{{craftSnippets}}
Home Articles Plugins Starter theme Components on Github Gists About
  • Home
  • Articles
  • Email footer creator made with Craft CMS
Posted on Nov 18, 2019 by Piotr Pogorzelski

Email footer creator made with Craft CMS

Email footer creator on github gists
image/svg+xml Email footer creator demo
By using just Twig templates, we can create a simple app that generates HTML code from user-provided content.
Table of contents:
  • Why would you need email footer creator?
  • How does it work?
  • Email creator code
  • Making email footer creator admin restricted

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 %}

If you want to get latest updates on Craft CMS tutorials and components, follow me on Twitter or subscribe to RSS feed.
Quick links for this article:
Email footer creator on github gists
image/svg+xml Email footer creator demo
Articles on blog:
  • Frontend testing for Craft CMS websites with Codeception and Cypress
  • Building reactive Craft Commerce product page with Sprig plugin
  • Dynamically generated PDF attachments for Freeform submissions
  • Using template hooks in Craft CMS
  • Alpine JS modal component for Craft CMS
  • Using template UI elements to extend Craft CMS control panel
  • Matrix within a Matrix - possible solutions for Craft CMS
  • Universal email template for Craft CMS
  • Creating attributes table from entry fields in Craft CMS
  • Namespacing forms in Craft CMS
  • Creating map-based navigation for Craft CMS
  • Placeholder image macro for Craft CMS
  • Building AJAX contact form with Craft CMS
  • Using incognito field plugin for Craft CMS
  • Email footer creator made with Craft CMS
  • Infinite scrolling and lazy loading with Craft CMS
  • Using Javascript in Twig templates with Craft CMS
  • Twig templating tips and tricks for Craft CMS
  • Basic SEO functionality for Craft CMS
  • Working with dates in Craft CMS templates
  • Working with SVG images in Craft CMS templates
  • Responsive and lazy-loaded youtube videos with Craft CMS
  • Debugging and inspecting Twig templates in Craft CMS
  • Creating article excerpts with Twig component in Craft CMS
  • Adding favicons to Craft CMS website
  • Truncating text with Twig macros in Craft CMS
  • Universal language switcher for Craft CMS
  • Read time macro for Craft CMS
  • Using attr() function to render HTML attributes in Craft CMS
  • Building dynamic, AJAX based pagination for Craft CMS
  • How to add Disqus comments to Craft CMS website
  • Ellipsis pagination component for Craft CMS
  • Converting email addresses into links using Twig macro
  • Breadcrumb created from URL for Craft CMS
  • Best developer-oriented Craft CMS plugins
  • Search autocomplete component for Craft CMS
  • RSS feed - template component for Craft CMS
  • Testing emails sent by Craft CMS using Mailtrap
  • Quick edit link - Twig component for Craft CMS
  • Filtering entries in control panel using Searchit plugin
  • Fetching routes into Twig templates in Craft CMS


Frontend testing for Craft CMS websites with Codeception and Cypress

Building reactive Craft Commerce product page with Sprig plugin

Dynamically generated PDF attachments for Freeform submissions

Using template hooks in Craft CMS

Alpine JS modal component for Craft CMS

Using template UI elements to extend Craft CMS control panel

Matrix within a Matrix - possible solutions for Craft CMS

Universal email template for Craft CMS

Copyright ©2023 Piotr Pogorzelski