How to Upload an Email Template in Mailgun

In this tutorial, we’ll be creating an email template in Postcards and using the code from that template to create a custom email template in Mailgun.

Prerequisites

• A Designmodo account
• A Mailgun account.
• A text editor that can open HTML files.

Steps

1. Create a template with Mailgun template variables

The first step is to create a Postcards template that includes Mailgun variables.

We’re adding Mailgun template variables at this stage so we don’t have to modify the code later. Instead, we can use the Postcards interface to manage them, which makes the process much easier.

Mailgun template variables allow you to add dynamic content to your emails, enabling personalization so that each recipient receives a slightly customized version.

In this example, we’ll use the recipient’s first name and the unsubscribe URL. They look like this:

%recipient_fname%

%unsubscribe_url%

In the Postcards app, I’ve created a template using Header and Footer. It looks like this:

Next, we’ll add the first name variable to the Header area.

Click the Header, and that’ll open up the menu to edit the content. Then find the "TEXT" element.

In the text editor, change the text to add the first name variable, like:

Wait a few seconds for auto-save.

Next, scroll to the Footer and click it, then select the element that will be used as the Unsubscribe part.

Change the text to “Unsubscribe” and add the unsubscribe URL variable to the URL input.

Now we have to export this file.

Once your design is ready, the next step is to export the HTML from Postcards so you can import it into Mailgun. Postcards give you two ways to do this through the Export menu:

• Copy Email Code — this is the quickest option. It copies clean, production-ready HTML directly to your clipboard, so you can paste it right away into Mailgun:
  • Click Export in the top-right corner.
  • Select Copy Email Code.
  • The full HTML will be copied automatically to your clipboard.

• Download as ZIP — this downloads the full HTML package of your email, including the index.html file. Make sure "Host images/fonts online" is enabled before downloading, unless you plan to use your own hosted image and font files.
  • Click Export in the top-right corner and select Download as ZIP.

• Click the "Download as ZIP" button.

• Open the ZIP and extract the contents into a folder.

• Inside the extracted folder, locate the index.html file.
• Open index.html in a text editor such as Notepad, Notepad++, or Visual Studio Code.
• Copy the full HTML code from that file. (CTRL + A - to select all, then, CTRL + C - to copy)

Extract the file into a folder you can work with. It should look something like this:

Now we have everything we need to create a custom email template in Mailgun.

2. Create an email template in Mailgun

In your Mailgun dashboard, under Send → Sending, select Templates.

Under the “Create Template" option, you will have two additional options in the drop-down menu:

In this example, we will use the first option, "Account level".

In the modal that appears, select “Blank" and click "Create template."

That’ll open the Mailgun email editor page with name, description, and editor inputs. Enter your name and description, and then click "Create and start designing".

After this, you will be redirected to Mailgun Editor.

Drag and drop the "HTML Block" and follow its instructions.

Now, copy the HTML code from the Postcards template and paste it into the Mailgun Editor.

Your screen should look something like:

You can click the 'Preview' tab to see how your email will look. Once you're happy with the template, click 'Save & Close'.

Your screen should look like:

At this point, your template is ready to go! You can send yourself a test email using the Mailgun API to see if it’s working as intended.

I sent myself a test email to my Gmail, and this is what it looks like:

You may notice that the recipient’s first name isn’t showing. This is because this is sent to a test sandbox and not to a mailing list, so there is no first name value. But the unsubscribe URL variable works and takes the user to an actual unsubscribe page.

What we covered

1. How to create a Postcards template.
2. How to add Mailgun variables to a Postcards template.
3. How to export a Postcards template.
4. How to create a custom email template in Mailgun.
5. How to add the Postcards template code to a Mailgun email template.