Legacy ONTRApages Custom HTML Block

About the Custom HTML Block

Note: This article covers our legacy ONTRApages builder. For details on our newest Page builder, see this article.

Applies to: All ONTRAPORT accounts.

The Custom HTML Block allows you to add raw HTML code into the body of your ONTRApage, further expanding the page's capabilities. Possible uses include adding a tabbed content block, inserting your appointment calendar, using a legacy Smart Form, adding in JavaScript snippets, and code to connect to your custom coded, external application.

Prerequisites

An ONTRApages Premium or ONTRAPORT account (all levels)

The Custom HTML block is not available in ONTRApages Free accounts

Custom HTML Block Basics

This block is intended for advanced users and coders only. It provides the ability to add raw HTML code to ONTRApages. ONTRAPORT can not support or troubleshoot your custom code.

NOTE: Adding the Custom HTML Block with coding errors to an existing, published page can cause the entire page to exhibit defects, such as lack of mobile responsiveness, or completely fail to display. Please use caution and consult with a qualified HTML programmer if you need assistance.

To add the block, select it from the palette in the Add Block screen.
The Custom HTML Block loads with the HTML sample code displayed in WYSIWYG mode. Click the Edit Code button at the top left of the canvas to see the code.
Delete the sample code and type or paste your code into the Edit Code screen. Click the Preview Code button to revert to WYSIWYG mode.

Note that the PreviewCode view does not enable all functions such as animations and JavaScript / jQuery actions in your code. Publish the page to test all the functionality on a live webpage.

Custom HTML Block Editor

The code editor uses simple editing commands with some syntax highlighting. It does not include an integrated development environment (IDE), macros or other advanced features. The code validates as HTML and HTML5 is supported.

Editor Command Keys

