Ontraport’s drag-and-drop page editor makes creating beautiful interactive web apps easy. However, there’s a limit to what’s possible to build using that editor. That’s why we created dynamic list HTML tags.

Ontraport’s dynamic list HTML tags help you create sophisticated designs without some of the limits of the visual builder.

For example, you can create a sidebar of related articles or an image gallery. Anything you dream up is possible if you have access to someone with web development skills.

The dynamic list HTML tag is an advanced feature and is meant for users who are comfortable using CSS and HTML to create the design they want. Watch our lesson on Dynamic lists with HTML here to learn more!

Note that the Ontraport Support team cannot troubleshoot your custom code.

Only available to some Dynamic CMS plans.

• Check out the “Dynamic CMS add-ons” chart on our pricing page for information about each plan level.

Add a dynamic content package to your account to use this feature. Here’s how:

1. Click here to go to your account details page.
2. Click Add plan or Start trial next to “Add Dynamic CMS to your account” and select your plan.

Table of contents

New to HTML? Start here
• HTML elements
• HTML attributes
• HTML paragraphs
• HTML styles
• HTML formatting
How it works
Customize your dynamic list with HTML attributes
• Using AND and OR operators
• Using merge fields in attributes
Field names with apostrophes
Use cases

New to HTML? Start here

If you are new to HTML, there are a few concepts to learn before you dive into Dynamic Lists HTML. Below you’ll find the most important HTML elements you should feel comfortable using before diving into Dynamic Lists HTML.

This basics section is not a comprehensive HTML course — it’s just a starting point. You can add any HTML or CSS you’re comfortable formatting and troubleshooting to your dynamic lists.

If you prefer, you can hire a Certified Expert to create your Dynamic List using HTML.

HTML elements

Back to top

The main HTML element that you use for Dynamic list HTML is your dynamic list element:

<DynamicList></DynamicList>

Check out this W3School lesson on HTML Elements to learn more.

HTML attributes

Back to top

You customize the information you want to display on your dynamic list using HTML attributes.
You can do this with HTML attributes specific to dynamic content. Click here to learn more.

Attributes generally come in name and value pairs, such as "source=Contacts."

Check out this W3School lesson on attributes to learn more.

HTML paragraphs

Back to top

Paragraph formatting will help you customize how your data will display in your dynamic list. For example, if you’d like to display contact data formatted like this:

John Doe

johnd@example.com

(888) 321-7654

You’d use paragraph tags to separate each line you want to display. Like this:

<p>[First Name] [Last Name]</p>

<p>[Email]</p>

<p>[SMS Number]</p>

Check out this W3School lesson on paragraph tags to learn more.

HTML styles

Back to top

Styling options will help you customize the color, font, size etc. of your dynamic list. For example, if you want your headline text color to be red, you’ll use a styling tag:

<p style="color:red;">[Headline]</p>

Check out this W3School lesson on HTML styles to learn more.

HTML formatting

Back to top

Formatting options help you customize your text, such as making your content bold or italicized.

<p><i>[Headline]</i></p>

Check out this W3School lesson on HTML formatting elements to learn more.

How it works

Back to top

The dynamic list HTML tag — <DynamicList></DynamicList> — added to a custom code element allows you to create dynamic lists.

Put simply, dynamic lists work just like dynamic blocks; the only difference is that you create them with HTML and CSS. With dynamic lists, you’ll design a list the way you want it to look, and all of the content inside of your dynamic list tag will be repeated with data from each record.

First, you choose a source for your dynamic list. This source can be any of the objects in your account, a dynamic page or block object.

Then, the system will repeat whatever code you put between the dynamic list tag, using the data from a new record each time.

If you want to create a list of Contacts, your Dynamic List HTML would look like this:

<DynamicList source="Contacts"><p>[First Name] [Last Name]</p></DynamicList>

Create dynamic lists based on the records saved in any of the objects found in your Objects collection.

For example, the code below will create a list of links to your blog posts:

Add any custom code you want between your dynamic list tags. Whatever code you place in there will be repeated on your list.

By default, any merge fields used in a dynamic list will come from the Contacts object. That means if the source of your dynamic list is a custom object, and the name of a field in your custom object matches a Contact field, your list will pull in Contact information.

If this happens to you, add “List//” before your field name. For example, if your custom object includes a “First Name” field, your merge field should look like this, “[List//First Name].”

Customize your dynamic list with HTML attributes

Back to top

Customize your dynamic list element by adding any of the following attributes to your dynamic list HTML tag.

You can add more than one of these modifiers to ensure that your HTML dynamic list tag renders a list that fits your needs.

source

This is the only required attribute

numRecords

sortBy

sortOrder

startOn

includeIf_tags_contains

