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 https://www.iframe-generator.com/ to generate your iframe :)




Here is an example of an <iframe>:



<!-- iframe banner --><iframe frameborder="0" height="950" id="banner_iframe" scrolling="yes" src="https://kulea.comp.kulea.marketing/pages/My-blog-form" 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=”https://kulea.comp.kulea.marketing/pages/My-blog-form” = 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!




Enjoy!