Command	PC	Mac
Select All	Ctrl-A	Cmd-A
Delete Line	Ctrl-D	Cmd-D
Undo	Ctrl-Z	Cmd-Z
Redo	Ctrl-Y	Shift-Cmd-Z
Go to Doc Start	Ctrl-Home	Cmd-Up
Go to Doc End	Ctrl-End	Cmd-End
Go to Line Start	Alt-Left	Ctrl-A
Go to Line End	Alt-Right	Ctrl-E
Page Up	Page Up	Shift-Ctrl-V
Page Down	Page Down	Ctrl-V
Tab	Tab	Tab
Indent Auto	Shift-Tab	Shift-Tab
Indent More	Ctrl-]	Cmd-]
Indent Less	Ctrl-[	Cmd-[
Transpose Characters		Ctrl-T
New Line and Indent	Enter	Enter
Toggle Overwrite	Insert	Insert
Save	Ctrl-S	Cmd-S
Find	Ctrl-F	Cmd-F
Find Next	Ctrl-G	Cmd-G
Find Previous	Shift-Ctrl-G	Shift-Cmd-G
Replace	Shift-Ctrl-F	Shift-Alt-F
Replace All	Shift-Ctrl-R	Shift-Cmd-Alt-F

The code is inserted into the body section of the page. You can include style elements, JavaScript and HTML. All HTML5 new elements are supported.

If present, <html> and <head> sections are stripped from the code when saved. For <head> element entries, such as meta description, page title, and favicon see the Settings tab of the ONTRApage. Use the Custom header code section on the Settings tab for meta tags, JavaScript you want to appear in the <head> section, etc.

The code will inherit the ONTRApage Page Styles unless you specifically overwrite them. The ONTRAPORT Page Style classes that are inherited are:

h1
h2
h3
label
button
large-body-text
body-text
blockquote

Recovering from Errors

You can toggle visibility of the Custom HTML Block in the palette by hovering over it and sliding the toggle. It will turn red. Save the page and visit or refresh the published page to verify the code is no longer rendered on the page.

Toggle visibility of block

The Custom HTML block is intended for advanced users and coders only, and no support is provided for it. If you need assistance with custom coding we suggest you contact one of our Certified Consultants or a qualified HTML programmer.

Use Case - Use A Link or Button to Jump to Another Block

Add a Custom HTML Block to the template, then move it to just above the block you want to "jump to".
Delete all the code in the Custom HTML Block and add this code:

<div id="here"></div>
Publish the ONTRApage and copy the URL to the clipboard.
Edit the button or link and paste in the page's published URL. Add #here to the end of the URL. This tells the button or link that a click should send the browser to that Custom HTML Block with id="here".

Jump to this block

The button click will now jump to the Custom HTML Block. Because it has no real content to display, it collapses gracefully and the block immediately below it is in view. You can have multiple buttons or links jump to that Custom HTML Block using this technique.

You can duplicate this with as many Custom HTML Blocks as desired as long as you use a unique name for the id= portion of the code.

Use Case - Tabbed Content Area Using CSS

This use case uses code from Andor Nagy to demonstrate adapting code for the Custom HTML Block. The full customized code is found in the attached file named andor-nagy-create-pure-css-tabs.txt.

Tabbed interface in Custom HTML Block

Rules for Adapting Code:

Remove <head> information from the code (if any) and include it in the proper sections on the Settings tab.
You can include JavaScript in the Custom HTML Block.
You can include style declarations at the top of the Custom HTML Block enclosed in <style> ... </style> tags.
Remember the Preview Code view will not enable all interactive features of the code within the ONTRApages editor. View the published page to test.

Use Case - Embedding an Appointment Calendar

This use case involves embedding a booking calendar's iframe code. Iframes are commonly used for calendars, maps, and other interactive apps from third party publishers. Using the iframe code is very simple.

Paste the iframe code into the Custom HTML Block.
Add any padding or positioning HTML elements as needed.
Publish and test the page.

Most iframe code will work as copied. Things to remember when using iframes:

The Preview Code button provides a preview of static HTML but not all features can work within the ONTRApages editor, and the iframe may not render completely.
Publish the page to test the inserted application's functionality before assuming there's a problem with the code.
Iframes will not automatically inherit the ONTRApage style and will need to be configured in the native application to match the page's fonts, colors and layout.

Other Coding Resources

Coding Questions? Ask the community in ONTRAPORT Q&A
ONTRAPORT Certified Consultants

FAQs

Q. Support tells me you can't help me create a Facebook clone for my ONTRApage Custom html block. Zuckerberg was still a student when he did it so it can't be that hard.

A. We don't support custom coding at all, even for simple applications. We recommend you contact a qualified HTML programmer to create your application.

Q. My fonts in my Custom html block don't match the rest on the page. What's up?

A. The Custom html block should inherit the Page Style settings for the following classes: h1, h2, h3, label, button, large-body-text, body-text and blockquote. If you have used a local style declaration for any of these classes it may override the Page Style settings. If you have inserted iframe code you will have to edit the source application to match the Page Style settings.

Q. I copied some code into the Custom html block and it works, but the comments in the code are showing through. What's up with that?

A. Remember to use the appropriate comment tags for the section of the code you are inserting. It is common to find code examples on the Internet that do not have comments coded correctly. Use the appropriate comment tags for HTML, CSS and JavaScript in the Custom html block.

Q. I inserted code into the Custom HTML block and now my page isn't responsive. What gives?

A. ONTRApages are mobile responsive. Adding an HTML block that isn't responsive can cause the entire page to become unresponsive.

Q. Are there Custom HTML Blocks for ONTRAforms and ONTRAmail too?

A. Custom HTML blocks are available on ONTRAforms, but not ONTRAmail.

Q. Can I use Custom HTML Blocks for Google's Conversion Tracking?

A. Yes you can. Google's conversion code needs to be in the body of a page, not the footer. HTML blocks will show the code in the body which will help you optimize your ad words.

Q. Why can't I share my page with a Custom HTML Block via the Marketplace?

A. For security reasons we have disabled sharing for pages and forms that contain Custom HTML Blocks.

Q. I tried using your code example for tabbed content, and then edited it to include 12 extra tabs with all my cat's names, and now it doesn't display. It's your code, fix it or I'll whine on the Internet.

A. We don't support custom coding, and cannot assist you even with modifications of code samples we have provided. The Custom HTML block is intended for developers and programmers, and therefore is an official no whining zone.

Other Resources

ONTRApages Basics:

Selling Products and Leveraging Upsell Opportunities

Publishing Your ONTRApages

Publishing Your ONTRApages

Frank Hagan

Contents

Other Resources

Articles in this section

Comments