diff --git a/assets/events.ts b/assets/events.ts
index 530a4ea3397517611b11605eec4a7bb76c737f33..a8f71e9b502358472dd8af68b551510a5839927a 100644
--- a/assets/events.ts
+++ b/assets/events.ts
@@ -126,8 +126,9 @@ export function tabs() {
   addEventListener("load", () => {
     for (let i = 0; i < wrappers.length; i++) {
       const labels = wrappers[i].querySelectorAll(".tab-label");
+      console.log("labels", labels)
       const tabs = wrappers[i].querySelectorAll(".tab");
-
+      console.log("tabs", tabs)
       if (tabs.length > 0) {
         // Set the first tab in a group to display
         (tabs[0] as HTMLElement).style.display = "block";
diff --git a/content/pages/tutorials/forms/index.md b/content/pages/tutorials/forms/index.md
index 5beb9e04abd833c28a971f89173f016ca407a78e..7b5ab3d5f84b6a29b3c2dcd78b5e3a101e52a8d1 100644
--- a/content/pages/tutorials/forms/index.md
+++ b/content/pages/tutorials/forms/index.md
@@ -19,6 +19,146 @@ This tutorial will briefly touch upon the basics of HTML forms. For a more in-de
 
 This tutorial will make heavy use of Cloudflare Pages and [its Workers integration](/pages/platform/functions/). Refer to the [Get started guide](/pages/get-started/) guide to familiarize yourself with the platform.
 
+{{<tabs labels="js/sw | js/esm | ts/sw | ts/esm">}}
+{{<tab label="js/sw" default="true">}}
+
+```js
+async function handler(request) {
+  const base = 'https://example.com';
+  const statusCode = 301;
+
+  const destination = new URL(request.url, base);
+  return Response.redirect(destination.toString(), statusCode);
+}
+
+// Initialize Worker
+addEventListener('fetch', event => {
+  event.respondWith(handler(event.request));
+});
+```
+
+{{</tab>}}
+{{<tab label="js/esm">}}
+
+```js
+async function handler(request) {
+  const base = "https://example.com";
+  const statusCode = 301;
+
+  const destination = new URL(request.url, base);
+  return Response.redirect(destination.toString(), statusCode);
+}
+
+// Initialize Worker
+addEventListener("fetch", (event) => {
+  event.respondWith(handler(event.request));
+});
+```
+
+{{</tab>}}
+{{<tab label="ts/sw">}}
+
+```js
+async function handler(request) {
+  const base = "https://obinnas.com";
+  const statusCode = 301;
+
+  const destination = new URL(request.url, base);
+  return Response.redirect(destination.toString(), statusCode);
+}
+
+// Initialize Worker
+addEventListener("fetch", (event) => {
+  event.respondWith(handler(event.request));
+});
+```
+
+{{</tab>}}
+{{<tab label="ts/esm">}}
+
+```js
+import meaning from "meaning-of-life";
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return new Response(meaning);
+  },
+};
+```
+
+{{</tab>}}
+{{</tabs>}}
+
+{{<tabs labels="js/sw | js/esm | ts/sw | ts/esm">}}
+{{<tab label="js/sw" default="true">}}
+
+```js
+async function handler(request) {
+  const base = 'https://example.com';
+  const statusCode = 301;
+
+  const destination = new URL(request.url, base);
+  return Response.redirect(destination.toString(), statusCode);
+}
+
+// Initialize Worker
+addEventListener('fetch', event => {
+  event.respondWith(handler(event.request));
+});
+```
+
+{{</tab>}}
+{{<tab label="js/esm">}}
+
+```js
+async function handler(request) {
+  const base = "https://example.com";
+  const statusCode = 301;
+
+  const destination = new URL(request.url, base);
+  return Response.redirect(destination.toString(), statusCode);
+}
+
+// Initialize Worker
+addEventListener("fetch", (event) => {
+  event.respondWith(handler(event.request));
+});
+```
+
+{{</tab>}}
+{{<tab label="ts/sw">}}
+
+```js
+async function handler(request) {
+  const base = "https://obinnas.com";
+  const statusCode = 301;
+
+  const destination = new URL(request.url, base);
+  return Response.redirect(destination.toString(), statusCode);
+}
+
+// Initialize Worker
+addEventListener("fetch", (event) => {
+  event.respondWith(handler(event.request));
+});
+```
+
+{{</tab>}}
+{{<tab label="ts/esm">}}
+
+```js
+import meaning from "meaning-of-life";
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return new Response(meaning);
+  },
+};
+```
+
+{{</tab>}}
+{{</tabs>}}
+
 ## Overview
 
 On the web, forms are a common point of interaction between the user and the web document. They allow a user to enter data and, generally, submit their data to a server. A form is comprised of at least one form input, which can vary from text fields to dropdowns to checkboxes and more.
@@ -98,6 +238,7 @@ The source code for this example is [available on GitHub](https://github.com/clo
 
 {{</Aside>}}
 
+
 ### Setup
 
 To begin, create a [new GitHub repository](https://repo.new/). Then create a new local directory on your machine, initialize git, and attach the GitHub location as a remote destination:
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index dfdc0993393ea8ad74d69cd499e4d663090be1a9..ad842fca899c6498847177b210d036406adce52c 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -4,7 +4,7 @@
   <nav role="navigation" class="tabs">
     <ul id="tab-active">
       {{ range $idx, $txt := $labels }} {{- $link := replace $txt "/" "-"}}
-      <li class="tab-label-wrapper " >
+      <li class="tab-label-wrapper "  data-id="{{$idx}}" >
         {{ if or (eq $link "js-sw") }}
         <a class="tab-label active" href="#" data-link="tab-{{$link}}">
           <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em"