Skip to content
On this page
Netzo Use Cases: Form Handling

Netzo Use Cases: Form 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 Use Cases 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

Introduction

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

Problem

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.

Solution

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.

Example

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 mod.ts:

ts
// mod.ts
import { serve } from 'https://deno.land/[email protected]/http/server.ts'

const projectURL = `https://run.netzo.io/${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>
</form>
`

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',
        },
      })
    }

    default:
      return new Response('Invalid method', {
        status: 405,
        headers: {
          'access-control-allow-origin': '*',
        },
      })
  }
}
serve(handler)

Set the entrypoint to the filename of the module entry point.

Demo

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

Netzo Use Cases: Form Handling has loaded