1. Home
  2. Postcards
  3. Integrations
  4. How to Upload an Email Template in Constant Contact

How to Upload an Email Template in Constant Contact

In this tutorial, we’ll be creating a custom email template in Constant Contact using the code from a Postcards email template.


  • A Designmodo account
  • A Constant Contact account
  • A text editor that can open HTML files

Video Version


1. Create and export a Postcards template

The main thing we need is a Postcards template for the HTML code.

In the Postcards app, create a template. Mine looks like this:

How to Upload an Email Template in Constant Contact

Next, we want to export this and use the HTML code that’s generated.

In the top right corner of the app, press “Export” and press “Download as zip”

There will be an option called “Host images online.” Make sure this option is checked. Your screen should look like this:

Create and export a Postcards template

Press “Download Zip” and extract the file into a folder. My folder looks like this:

Download Zip

If you open this file in your browser, you should see the Postcards template you just created.

Now, we have the code we need to add to our Constant Contact email template.

2. Create an email with custom code in Constant Contact

There are multiple ways to create a custom email template in Constant Contact. You could go to the dashboard where you’ll see an option to “Create an Email” like this:

Create an email with custom code in Constant Contact

Or you can go to the Campaigns page and click the “Create” button in the top right corner:

Campaigns page

And then press the “Email” option in the modal that opens:


Both options will take you to the Template Selection page that looks like this:

Template Selection

Press the “Custom Code” option in the top right and that’ll take you to the Constant Contact code editor page:

Custom Code

3. Copy the Postcards template code into the Constant Contact editor

Open the index.html file you downloaded from Postcards in a text editor. I’m using Visual Studio Code so my screen looks like:

Copy the Postcards template code into the Constant Contact editor

Copy and paste all the code in this file into the Constant Contact editor replacing everything that was already there.

Your screen should look like:

Constant Contact editor

If you select the “Live Preview” option in the top right corner of the editor, you’ll see a preview of the email we added in code:

Live Preview

If you see this, then great! We have most of what we need to be done.

4. Add personalization to your email

For great emails, adding personalization to your emails can help a ton. Personalization means adding things like names, companies, or any other kind of detail about your subscriber.

But we can’t hard code every name in an email so we rely on code and tags to do that for us.

A tag inserted into an email is replaced with the recipient’s information when the email gets sent.

In Constant Contact, it’s easy to insert tags in your email.

In the top left corner of the editor, there’s a drop-down menu for insertion options:

Add personalization to your email

If you select the “Personalization” option a modal with options will appear:


Here, you’ll find options for types of personalization tags you can enter like First name, Company, Address, and others.

You can also add a fallback text if that detail isn’t available.

For this example, let’s use the First name tag with a fallback of “Subscriber.”

If you press the Insert button, it’ll insert the tag wherever your cursor is located or at the bottom of the editor:


Copy this tag and then delete it if it was inserted where you don’t want it to be.

To find the part of the template where you want to add the tag, you can search for the text in the template. If you want to add the first name to the title section, copy the title and then search for it. If you can’t find the text, try searching for a shorter part of the text.

Insert the tag

If the search isn’t working for you then scroll through the code until you find the text.

Next, insert the tag where you want it to be added:

Update the email header

The tag will change to the recipient’s data when the email is sent or to the fallback value.

5. Update the email header

To update the subject, from name, and email options, click the email preview image at the top of the page:

Update the subject

That’ll open a modal where you can customize more options:

Open a modal

When you’re done editing the email, press continue in the top right corner of the editing page.

You can also allow Constant Contact to fix your errors if you have any.

After you press continue, you’ll reach this page:

Update the email footer

If you press the preview image, the preview modal will appear. At the bottom of the preview, you’ll see that there’s a footer that contains Constant Contact’s logo and other information.

Constant Contact

If you’re looking to remove this footer, that isn’t possible.

According to Constant Contact’s knowledge base article:

“Constant Contact does not offer a way to completely eliminate, obscure, or “white-label” references to Constant Contact in your campaigns. However, paying customers can request to have the Constant Contact logo removed from their emails.

To do this, please contact a support representative for assistance. There is no fee to remove the logo. If you want to add your logo to the email footer in place of the Constant Contact logo, there will be a customization charge.”

You can edit some fields and values in the footer though according to this article.

At this point, your email is ready to use in your campaigns!

You can send yourself a test email to see how it looks through the preview options.

I sent myself a test email and this is how it looks:

Test email

What we covered

  1. How to export a Postcards template.
  2. How to create an email template in Constant Contact with custom code.
  3. How to insert the Postcards HTML code in the Constant Contact code editor.
  4. How to insert personalization tags in the email.
  5. How to update the footer.
Updated on March 11, 2020

Was this article helpful?

Related Articles