Hosting K2 forms in iFrames

01 Jun

Sometimes you want to host a K2 form in another html page. SharePoint is a great example of this. The issue is that you want it to be nice and seamless with no scrollbars. Using JQuery you can resize the frame to fit the contents, but thanks to security requirements the hosting page is not allowed to access the contents of the page it’s hosting. This means your hosting page can’t access the height of the contents, so you don’t know how to resize the frame.

Luckily there’s a very simple way to accomplish this.

Let’s say you have a SharePoint page that needs to host a K2 SmartForm. Your html would contain something like this:

<iframe id="k2iFrame" style="width: 100%;" src="" width="300" height="150" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

If you run it like this, you’re going to get a frame with the default height and most of the form is cut off. Here’s the solution:

Step 1: Have the K2 form send it’s height to the parent

  1. Add a data label to the form and check the ‘Literal’ button
  2. Add a rule on the form that executes when the form is initialized
  3. In the rule, transfer the following to the data label:
    $(document).ready(function() {
    var body = document.body,
    html = document.documentElement,
    height = Math.max(body.scrollHeight, body.offsetHeight,
    html.clientHeight, html.scrollHeight, html.offsetHeight);
    if (parent.postMessage) {
    parent.postMessage(height, "*");

Step 2: Add the event handler on the parent page

<iframe src="" id="k2iFrame" style="width: 100%;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"></iframe>
<script type="text/javascript">
var k2Resize_resize = function (event) {
var k2iFrame = document.getElementById('k2iFrame');
if (k2iFrame) { = + "px";
if (window.addEventListener) {
window.addEventListener("message", k2Resize_resize, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", k2Resize_resize);

That’s it. Obviously this won’t handle resizing forms, but this should get you started. Hope that helps.


5 Responses to Hosting K2 forms in iFrames

  1. Doug

    October 13, 2017 at 3:32 pm

    Hi there.. Thanks for providing this. I’m having a little trouble though.. On the parent page, the does not have a number.. rather it has ‘sfrtFormReady’

    Thoughts on what I’m doing wrong?

    • Doug

      October 13, 2017 at 4:49 pm

      I figured it out

      There is a space in your closing script tag… should be

  2. FirstMallory

    December 31, 2017 at 9:50 am

    I have noticed you don’t monetize your site, don’t waste
    your traffic, you can earn additional bucks every month because you’ve got high
    quality content. If you want to know how to make extra bucks, search for: Boorfe’s tips best adsense alternative

  3. JesusSmall

    February 19, 2018 at 11:51 am

    I have checked your blog and i’ve found some duplicate content, that’s why you don’t rank high
    in google’s search results, but there is a tool that can help you to create
    100% unique content, search for: Boorfe’s tips unlimited content

  4. BestOctavia

    August 12, 2018 at 7:33 am

    I have noticed you don’t monetize your website, don’t waste
    your traffic, you can earn extra bucks every month. You can use the best adsense
    alternative for any type of website (they approve all websites), for more details simply
    search in gooogle: boorfe’s tips monetize your website


Leave a Reply

Your email address will not be published. Required fields are marked *