Resolve common HTML issues in custom email templates

Custom email templates require beginner-level HTML knowledge. If you want, you can start by using the HTML from a sample email and modify it as needed.

For example, you can copy the contents of the Participant Account Created email template and modify it. The template looks like this:
#PARTICIPANT_FULL_NAME#,
<br>
<br>
You are receiving this message because you have agreed to participate in the COVID-19 Community Research Partnership study with #ORGANIZATION_NAME#.
<br>
<br>
#HIPAA_NOTICE#
<br>
<br>
Click Get Started to confirm your information and answer a few questions about how you're feeling today.
<br>
<br>
Thank you for participating in this vital effort. Your experience will help the medical community understand more about COVID-19 preventative measures and precautions.
<br>
<br>
If you have questions about this research study, you can call #SUPPORT_PHONE# or email #SUPPORT_EMAIL#.

See the following table for tips on how to resolve common HTML issues in your custom email.

Issue Solution

I need to insert a line break or two for readability

Insert a line break using the following tag: <br>

For instance:

This is line 1.
<br>
This is line 2.

The formatting is extending beyond where I expect

In HTML, every tag has a opening tag, such as <b>, and a closing tag, such as </b>. If you include an opening tag but not a closing tag, your formatting won't look the way you expect.

If you're having trouble remembering to close your tags, you might want to download a free text editor, such as Notepad++, that helps you work with HTML code. For example, when you select an opening tag in Notepad++, the closing tag is also selected, so you can quickly check for missing closing tags as you work.

My headings are formatted incorrectly

The following heading tags meet most organizations' needs:

  • <h1>Heading 1</h1>: The first-level heading
  • <h2>Heading 2</h2>: The second-level heading
  • <h3>Heading 3</h3>: The third-level heading
  • <h4>Heading 4</h4>: The fourth-level heading

Heading 1 is typically the largest-sized text, and each subsequent heading level is smaller in size.

I need to bold or italicize some text

Here are some common formatting tags for bold and italicized text:

  • <b>Bold</b>: Text that appears bold.
  • <strong>Strong</strong>: Text that typically appears bold and is semantically labeled as stronger than its surrounding text (useful for screen readers).
  • <i>Italics</i>: Text that appears italicized.
  • <em>Emphasis</em>: Text that typically appears italicized and is semantically labeled as more emphasized than its surrounding text (useful for screen readers).

I need to insert a bulleted list

The <ul> tag inserts an unordered list, and the <li> tag represents an entry in the list. For example:

<h2>Here is my heading for this section</h2>
<ul>
    <li>First entry in the list.</li>
    <li>Second entry in the list.</li>
</ul>

You can also nest your lists. For instance:

<h2>Here is my heading for this section</h2>
<ul>
    <li>First entry in the first-level list.</li>
        <ul>
            <li>First entry in the second-level list.</li>
            <li>Second entry in the second-level list.</li> 
        </ul>                                                            
    <li>Second entry in the first-level list.</li>
</ul>

I need to insert a numbered list

You create a numbered list the same way you create a bulleted list, just with a different tag: <ol> instead of <ul>. For example:

<h2>Here is my heading for this section</h2>
<ol>
    <li>First entry in the list.</li>
    <li>Second entry in the list.</li>
</ol>

You can also nest your lists, and combine different list types. For instance, in the following example, the first-level list is numbered, and the second-level list is bulleted:

<h2>Here is my heading for this section</h2>
<ol>
    <li>First entry in the first-level list.</li>
        <ul>
            <li>First entry in the second-level list.</li>
            <li>Second entry in the second-level list.</li> 
        </ul>                                                            
    <li>Second entry in the first-level list.</li>
</ol>

I need to insert a link to a web page

You don't need to be able to code a link using HTML. Instead, you can use the following markup shortcuts. Replace the italicized text with the appropriate text for the link and URL. The text in brackets appears to in the email, and the text in parentheses is the link.

[visit our website](https://www.example.com)

For example:

If you want to learn more, [visit our website](https://www.example.com).

I need to insert a link to an email address

Replace the italicized text in the following example with the appropriate email address and text that appears for the email link. The text in brackets appears to in the email, and the text in parentheses is the email address.

[Email us](mailto:help@example.com)

For example:

If you need help, [Email us](mailto:help@example.com).

I need to insert a link to a phone number

Replace the italicized text in the following example with the appropriate phone number and text that appears for the phone number. The text in brackets appears to in the email, and the text in parentheses is the telephone number.

[Call us at +1.888.555.1212](tel:888-555-1212)

For example:

If you need help, [Call us at +1.888.555.1212](tel:888-555-1212).

I need help inserting placeholder text

Replace the italicized text in the following example with the appropriate introductory text. The text in brackets appears to in the email, and the text in parentheses is the contact information.

[Call us at #SUPPORT_PHONE#](tel:#SUPPORT_PHONE#)

For example:

If you need help, [Call us at #SUPPORT_PHONE#](tel:#SUPPORT_PHONE#).