Using iFrames on your static website

iFrames have been available since the early days of the internet. You can embed the content of another website on your own website. While there were several changes (mostly security-related) to the implementation and interpretation of iFrames in different browsers, it is still a good and simple way to embed external content.

How to use an iFrame

Adding an iFrame is quite simple. It’s just a short HTML tag that can be used within WordPress like so:

<iframe width="100%" height="500px" src=""></iframe>

Additional Parameters for iFrames

In my example above, I already added width and height as parameters to customize the iFrame. A couple of other parameters allow you to further customize the appearance of the embedded website.


This parameter allows visitors to see the embedded iFrame in fullscreen mode.

<iframe allowfullscreen="true" src=""></iframe>


Usually, iframes are render-blocking. That means they are bad for pagespeed and because of this, there is now a loading parameter that can be set to lazy. This way, the content will be loaded in the background and no longer interfere with your website.

<iframe loading="lazy" src=""></iframe>

You can find a list of all available parameters here.

Problems with iFrames

There are a couple of security restrictions in place by default within servers and browsers to prevent abusing iFrames for content theft. Because of that, a couple more steps can be involved to make that work for you.

This is quite a huge topic. That is why I recommend reading the basics at MDN Web Docs.

You may need to adjust your server to allow Cross-Origin requests from your static website to your dynamic website. Simply Static Pro already does some of these things for you, but some things need to be done on the server level directly.

Why do you want to use iFrames on your static website?

The main reason to use iFrames on your static website is to make dynamic parts work.

Many WordPress plugins aren’t optimized for static websites due to their reliance on Ajax. While there are always working alternatives for various plugins, there is almost always at least one that can work without Ajax and is optimized for static sites.

iFrames are a great way to embed ajax-functionality on your static website and use your dynamic website to process these requests.

Advanced iFrames

If playing around with HTML isn’t yours, that’s fine too. A powerful free plugin is available at the repository called Advanced Iframes. You can do everything mentioned above and more (like showing only specific areas of your website within the iframe).

Iframe with WordPress plugin

Ajax – What is it, and why it’s used?

Ajax is a way to dynamically update parts of your website without forcing a reload of your entire website. This is quite common nowadays as it provides a better UX for visitors.

I found this little image showing how the concept of Ajax technically works:

Using iFrames on your static website 1
Credits: ClickIT – Ajax Technique and jQuery Methods

Ajax events get triggered from the frontend by starting an event. This event can be a click on a button, submitting a form, or any kind of interaction with the page. Once done, data is sent from your browser (via JavaScript) to the server, where PHP handles the submission and eventually returns data to the browser.

You often see those methods used in form plugins and in things like “Load More” features or to enable live search with auto-suggestions on your website.

Elementor Forms – a practical example

Elementor is the most popular page builder for WordPress. Elementor Pro also ships with a form module to embed forms into your website without requiring an additional form plugin. That’s great if all you need are basic forms.

Using iFrames on your static website 2

Setting up the form

I set up a simple WordPress website with Elementor, and Elementor Pro installed and added the form module to a page. I didn’t touch any specifics here, just the pretty basic form with name, e-mail, and message.

Using iFrames on your static website 3

Setting up the iframe

I now created a new page and added the iframe to it. The source of the iframe points to the URL of the Elementor Form page.

Using iFrames on your static website 4

Excluding the original page from the iFrame

Now we have two pages that have the same content. One is the original content, the other one simply embeds the page within an iframe. Now we exclude the original page from the static export. Visit Simply Static -> Settings -> General->Exclude and exclude the URL:

Using iFrames on your static website 5

That’s it. Ensure you link to the page containing the iframe and exclude the page containing the form within Simply Static.

Start a new static export within Simply Static, and you are ready. Simply Static does not replace the src from iFrames to make that work (so you don’t have to worry about that!).

Apply CSS only to pages that are loaded within an iframe

I already mentioned the Advanced iFrame plugin that can show just parts of your page within an iFrame. If you don’t want to use a plugin for that, here is a little code snippet that allows you to inject CSS into the page only if it’s loaded as an iFrame.

Using iFrames on your static website 6

This little code snippet adds an “in-iframe” class to the body of your page as soon as it’s loaded within an iframe. This way, you can easily apply CSS to it and customize the page.

In our Elementor Forms example, we may want to hide the header and footer and only show the form:

Using iFrames on your static website 7

To only apply that for the header within an iframe, we combine it with the “in-iframe” prefix class. For that, I added a little code snippet within Elementor like so:

Using iFrames on your static website 8

Now you can add as many CSS styles as you like to modify the embedded page within an iframe. Removing the header already produced quite a good result for my little example, but feel free to customize it further based on your needs.