Email Base Layout [Free Form] ✨

Re-usable email template fully tested in:

• Apple Mail (Light/Dark)
• Outlook Office 365 (Light/Dark)
• Outlook 2016
• Outlook 2019
• Gmail App Android (Light/Dark)
• Gmail App iOs (Light/Dark)
• iPad (Retina)
• iPhone 11/12/12 mini/SE
• AOL Mail (Edge)
• Gmail (Chrome)
• Outlook (Chrome) (Light/Dark)
• Yahoo! Mail (Firefox)

How to use in your awesome Craft CMS project:

Templates:

You will find the email layout and the example FreeForm template within templates directory.

• Place the email-templates directory inside your templates directory. NOTE: Is not mandatory to place it in the root of templates directory. You can place it inside a subdirectory as well, it is up to you. Just remember, if you place this in a different location, you will need to replace the extends path in the _email-layout.html template: {% extends "_email-layout.html" %}
• Place the _email-layout.html file inside your templates directory. It is recommended that email-templates directory and _email-layout.html file to be at the same level, if this template is not sibling of email-templates directory, you will need to replace the extends path (line 7) with the correct one.
• Go to /admin/freeform/settings/email-templates to set up the templates path.
• Type email-templates as the template directory path. If you placed the email-templates directory in a different location you will need to fill the field with the correct location according to your templates structure.
• Click Save.
• The example Contact Us template will be shown below.

• Go to your FreeForm in /admin/freeform/forms to configure your form notification template.
• Click on your form name.
• At the top/right corner, click in the Admin Notification ( icon) and select the example Contact Us template.

🔎 Don't forget to set up the admin recipients email addresses in the textarea below. 📌 It is recommended to use internal testing email addresses in development/local environments (your personal/blackmagic emails would be fine 📨). NOTE: ON PRODUCTION ENVIRONMENT THESE EMAIL ADDRESSES WILL BE REPLACED WITH THE ONES OF THE CLIENT:

Template customization:

The email layout is ready to be customized through the CMS, THIS IS NOT MANDATORY but it would be more magical if you use it like this 🦯🎩✨

Fields

The template can have these custom elements:

• Logo
• Header background
• Body background
• Footer background

So we will need to create a field for each of them. So, go to /admin/settings/fields and create a new group of fields, I recommend to name it "Email layout" but you can use the name you prefer. Inside that group we will create these fields:

Field Name	Handle	Type
Logo	logo	asset
Header Background Color	headerBgColor	color
Body Background Color	bodyBgColor	color
Footer Background Color	footerBgColor	color

NOTE: In the Logo field description be sure to request an image in PNG/JPG format.

Globals

• Go to /admin/settings/globals, click on New global set and create a global called Email Layout, be sure the handle is emailLayout.
• Drag and drop all the fields you created previously to the global.
• Click Save.

• Go to /admin/globals/default/emailLayout to customize your email basic elements.

Form submission

Whenever your FreeForm is submitted, the customized template will be sent:

NOTE: If you test your form in your local environment, you will see a broken logo. Don´t worry, it will work fine when you deploy to a higher environment 🚀

---

MAKING THE INTERNET A HAPPIER PLACE 💫