Language
Email and Digital Marketing
How can we help you?
Search our help articles, video tutorials, and quickstart guides

You've got this. You've got us. Search our Knowledge Base to quickly find answers to your questions.

Build an email with HTML in the Custom Code editor

Article: 000034400
Updated: June 23, 2026

Use your own HTML code to create and send an email

Exclamation Point IconImportant: This article requires you to use HTML code. 

 



We have tons of professionally designed templates available in our drag-and-drop email editor, but if you have your own email design, you can use HTML in our Custom Code editor to create an email.

 

Guidelines for designing custom code emails

When creating your HTML, here are some things to keep in mind:

  • Opens and link tracking are automatic. A tracking pixel is added to your email code by default when it's sent to track opens.
    Exclamation point iconImportant: Even though your email includes a Tracking Pixel, there are a few instances when email opens aren’t trackable.
  • External style sheets aren’t supported.
  • Styles can be added to the code at the top of the email and are automatically inlined when the email is sent, or you can use inline styles.
  • iFrames and form code are supported, but are often stripped out by email clients.
  • Non-standard HTML tags generated by proprietary software, like Microsoft Publisher or FrontPage, won't display correctly in many browsers and email clients:
  • <v:shape>
  • <o:column>
  • <b: Xl>
  • ![endif]
  • JavaScript will likely not display because most email clients disable it for security reasons.
  • We discourage the use of image mapping (adding multiple links to a single image) for the following reasons:
  • Using image mapping breaks our link-tracking functionality, so any clicks on these links won't show up in your Clicks report.
  • Using image maps is an outdated practice, and many versions of Outlook and other email clients do not render them correctly.
  • Image maps aren't mobile-responsive. Image mapping specifies the "clickable spot" in your email using exact coordinates, but the elements of your email can shift so the email displays properly when viewed on a mobile device. As a result, the coordinates you mapped may not stay in the spot you intended.

 

Create a custom code email

  1. Click Channels > Emails.
  2. Click the + Create an email button.

    Email dashboard with Marketing menu expanded and Email option selected, and Create an email button
     
  3. Select the Paste your own code or Paste HTML code option.

    Choose a template page with All templates tab selted and Build with HTML option selcted, and Select buttonEmail template picker with Paste HTML Code option

     
  4. Click anywhere on the email name to rename it.
  5. Enter a unique name that you can easily recognize in your account later. Your contacts won’t see this name—they only see your subject line.
  6. Click the Save button.

    Custom Code editor with Rename overlay, Campaign Name field, and Save button
     

 

Customize the email header

Light Bulb IconDid you know? Per the CAN-SPAM Act, a footer including your physical address is always added to the bottom of your email. You can change the physical address that appears in the footer when you schedule and send your email.

 

  1. Click Email settings to edit the email header.

    Custom Code editor with Email Settings option
     
  2. (Optional) If you want to use a preheader with your subject line, add the following code after the <body> tag in your HTML, and update the placeholder "Preheader Text":

    <div id="preheader" style="display: none; font-size: 1px; color: transparent; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> Preheader Text</div>

    Custom code editor with preheader code
     

 

Add your code to the email

Light Bulb IconDesign tip: To achieve the best results in the most email clients, design your code for an email, not for a webpage.

 

  1. Type or paste your HTML code between the <body> tags.

    Custom Code editor with body tags in HTML code

  2. (Optional) Click the Live Preview toggle to see how your HTML code renders. You can turn this on and off as you edit.
  3. Use the Insert drop-down to easily add one of the following elements wherever your cursor is located within the code:
  • Add an image from your Library, including logos and animated GIFs.
  • Add a video from your Vimeo account.
  • Add contact details to personalize your content for each recipient.
  • Add a "View as Webpage" link so your contacts can view the full version of your email if their email client disables images.

    Custom Code editor with Live Preview toggle and Insert drop-down menu expanded with Images, Video, Personalization, and View as Webpage options
     
Light Bulb IconDid you know? Span id tags with the value of a social platform, such as Facebook or LinkedIn, will convert the text into a link that allows recipients to share your email on their social media profiles. For example: <span id="Facebook"> Share on Facebook</span>

 

 

Update the background image in your email

To update the background image in your HTML email template, you can add the following code to the <BODY> tag. 

style="background-image: url('IMAGE-URL');"

Replace IMAGE-URL with the link to your image. By default, if your image is smaller than your email, it will repeat horizontally and vertically until it fills the entire background of your email. To avoid this, save your image at a larger size or add the "background-repeat: no-repeat" property to your HTML. 

style="background-image: url('IMAGE-URL'); background-repeat: no-repeat;"

Now that your image will appear only once, you can ensure it enlarges to span the full width of your email with the "background-size" property, "cover." 

style="background-image: url('IMAGE-URL'); background-repeat: no-repeat; background-size: cover;"

This is what the code looks like when added to the BODY element in your email. 

custom code editor with background image code added to the html


The Live Preview may not display the background image, but you can see the image when you "Check & Preview" it. The image will not cover the footer of your email without additional code. For help with code and design, consider consulting our Professional Services team.

 

Exclamation Point IconImportant: We recommend previewing your email and sending a test version before sending it to your contacts so you can see exactly how it will appear to your recipients.

 

 

Check your code for errors

Our Custom Code editor automatically looks for errors in your code that could prevent your email from sending or from displaying the way you intended. As you work, visual indicators notify you. Each error is highlighted in the code to draw your attention, or you can see a detailed list of errors and suggestions to correct them by clicking the error banner at the top of the email editor.

  1. Click the warning message to see detailed information about the issues found in your HTML code. You can correct the errors yourself, or, depending on the error, you can click the Fix errors for me button. 
    Note: Code with errors is either updated or removed, so check your work carefully, as there is no "undo" option!

    Custom Code email with error banner and Fix errors for me button, and code with several errors highlighted
     
  2. (Optional) Click Check & Preview > Preview to see a preview of your email and send a test version.
  3. Once you’re ready to schedule and send your email to your contacts, click the Continue button.

    Custom code editor with Check and Preview dropdown and Preview option, and Continue button
     

Once the email is scheduled, you can share it on your social media pages to extend its reach. Give your contacts some time to open the email, and then check the results in your reporting to see how it performed.

 

Questions?

Ask the Community

Did this article answer your question?

Yes
Partially
No

Related Answers

Constant Contact Logo

Copyright © 2026 · All Rights Reserved · Constant Contact · Privacy Center