includeIf_tags_does_not_contain

includeIf_field_equals

includeIf_field_does_not_equal

includeIf_field_contains

includeIf_field_does_not_contain

Relationship attributes

The following attributes are based on relationships between objects.

• Check out this Ontraport University lesson to learn more about the three relationship types.

Add your relationship ID or relationship name to tell your system which relationship you want to use in your HTML attribute.

Follow these steps to find a relationship name and ID:

1. Go to your Custom Objects collection.
2. Click on your object’s name → Manage Relationships.
3. Add the “ID” column to your subcollection to view the IDs of your relationships.
   • Add the “Name” column to your subcollection to view your relationship names.

includeIf_is_related

For relationships between the page’s visitor and dynamic block records

Includeif_is_not_related

For relationships between the page’s source and dynamic block records

For relationships between the page’s visitor and dynamic block records

Using AND and OR operators

Back to top

You can use boolean operators “and” and “or” to segment your list further for several of the HTML attributes described above.

The examples below show two conditions together, but you can use as many as you like.

Using the AND operator

Using the OR operator

Using merge fields in attributes

Back to top

When you add merge fields to your dynamic list HTML, it’s always best to use the merge field dropdown rather than manually typing them. The dropdown ensures that your merge fields are correctly formatted. However, since you are creating your dynamic lists using HTML, sometimes you may need to tweak your merge field’s formatting.

Say you use dynamic list HTML to create a list of contact information on a regular Ontraport Page. You’ll only have access to visiting contact merge fields, which look like this: [Visitor//First Name].

If your dynamic list’s source is “Contacts,” you can remove “Visitor//” from your merge field, like this [First Name].

Below you’ll learn how to format merge fields for different sources.

Using Page/Block/Visitor merge fields

You’ll use merge fields to display specific information from your records, and you can also use them in the attributes of your dynamic list HTML.

When you add merge fields to your dynamic content using the drag-and-drop editor, you can choose between merge fields for:

• Visiting contacts
• Your dynamic block’s source
• Your dynamic page’s source

You can use these same merge fields in your dynamic list HTML.

For example, if you have a blog and want to create a sidebar with “related posts” from the same category as the post you’re looking at, you could use:

<DynamicList source="Blog Posts" includeIf_field_equals="'Category'='[Page//Category]'">
<p><a href="[Blog Post URL]">[Blog post title]</a></p>
</DynamicList>

You can use all merge field types:

[Page//FIELD_NAME] — page source fields

[Block//FIELD_NAME] — block source fields

[Visitor//FIELD_NAME] — Visiting contact’s fields

Using merge fields from parent relationships

Sometimes you’ll want to automatically segment your list of child records based on a field in the parent’s record. You can do that by “drilling in” to the parent’s fields and adding a merge field from the parent’s record.

Say you’ve linked your Pets object to your Contacts object so you can see which contacts own which pets. And you’d like to create a page based on your contact’s information and show all the pets owned by that contact.

To do that, you’ll want to include only pets that have the same “Pet owner” as the page you’re on. In this example, we’re using the pet owner’s email field:

<DynamicList source="Contacts" includeIf_field_equals="'Pet owner//Email'='[Page//Email]'">
<p>[Pet Name]</p>
<p><img src="[Pet Picture]" width="500" height="600"/></p>
</DynamicList>

Field names with apostrophes

Back to top

Including a field name in your dynamic list attributes that contains an apostrophe will break the dynamic list tags. You can fix that by replacing the apostrophe with our custom HTML entity — &mrqt;.

Say you have a field called “User’s Info.” The apostrophe in the field’s name will break your dynamic list HTML if you don’t replace it with &mrqt;.

<DynamicList source="Contacts" includeIf_field_contains="'User's Info'='awesome'"><p>[Contact ID]</p></DynamicList>

becomes this:

<DynamicList source="Contacts" includeIf_field_contains="'User&mrqt;s Info'='awesome'"><p>[Contact ID]</p></DynamicList>

Use cases

Back to top

Here’s an example of the type of dynamic lists you can create using the dynamic list HTML tag.

Related blog posts sidebar

If you want to add a navigation sidebar to your blog post article, the first step is to create a space in your page’s layout where you want to add your dynamic list. In the example below, the body copy is contained in one column, and the block includes two empty columns, one on either side.

Once you’ve identified where you want your dynamic list to go, click and drag the element to that location. For this example, we add the dynamic list to the right side of the blog article.

Click on your custom code element and click Edit Code. Then replace the default code with your dynamic list tag.

<DynamicList source="Blog Posts">
<p><a href="[URL]">[Page Name]</a></p>
<p><img src="[Page//Link image ##link]" alt="[Page//Link image alt text]" width="100%"/></p></DynamicList>