An <iframe> (or 'magic window' as we call it in the Kulea office) is the HTML Inline Frame element… this is how we embed our ‘little slices of Kulea’ into your web pages; we are effectively embedding another webpage into your current page.

Whilst all of the below is really helpful - you can shortcut most of it by building yourself a landing page form and using to generate your iframe :)

Here is an example of an <iframe>:

<!-- iframe banner --><iframe frameborder="0" height="950" id="banner_iframe" scrolling="yes" src="" width="100%"></iframe>

We can then break down the HTML to understand how it is built:


<!-- iframe banner --> = This is just a simple HTML comment used to comment a group of code and does not affect the code in any way.

><iframe frameborder="0" = The iframe border is in pixels “0” would mean no border, “1” would enable a single border. So effectively 1 or 0 represents on or off.

height="950" = This is the height of your iframe (For example we find 600px is a good height when using a form with 4 input fields.)

Scrolling=”yes” = This will add a vertical scroll bar to your form. If you don't want one just type "no" but make sure you have enough height to accommodate different screen sizes. A good solution for responsive websites would be to create CSS media queries to adjust the iframe height at different screen size breakpoints.

src=”” = This is where you insert the source URL (which would be your Kulea landing page URL.). We would advise using HTTPS.

width="100%" = This is the width of your frame, we strongly recommend you have it at 100% so it will automatically adapt to the width of its container.

</iframe> = This will close the iframe banner.

Once you’ve written your <iframe> its time to pop it into your webpage… this can be done one of two ways….

  • Give it to your Webmaster and tell them which page you want it on, they’ll know what to do with it!
  • DIY! You can drop it into the HTML code of the webpage yourself.

Here is a webpage before our <iframe> is inserted:

If you access the HTML (in Wordpress for example, just access the text editing view) you can drop in the <iframe>. Now when you preview or publish the page your iframe fits in the page seamlessly, allowing the Kulea magic to happen!