Custom HTML Element
The Custom HTML Element allows you to add raw HTML code into any element of your ONTRAPORT Pages, further expanding the page's capabilities. Possible uses include inserting your appointment calendar, using a legacy Smart Form, adding in JavaScript snippets, and code to connect to your custom coded, external application.
This Element is intended for advanced users and coders only. It provides the ability to add raw HTML code to Pages. ONTRAPORT can not support or troubleshoot your custom code.
NOTE: Adding the Custom HTML Element 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.
You can include style elements, JavaScript and HTML. All HTML5 new elements are supported.
Add a Custom HTML Element
- Add a custom HTML Element by dragging it into the desired column.
- Click the Edit Code button that is the right of the Element Editor
- 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.
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.
Insert an ONTRAform in a Custom HTML Element
Occasionally a usecase arises where an ONTRAform needs to be inserted on a Page.
- Publish the ONTRAform and copy the form code.
- Add a custom HTML element by dragging it into the desired column.
- Click the Edit Code button that is the right of the Element Editor
- Delete the sample code and paste your form code into the Edit Code screen.
- Click Done.
If you'd like to center the form in the column, you can add <center> in the beginning of the code and </center> at the end.
Important Details
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.
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 Page. Use the Custom Code section on the Settings tab for meta tags, JavaScript you want to appear in the <head> <body> or <footer> section.
The code will inherit the 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
Use Cases and FAQs
This use case uses code from Andor Nagy to demonstrate adapting code for the Custom HTML Element. The full customized code is found in the attached file named andor-nagy-create-pure-css-tabs.txt. Rules for Adapting Code: 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. Most iframe code will work as copied. Things to remember when using iframes: Q. Support tells me you can't help me create a Facebook clone for my ONTRApage Custom html Element. Zuckerberg was still a student when he did it so it can't be that hard. A. The Custom html Element 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 element 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 element. A. Pages are mobile responsive. Adding an HTML Element that isn't responsive can cause the entire page to become unresponsive. A. Custom HTML Elements are available on ONTRAforms, but not ONTRAmail. A. Yes you can. Google's conversion code needs to be in the body of a page, not the footer. We'd recommend that you use the Settings Tab > Custom Code to insert this type of tracking. A. For security reasons we have disabled sharing for pages and forms that contain Custom HTML Elements. 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 Element is intended for developers and programmers, and therefore is an official no whining zone. Use Case - Tabbed Content Area Using CSS
Use Case - Embed an Appointment Calendar
Other Coding Resources
FAQs
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 element don't match the rest on the page. What's up?
Q. I inserted code into the Custom HTML element and now my page isn't responsive. What gives?
Q. Are there Custom HTML Elements for ONTRAforms and ONTRAmail too?
Q. Can I use Custom HTML Elements for Google's Conversion Tracking?
Q. Why can't I share my page with a Custom HTML Elements via the Marketplace?
Articles in this section
- Pages Elements - Overview
- Using Form and Sales Elements
- Add Order Forms to ONTRAPORT Pages
- Adding Order Bumps and Upsells to Pages
- Adding Products to Sell on Pages
- Blocks, Columns and Rows
- Editing Images for Pages
- Pages Best Practices
- Pages FAQs
- Publishing Your ONTRAPORT Page
Comments