It is very useful to be able to launch your form from a button that is placed on your website, rather than trying to embed the form itself in your website. The advantage of launching a form from a button is that the form is guaranteed to have full functionality available to it, and is not impacted by the code on your website. You are also enabled to display "login-protected" forms to users this way too. The user experience is also good because the user still remains on your website.
Below is the snippet of code to use when adding a button to your website that when clicked on, will open the form in a centered popup window on the same screen that the user is currently on.
<script>
function launchFormInPopupWindow(formId, title, w = 0, h = 0) {
//if no dimensions specified, or if dimensions too big, fallback to default dimensions
if ((w == 0) || (w > screen.width)) {
w = screen.width * 0.9;
}
//if no dimensions specified, or if dimensions too big, fallback to default dimensions
if ((h == 0) || (h > screen.height)) {
h = screen.height * 0.8;
}
//SECURITY: we ensure that "w" and "h" are valid numbers or else JS attack may be attempted here
if (!Number.isInteger(w)) {
w = screen.width * 0.9;
}
if (!Number.isInteger(h)) {
h = screen.height * 0.8;
}
//make sure the popup window is centered on the screen
var left = (screen.width / 2) - (w / 2);
var top = (screen.height / 2) - (h / 2);
//SECURITY: we specify the URL ourselves
var url = "https://www.globalpatron.com/form/view?formId=" + encodeURIComponent(formId);
//now open the popup window
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}
</script>
<!-- Feel free to change the style and colours of your call to action button as you wish -->
<style>
#gpCtaButton {
cursor: pointer;
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
</style>
<!-- Feel free to change the button text to say whatever you like. (by default it says "View Form") -->
<!-- The initial width and height of the popup can also be changed. (by default they are 1000 for width, and 750 for height) -->
<!-- Also, make sure to change the form id here to be your own form ID !!! -->
<button id="gpCtaButton" onclick = "launchFormInPopupWindow('75acda12-2dc8-45ad-b902-237345a7b632', 'View Form', 1000, 750);">
Launch Form
</button>