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!