There are two types of forms in Ontraport - Ontraforms and Smart Forms. You can embed these forms on your site using embed codes. But at times these two forms doesn't offer all the great things such as hidden fields, flexibility of build etc as compared to creating a form on an Ontraport page using form elements.

So let's say there is a third type of forms which are the forms you build on an ontraport page itself using form elements.

And now we can embed this page as an iframe onto any websites and take advantage of forms having hidden fields, better tracking and so much more.

Let's see how it is done.

Note : Thanks to Landon for coming up with the idea and Ernesto for troubleshooting to make it work properly everywhere. Refer this FB post for original idea.

Step 1 : Creating Ontraport Page with a form

Go to Pages >> New Landing Page >> Start from scratch >> And one block

Once you have the block, add form elements as per your requirements and add a submit button, just like you create any other forms on Ontraport page.

At the end you will have something like this

Now we need to add a Javascript snippet onto this page either in the Header or Footer code of this page.

Copy and Paste the below code to Custom Code section of the page

<script>
  function sendHeightToParent() {
    const rect = document.documentElement.getBoundingClientRect();
    const offsetHeight = document.documentElement.offsetHeight;
    const height = rect.top < 0 ? offsetHeight + Math.abs(rect.top) : offsetHeight;
    window.parent.postMessage({ height: height }, "*");
  }

  function observeContentChanges() {
    const contentObserver = new MutationObserver(sendHeightToParent);
    contentObserver.observe(document.body, { childList: true, subtree: true, attributes: true });
  }

  window.addEventListener("load", () => {
    sendHeightToParent();
    observeContentChanges();
  });
  window.addEventListener("resize", sendHeightToParent);
  
  window.addEventListener("message", (msg)=>{
    const data = msg.data;
    if ( data.type == 'formProcessorMessage' ) {
      if ( data.data.type === 'conditionalRedirect' && data.data.url ) {
      		 window.parent.postMessage({ conditionalRedirectURL: data.data.url }, "*");
      }
    }
  });
</script>

Step 2 : Publish the page and Get the url

Once you are finished with designing the one block of form elements and adding the Javascript snippet, it is time to publish the page. You can publish on the free domains available or on to your own domain.

Once you publish it, you'd have a url like https://www.yourdomain.com/contact-form-page. We will need to copy the url for our next step.

Step 3 : Embedding the form onto a WordPress or any sites

In order to embed a form onto your page, you would require a custom code element. Then you have to copy and paste the iframe embed code with a few changes depending on the url of your published page.

This code can be placed either in the body or footer section of the website, depending where you want your form to appear.

Note : This is the part where Ernesto suggested an edit to the original code which made the form embed responsive on all devices. In the html part, ie within the <div> tag use the complete url of the page you've created. In the <script> part, use only the root domain. This will give you a responsive form on anywhere you embed it.

Update the parts that are in bold.

<div class="iframe-container">
  <iframe id="myIframe" src="https://www.yourdomain.com/contact-form-page" allow="cross-origin" onload="updateIframeHeight(this);"></iframe>
</div>

<style>
  .iframe-container {
    position: relative;
  }
  
  .iframe-container iframe {
    width: 100%;
    border: none;
    overflow: hidden;
    resize: none;
  }
</style>

<script>
  // Update the height of the iframe to match its contents
  function updateIframeHeight(iframe) {
    window.addEventListener("message", function(event) {
      if (event.origin !== "https://www.yourdomain.com/") {
        return;
      }
      iframe.style.height = event.data.height + "px";
      const framedBody = iframe.contentWindow.document.body;
      framedBody.style.minHeight = iframe.style.height;
    });
  }
</script>

Once you added the form code, you need to add one more piece of code in the footer section of the WordPress site or whichever platform you're using. This is a Javascript code.

<script>
  window.addEventListener('DOMContentLoaded', function() {
    var iframe = document.querySelector('iframe');

    // Wait for the iframe to load
    iframe.addEventListener('load', function() {
      console.log("Sending URL:", window.location.href); 
      iframe.contentWindow.postMessage(window.location.href, '*');
    });
  });
</script>

If everything worked fine, you would see a form like this

Hope this works for you as well.

Bonus

In case you want to add a pop up Ontraport page form, check out this document for the required code snippets originally written by Landon.