diff --git a/packages/landing/src/ui.ts b/packages/landing/src/ui.ts
index b1424ebd39..42e21b99cc 100644
--- a/packages/landing/src/ui.ts
+++ b/packages/landing/src/ui.ts
@@ -23,6 +23,7 @@ export class BasemapsUi {
         this.bindProjectionButtons();
         this.bindApiLinks();
         this.bindMenuButton();
+        this.bindContactUsButton();
 
         this.setCurrentProjection(this.basemaps.config.projection);
     }
@@ -43,6 +44,28 @@ export class BasemapsUi {
         this.sideNav = sideNav;
     }
 
+    bindContactUsButton(): void {
+        const button = document.getElementById('contact-us');
+        if (button == null) {
+            throw new Error('Unable to find contact-us button');
+        }
+
+        button.onclick = (): void => {
+            const subject = 'Request Basemaps Developer Access';
+            const body = `
+Give us a few key details to sign up for Developer Access to LINZ Basemaps. We will respond with your Apps' unique API key.
+
+Your Name:
+
+Your Email:
+
+Your Service/App URL:
+
+`;
+            location.href = `mailto:basemaps@linz.govt.nz?subject=${encodeURI(subject)}&body=${encodeURI(body)}`;
+        };
+    }
+
     menuOnClick = (): void => {
         if (this.sideNav.classList.contains('side-nav--opened')) {
             gaEvent(GaEvent.Ui, 'menu:close', 1);
diff --git a/packages/landing/static/index.html b/packages/landing/static/index.html
index 8b10b349d1..59cadcbad0 100644
--- a/packages/landing/static/index.html
+++ b/packages/landing/static/index.html
@@ -156,8 +156,7 @@ <h6>Get an API Key</h6>
 
         <h6>Developer Access</h6>
         <p>Contact us for free API keys with better support for public web and mobile apps.</p>
-        <button id="contact-us" class="lui-button lui-button-tertiary"
-            onclick="location.href='mailto:basemaps@linz.govt.nz'">Contact us</button>
+        <button id="contact-us" class="lui-button lui-button-tertiary">Contact us</button>
 
         <h6>About basemaps</h6>
         <ul class=" info-links">