Company Blog Support
Larry Arone
Updated

Contents

    Back to Top

    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

    1. Add a custom HTML Element by dragging it into the desired column. 
    2. Click the Edit Code button that is the right of the Element Editor




    3. 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 Preview Code 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. 

    1. Publish the ONTRAform and copy the form code.
    2. Add a custom HTML element by dragging it into the desired column. 
    3. Click the Edit Code button that is the right of the Element Editor
    4. Delete the sample code and paste your form code into the Edit Code screen.
    5. 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

     

    Use Case - Tabbed Content Area Using CSS

    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.

    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 Element.
    • You can include style declarations at the top of the Custom HTML Element 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 - Embed 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.

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

    iframe booking calendar

    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 Pages 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 Page style and will need to be configured in the native application to match the page's fonts, colors and layout.
    Other Coding Resources
    FAQs

    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. 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?

    A. The Custom html Element should inherit the Page Style settings for the following classes: h1h2h3labelbuttonlarge-body-textbody-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 HTMLCSS and JavaScript in the Custom html element.


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

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


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

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


    Q. Can I use Custom HTML Elements 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. We'd recommend that you use the Settings Tab > Custom Code to insert this type of tracking.  


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

    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.

     

    Articles in this section

    Created - Updated
    Have more questions? Submit a request

    Comments

    Powered by Zendesk