Adding your quote form to your website
Option 1 – Button:
If you’re not technical, the simplest way to add the quote form to your website is to use a number of buttons. You can set these to say whatever you want such as “Get quote”, “Book now” etc. Set the link on the button to open your quote form. Your link looks something like this: https://YOURFIRM.surveybooker.co.uk/#/
It’s worth adding the button in a few locations – customers will only enquire using your form if it’s easy to find. For example, have a link in your menu bar, on your contact page and on your services pages. The more you direct customers towards the form, the more people that will use it.
Option 2 – Embed:
You can also choose to embed the form within your own website. To do this you need to use an iframe. If you are unfamiliar with coding you can use a standard iframe to add the form into your site. However, the form changes height as questions are answered and different pages are loaded as well as on different devices. This can lead to a scroll on the iframe. Therefore, we recommend using the iframe code and supporting file below which ensures the iframe automatically adjusts to the height of the form.
Part 1 – HTML code
Add the html code to the page on which you want to embed the quote form. You will need to replace the link in red to the link for your own quote form.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Get an Instant Quote</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}
#iframeContainer {
width: 100%;
overflow: hidden;
}
#iframe {
width: 100%;
border: none;
}
</style>
</head>
<body>
<div id=”iframeContainer”>
<iframe id=”iframe”
src=”https://YOURFIRM.surveybooker.co.uk”
allowfullscreen>
</iframe>
</div>
<script>
window.addEventListener(‘message’, function (event) {
if (event.origin === ‘LINK TO YOUR SCRIPT‘) {
var newHeight = event.data.height;
document.getElementById(‘iframe’).style.height = newHeight + ‘px’;
}
});
</script>
</body>
</html>
Part 2 – Script
You will also need to add in the script below to your sites files. This script dynamically creates the iframe and handles the resizing as the content changes. The script must be stored in a public folder in your site files and the path to it referenced in the html code above (see the script code at the end).
Once you have added those two parts to your site, your form should appear on your website and you are good to go.
Troubleshooting
- When copying and pasting the code, please check that the speech marks are in the correct format. Sometimes, when pasting code in, they can paste in in the wrong format making them invalid. If this happens, delete them and retype them.
- Your script file must be in a publicly accessible folder to allow it to be accessed.