Skip to content
On this page
Netzo Examples: Webform Handling

Netzo Examples: Webform Handling

Fri Oct 21 2022

Arturo Romero Karam Arturo Romero Karam

Netzo is a code-first integration platform that empowers developers to integrate APIs, code automations and build internal tools faster.

This article is part of the Netzo Examples series. The objective of this series is to offer a practical solution to a specific problem. Some of these solutions are published to the open source Netzo Marketplace as starter templates for anyone to fork.

Test the live demo


A web form allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. Web forms come in handy and are essential for many tasks. Some relevant use cases include:

  • Contact forms
  • Lead generation forms
  • Order forms
  • Survey forms
  • Registration forms
  • Support request forms
  • Customer feedback forms


Enterprise tools like CRMs, ERPs and marketing platforms include convenient form builders, however, advanced styling and embedding is usually cumbersome and data processing limited or not possible.


The solution to handle submission data in a single place is to create a custom endpoint that both hosts the form and handles submissions, for example:

  • ✨ POST to any API endpoint (CRM, ERP, Billing, Marketing, etc.)
  • 🔔 Send notifications (Slack, Discord, Telegram, etc.)
  • 📨 Send an email auto response
  • 🗊 Log consent and collected data
  • ↩ī¸ Redirect to another page
  • đŸĒ Trigger a webhook

and more.


The following example provides a custom web form endpoint which returns HTML on GET requests and handles form submissions on POST requests.

  • Response when navigating to URL (GET request):

Response of a GET Request

  • Response on form submission (POST request):

Response of a POST Request

This can be done in a single file main.ts:

// main.ts
import { serve } from '[email protected]/http/server.ts'

const projectURL = `https://${Deno.env.get('DENO_DEPLOYMENT_ID')}`

const html = `
<form method='POST' action='${projectURL}' style="display: grid; grid-gap: 12px; max-width: fit-content;">
    <input type='text' name='name' placeholder='Your name'>
    <input type='number' name='age' placeholder='Your age'>
    <input type='color' name='color' placeholder='Your favorite color'>
    <button type='submit'>Submit</button>

async function handler(req: Request): Promise<Response> {
  switch (req.method) {
    case 'GET': {
      return new Response(html, {
        headers: {
          'access-control-allow-origin': '*',
          'content-type': 'text/html',

    case 'POST': {
      const body = await req.formData()
      const object = Object.fromEntries(body)
      return new Response(JSON.stringify(object), {
        headers: {
          'access-control-allow-origin': '*',
          'content-type': 'application/json',

      return new Response('Invalid method', {
        status: 405,
        headers: {
          'access-control-allow-origin': '*',


Test the live demo or fork the template from the Netzo Marketplace.