Using iframes to embed forms

Integrating forms into websites is a common practice. Among various methods, embedding forms using iFrames (Inline Frames) is popular due to its simplicity and effectiveness. So, let’s delve deeper into what an iFrame is, why you should use them, and we will also go over some best practices to ensure the best results.

What is an iFrame?

An iFrame allows for another website to be embedded into a webpage. Think of it as a window on a webpage that shows content from another place on the internet..

In this case that would be hosted link of the form we would like to embed.

A typical e-shot form URL would look like this:

https://signup.es-mail.co.uk/Signup/123456789

Why should I use a form in an iFrame?

• Easy to Use: It’s fast and easy to put forms into your website using iFrames.

• Visuals: iFrames, if set up correctly are responsive.

• Auto Updates: When you update your form, it automatically updates on your site too.

• Security: Forms embedded via iFrames are safe, no form code is exposed, keeping your information secure.

• Works Everywhere: iFramed forms work well on computers, tablets, and phones, so compatibility shouldn’t be an issue.

So how do I embed a form using the URL?

This is quite simple, You will need to place HTML code onto your websites page via either a HTML box, a code snippet or asking a developer to direct embed it into the pages code.

Typical code you may use when embedding a form could look like this:

<iframe src="URL_of_your_form" width="100%" height="100%"></iframe>

If you are using a HTML field to embed your form you can make the iFrame take the shape of the HTML Box, its pasted into by setting your width and height to 100%. You can also set the width and height using pixels to maintain a specific size of the iFrame.

An example of this could look like this:

<iframe src="URL_of_your_form" width="600px" height="600px"></iframe>

You can also apply ID’s and CSS inline CSS within your iFrame code.

An example of this can be seen here:

<iframe id="es-signupform" src="https://signup.es-mail.co.uk/Signup/659469ec60dc3a8257c19fcd5f6897be" style="border: none; width: 100%; height: 100%; overflow: hidden;"></iframe>

Best Practices

• Match the background of your website or remove the background from your form. This will ensure that the form looks seamless, as if it was coded into your website. A form which shows a different background colour may expose its binding box edges when the background colours clash.

• Match you forms button colours with the colours used on the website you’re iFraming onto. This will ensure branding consistently throughout your pages.

• Use the same fonts on your form as you do on the website the form will be on to brand. Unless your industry has a form standard, such as government, where the Gov form styling is the preferred and more trusted route. (e-shot forms come out the box with Gov based styling which help your forms look more trustworthy and provide more accessibility features, just like the GOV.UK website.)

• Thank you pages and confirmation pages are key to provide an excellent user experience. If your form uses a custom landing page to display the “Thank You” message. That will be far more effective and trustworthy than a system default message which thanks the user for filling in the form. This is because on your ‘thank you’ landing page, you are in control of the colours, fonts and styling, allowing you to replicate that seamless style.

IFrames are a fantastic way to display forms to your website visitors. It's important to test this against other methods of displaying forms such as automated pop-ups to ensure you are using the best possible method for each particular use case.