Coder Legion - Recent posts tagged formbackend

How to Handle Form Submissions in Vue.js Without a Backend

Thu, 18 Jun 2026 17:01:25 +0000

If you are building a Vue.js application and need to handle contact form submissions, the standard approach involves setting up a backend server, configuring email sending, managing environment variables, and deploying server-side code.

That is a lot of infrastructure for what is essentially a contact form.

In this tutorial, I will show you how to handle Vue.js form submissions without any backend using Formgrid. Every submission gets stored in a dashboard, triggers an instant email notification, becomes a tracked lead in a pipeline, and optionally syncs to Google Sheets automatically.

No server. No Node.js backend. No email configuration. Just a Vue.js form and a Formgrid endpoint URL.

What You Are Building

A fully functional contact form in Vue.js that:

Sends form data to Formgrid on submission. Triggers an instant email notification with the submission details. Stores every submission as a tracked lead in your Formgrid dashboard. Shows a loading state while submitting. Shows a success message after submission. Blocks bots with a honeypot field.

Prerequisites

Basic knowledge of Vue.js and JavaScript. A free Formgrid account at formgrid.dev.

Step 1: Create Your Vue.js Project

If you do not have a Vue.js project yet create one now:

npm create vue@latest vue-formgrid-contact
cd vue-formgrid-contact
npm install
npm run dev

Open localhost:5173 and confirm the default Vue.js page loads.

Step 2: Create Your Formgrid Account and Form

Go to formgrid.dev and sign up using Google or email. No credit card required.

Once logged in click New Form from your dashboard and give your form a name. Something like "Vue Contact Form" or "Website Enquiries". Click Create Form.

You will be taken to your form's Overview tab. Here you will find your unique Endpoint URL. Copy it. It looks like this:

https://formgrid.dev/api/f/your-form-id

This is the URL you will send your form data to. Every time someone submits your form the data goes to this endpoint and Formgrid emails you the submission details instantly.

Step 3: Create the Contact Form Component

In your Vue.js project create a new file called ContactForm.vue inside the src/components folder:

<!-- src/components/ContactForm.vue -->
<template>
  <div class="form-wrapper">
    <div v-if="submitted" class="success-message">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" stroke="#0d9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
        <polyline points="22 4 12 14.01 9 11.01"/>
      </svg>
      <h2>Message sent successfully</h2>
      <p>We will get back to you within 24 hours.</p>
    </div>

    <form v-else @submit.prevent="handleSubmit">
      <h2>Contact Us</h2>
      <p>Any questions or remarks? Just write us a message.</p>

      <div class="field">
        <label for="name">Name</label>
        <input
          id="name"
          v-model="form.name"
          type="text"
          placeholder="Allen Jones"
          required
        />
      </div>

      <div class="field">
        <label for="email">Email</label>
        <input
          id="email"
          v-model="form.email"
          type="email"
          placeholder="*Emails are not allowed*"
          required
        />
      </div>

      <div class="field">
        <label for="phone">Phone <span class="optional">(optional)</span></label>
        <input
          id="phone"
          v-model="form.phone"
          type="tel"
          placeholder="+1 555 000 0000"
        />
      </div>

      <div class="field">
        <label for="message">Message</label>
        <textarea
          id="message"
          v-model="form.message"
          placeholder="Write your message here"
          rows="5"
          required
        />
      </div>

      <!-- Honeypot field: hidden from real users, catches bots -->
      <input
        v-model="form.honeypot"
        type="text"
        name="_honey"
        style="display: none"
        tabindex="-1"
        autocomplete="off"
        aria-hidden="true"
      />

      <p v-if="error" class="error-message">{{ error }}</p>

      <button type="submit" :disabled="loading">
        {{ loading ? 'Sending...' : 'Send Message' }}
      </button>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const FORMGRID_ENDPOINT = 'https://formgrid.dev/api/f/your-form-id'

const form = reactive({
  name: '',
  email: '',
  phone: '',
  message: '',
  honeypot: ''
})

const loading = ref(false)
const submitted = ref(false)
const error = ref('')

async function handleSubmit() {
  // If honeypot is filled in it is a bot
  if (form.honeypot) return

  loading.value = true
  error.value = ''

  try {
    const response = await fetch(FORMGRID_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        name: form.name,
        email: form.email,
        phone: form.phone,
        message: form.message
      })
    })

    if (response.ok) {
      submitted.value = true
    } else {
      error.value = 'Something went wrong. Please try again.'
    }
  } catch {
    error.value = 'Something went wrong. Please try again.'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.form-wrapper {
  max-width: 540px;
  margin: 60px auto;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  font-family: system-ui, sans-serif;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0d1117;
  margin: 0 0 8px;
}

p {
  color: #6b7a8d;
  font-size: 0.9rem;
  margin: 0 0 24px;
}

.field {
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0d1117;
  margin-bottom: 6px;
}

.optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: #6b7a8d;
}

input,
textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #0d1117;
  background: #f8f9fb;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  outline: none;
}

input:focus,
textarea:focus {
  border-color: #0d9488;
  background: #ffffff;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

button {
  width: 100%;
  padding: 12px;
  background: #0d9488;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 8px;
}

button:hover:not(:disabled) {
  background: #0f766e;
}

button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.error-message {
  color: #dc2626;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.success-message {
  text-align: center;
  padding: 20px 0;
}

.success-message svg {
  margin-bottom: 16px;
}

.success-message h2 {
  font-size: 1.25rem;
  color: #0d1117;
  text-align: center;
}

.success-message p {
  text-align: center;
  margin: 8px 0 0;
}
</style>

Replace your-form-id in the FORMGRID_ENDPOINT constant with the actual form ID from your Formgrid form overview tab.

Step 4: Use the Component in Your App

Open src/App.vue and import the ContactForm component:

<!-- src/App.vue -->
<template>
  <div>
    <ContactForm />
  </div>
</template>

<script setup>
import ContactForm from './components/ContactForm.vue'
</script>

Run your development server:

npm run dev

You should see the contact form at localhost:5173.

Step 5: Test the Form Submission

Fill in the form with real looking test data and click Send Message.

Within seconds you should see three things happen.

The success message appears on screen replacing the form.

You receive an instant email notification at your Formgrid signup address with the full submission details formatted cleanly:

New Submission: Vue Contact Form

Name: Allen Jones
Email: *Emails are not allowed*
Phone: +1 555 000 0000
Message: This is a test message from my Vue.js form.

Submitted: 10:30 AM, June 16, 2026

The submission appears in your Formgrid dashboard under the Submissions tab.

Step 6: View the Lead in Your Pipeline

This is where Formgrid goes beyond a basic form backend.

Every submission automatically becomes a tracked lead in your Formgrid dashboard. Go to the Leads tab and you will see your test submission with a status of New.

Here is what the full flow looks like from form submission to tracked lead:

Click on the lead and you can:

Change its status from New to Contacted when you reply. Change it to Converted when they become a customer. Add a private note about the conversation. Set a follow-up reminder so Formgrid emails you on a date you choose with the lead details and your notes attached.

Your conversion rate updates automatically at the top of the leads tab. That number tells you things a flat email inbox never could.

Step 7: Configure Form Settings

Go to the Settings tab on your form in the Formgrid dashboard to configure additional options.

From here you can:

Add multiple notification email addresses. Set a custom redirect URL after submission. Enable auto-responder emails to confirm receipt to the person who submitted. Enable hCaptcha for additional bot protection on top of the honeypot field already in your form.

Step 8: Connect Google Sheets (Optional)

If you want every form submission to appear automatically as a new row in a Google Sheet go to the Integrations tab on your form.

Connect your Google account and select the sheet where you want submissions to land. From that point every new submission creates a new row instantly with no Zapier required.

This is particularly useful if you have a team. Everyone with access to the sheet sees new submissions in real time without needing to log into anything new.

Google Sheets sync is available on the Premium plan at $12 per month.

How to Handle File Uploads

If you need users to upload files alongside the form you need to send multipart form data instead of JSON. Here is the updated handleSubmit function:

async function handleSubmit() {
  if (form.honeypot) return

  loading.value = true
  error.value = ''

  try {
    const formData = new FormData()
    formData.append('name', form.name)
    formData.append('email', form.email)
    formData.append('phone', form.phone)
    formData.append('message', form.message)

    if (form.file) {
      formData.append('file', form.file)
    }

    const response = await fetch(FORMGRID_ENDPOINT, {
      method: 'POST',
      headers: {
        'Accept': 'application/json'
      },
      body: formData
    })

    if (response.ok) {
      submitted.value = true
    } else {
      error.value = 'Something went wrong. Please try again.'
    }
  } catch {
    error.value = 'Something went wrong. Please try again.'
  } finally {
    loading.value = false
  }
}

Add the file field to your reactive form object and a file input to your template:

<div class="field">
  <label for="file">Attachment <span class="optional">(optional)</span></label>
  <input
    id="file"
    type="file"
    @change="form.file = $event.target.files[0]"
  />
</div>

File uploads up to 1GB are included on the Premium plan at $12 per month.

Using with the Options API

If you prefer the Options API instead of the Composition API here is the equivalent component:

<template>
  <!-- Same template as above -->
</template>

<script>
export default {
  name: 'ContactForm',
  data() {
    return {
      form: {
        name: '',
        email: '',
        phone: '',
        message: '',
        honeypot: ''
      },
      loading: false,
      submitted: false,
      error: ''
    }
  },
  methods: {
    async handleSubmit() {
      if (this.form.honeypot) return

      this.loading = true
      this.error = ''

      try {
        const response = await fetch(
          'https://formgrid.dev/api/f/your-form-id',
          {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
            },
            body: JSON.stringify({
              name: this.form.name,
              email: this.form.email,
              phone: this.form.phone,
              message: this.form.message
            })
          }
        )

        if (response.ok) {
          this.submitted = true
        } else {
          this.error = 'Something went wrong. Please try again.'
        }
      } catch {
        this.error = 'Something went wrong. Please try again.'
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

Using with Nuxt.js

If you are using Nuxt.js instead of plain Vue.js the same component works without any changes. Nuxt.js is built on Vue.js and supports the same Composition API and Options API patterns.

The only difference is where you place the component file. In a Nuxt project put it in the components folder and Nuxt will auto-import it:

components/
  ContactForm.vue   // auto-imported by Nuxt

Use it in any page without importing:

<!-- pages/contact.vue -->
<template>
  <div>
    <ContactForm />
  </div>
</template>

Why Not Just Use a Backend?

You could set up an Express server, configure Nodemailer, deploy it to a VPS, and manage it yourself. Here is what that actually involves:

Setting up a Node.js server. Configuring email sending with an SMTP provider. Managing environment variables for email credentials. Deploying and maintaining the server. Handling server downtime and errors. Paying for server hosting.

Formgrid handles all of that for $12 per month on the Premium plan, plus gives you a lead pipeline, Google Sheets sync, and follow-up reminders that a custom backend would not include.

For a contact form on a Vue.js site, a backend is the wrong tool for the job.

Formgrid Pricing

Plan	Price	Submissions
Free	$0 per month	25 per month
Premium	$12 per month	1,000 per month
Business	$29 per month	15,000 per month

The free plan is enough to get started. Upgrade when your volume grows.

Conclusion

In this tutorial you built a fully functional Vue.js contact form that handles submissions without any backend code.

Every submission is:

Sent to Formgrid via a simple fetch request. Stored in a dashboard you can access any time. Emailed to your inbox instantly. Tracked as a lead in a pipeline with status, notes, and follow-up reminders. Optionally synced to Google Sheets automatically.

The entire setup takes about 10 minutes. No server to build. No email configuration. No infrastructure to maintain.

Try Formgrid free at formgrid.dev No credit card required.

Full disclosure: I built Formgrid. I wrote this tutorial as honestly as I could. If anything looks inaccurate or could be improved, let me know in the comments.

The Best Form Backend for Static Sites in 2026

Thu, 18 Jun 2026 16:59:17 +0000

You built your site on GitHub Pages, Netlify, Vercel, or a plain HTML file. It looks great. But there is one problem.

Your contact form has nowhere to go.

Static sites have no server. No server means no backend. No backend means no way to process form submissions natively. You need a form backend to handle what your static site cannot.

This post covers every realistic option in 2026, what each one actually costs, and which one makes the most sense depending on your use case.

Why Static Sites Need a Form Backend

When a user submits a form on a regular server-rendered site, the server processes the submission, sends an email, saves it to a database, and does whatever else you configured.

Static sites have none of that. The page is just HTML and CSS served from a CDN. There is no process running in the background waiting to handle submissions.

Your options are:

1. Use a third-party form backend service
2. Write a serverless function yourself
3. Use your hosting platform's built-in forms
4. Self-host your own form backend

Each approach has genuine tradeoffs. Here is the honest breakdown.

Option 1: Third-Party Form Backend Services

These are hosted services that give you an endpoint URL. You point your form action at that URL, and they handle everything else.

Formspree

One of the oldest form backends. Been around since 2012.

What it does well:

Simple and reliable
Good documentation
Works with any HTML form
Large user base
Established reputation

The honest problems:

Free plan: 50 submissions per month
           1 form only
           No spam filtering
           Submissions go straight
           to the inbox, including spam

Paid plan: $15 per month
           Spam filtering
           More submissions
           No lead management
           No pipeline
           Stops at the inbox

The biggest limitation of Formspree is that it stops at the inbox. Every submission becomes an email. You are responsible for tracking who you contacted, who you followed up with, and who converted. There is no system for that built in.

If you receive 20 enquiries per month and manually track them all in a spreadsheet or Gmail labels, Formspree works. If you want something that actually helps you manage leads, it does not.

Pricing: Free up to 50 submissions. $15 per month for paid features.

Netlify Forms

If you are already hosting on Netlify, their built-in forms are a natural first choice.

What it does well:

Zero configuration if already on Netlify
No external service needed
Clean integration with existing workflow
Submissions visible in the Netlify dashboard

The honest problems:

Free plan: 100 submissions per month
           Basic spam filtering only
           No email notifications by default
           Need to set up notifications manually

Paid plans: $19 per month minimum
            Still no lead management
            Basic submission storage only

Locked to Netlify:
            If you move hosting, you
            lose your form history
            Not portable

Netlify Forms is convenient if you are already on Netlify and have low volume. The moment you outgrow 100 submissions per month or need any form of lead tracking, it falls short.

Pricing: Free up to 100 submissions on Netlify free tier. $19 per month for Pro.

Basin

A simpler form backend aimed at developers who want clean, minimal tooling.

What it does well:

Clean developer experience
Good spam filtering
Reasonable pricing
Simple dashboard

The honest problems:

Free plan: 100 submissions per month
Paid plan: $15 per month
No lead pipeline
No follow-up reminders
No Google Sheets sync
Stops at the inbox like Formspree

Basin is a solid Formspree alternative, but it solves the same problem in roughly the same way. If Formspree is not working for you, Basin is a lateral move, not an upgrade.

Pricing: Free up to 100 submissions. $15 per month paid.

Web3Forms

A newer form of backend that has grown quickly.

What it does well:

Generous free plan
Good deliverability
Clean API
Actively maintained

The honest problems:

Free plan: unlimited submissions
           but basic features only
Paid plan: $18 per month
No lead management
No pipeline
No follow-up system
Stops at the inbox

Web3Forms has a genuinely generous free plan, which is why it has grown. But the same limitation applies: it stops at the inbox. Every submission becomes an email, and you manage the rest manually.

Pricing: Free with limited features. $18 per month paid.

Formgrid

Full disclosure: I built Formgrid. This is the tool I use and the one I think is the most complete solution for developers and small businesses on static sites.

What it does differently:

Every other form backend on this list stops at the inbox. Formgrid does not.

Every submission becomes a tracked lead automatically. Not just an email. A lead with a status, a notes field, a follow-up reminder, and a conversion tracking system built in.

Submission arrives
Automatically becomes a lead
Status: New
You contact them
Status: Contacted
They become a customer
Status: Converted
Conversion rate updates automatically

You can rename the stages to match your exact workflow. A quote request business might use New Request, Quote Sent, Negotiating, and Won. An event organizer might use Registered, Confirmed, Attended. The pipeline adapts to how you actually work.

Google Sheets sync without Zapier:

Formspree charges $90 per month for Google Sheets integration. Formgrid includes it on Premium at $12 per month. No Zapier account. No automation setup. Every submission appears as a new row in your Google Sheet automatically.

Spam protection on every plan:

I tested the same crypto spam submission on the Formspree free plan and the Formgrid free plan last week. Formspree delivered it straight to the inbox. Formgrid blocked it silently before it reached the inbox.

Emoji in name fields, disposable email addresses, HTML injection, and known crypto spam patterns are filtered automatically on every plan, including free.

Open source and self-hostable:

The entire codebase is on GitHub under the MIT license. If you want unlimited free usage, you can self-host on Docker. No vendor lock-in.

Pricing:

Free: 3 forms, 25 submissions per month
Premium: $12 per month, unlimited forms,
         1000 submissions, Google Sheets,
         file uploads, CSV export,
         auto-responder emails
Business: $29 per month, everything in
          Premium plus custom HTML emails,
          unlimited Google Sheets,
          webhooks and Zapier,
          15000 submissions

Option 2: Serverless Functions

If you are comfortable with code, you can write your own form handler as a serverless function on Vercel, Netlify, or Cloudflare Workers.

// Example Vercel serverless function
export default async function handler(req, res) {
  const { name, email, message } = req.body
  
  await sendEmail({
    to: '*Emails are not allowed*',
    subject: `New contact from ${name}`,
    body: message
  })
  
  res.status(200).json({ success: true })
}

What it does well:

Complete control
No monthly fees beyond email service
Integrates with any email provider
Customizable to any requirement

The honest problems:

You maintain it yourself
No dashboard to view submissions
No spam protection unless you build it
No lead management unless you build it
Email delivery setup and maintenance
Cold start latency on some platforms
Debugging is your responsibility

This approach makes sense if you are a developer who enjoys building infrastructure and has specific requirements that no service can meet. For everyone else, the maintenance overhead is not worth it.

Option 3: Platform Built-in Forms

Some static site platforms include form handling natively.

Netlify Forms: covered above.

Vercel: No built-in form handling. Requires serverless functions or a third-party service.

GitHub Pages: no built-in form handling. Requires a third-party service.

Webflow: has basic form handling but no auto-responder emails natively. You need a third-party service for confirmation emails and lead management.

Framer: same limitation as Webflow. Basic form submissions only. No native auto-responder or lead management.

Option 4: Self-Hosted Form Backend

If you want complete control and no monthly fees, self-hosting is a legitimate option.

Tools worth considering:

Formgrid (open source):

MIT license
Docker deployment
Full feature set, including lead pipeline
PostgreSQL database
Runs on any VPS

Formbricks:

Open source survey and form tool
Self-hostable
More survey-focused than form backend
Good for research and feedback forms

Pocketbase:

Not a form backend specifically
But can handle form submissions
Single binary deployment
Very lightweight

Self-hosting requires a server, maintenance, backups, and email delivery setup. For developers comfortable with DevOps, this is a great option. For everyone else, a managed service is more practical.

The Honest Comparison

Feature	Formspree	Netlify Forms	Basin	Web3Forms	Formgrid
Free submissions	50/month	100/month	100/month	Unlimited	25/month
Paid price	$15/month	$19/month	$15/month	$18/month	$12/month
Spam filtering	Paid only	Basic	Yes	Yes	All plans
Lead pipeline	No	No	No	No	Yes
Follow up reminders	No	No	No	No	Yes
Google Sheets sync	$90/month	No	No	No	$12/month
Auto-responder	Paid	No	No	No	Premium
Open source	No	No	No	No	Yes
Self-hostable	No	No	No	No	Yes

Which One Should You Use?

Use Formspree if:

You are already using it
Your use case is simple
You just need email notifications
You have fewer than 50 submissions
per month

Use Netlify Forms if:

You are already on Netlify
You have very low form volume
You do not need email notifications
immediately, and are okay with configuring them

Use a serverless function if:

You are a developer who wants
complete control
You have specific requirements
no service can meet
You enjoy building and maintaining
infrastructure

Use Formgrid if:

You want more than just email notifications
You want to track leads after they submit
You want Google Sheets sync without Zapier
You want spam filtering on the free plan
You want an open source option, you can
self-host if needed
You are managing enquiries for a
real business and need to follow up
without losing track of anyone

How to Connect Any HTML Form to Formgrid

If you are currently using Formspree or no form backend at all, switching to Formgrid takes about 5 minutes.

Step 1: Create a free account at formgrid.dev

Step 2: Create a new form and copy your endpoint URL

Step 3: Update your HTML form action

From this:


<form action="https://formspree.io/f/your-id" method="POST">
  <input type="text" name="name" placeholder="Your Name" />
  <input type="email" name="email" placeholder="Your Email" />
  <textarea name="message" placeholder="Your Message"></textarea>
  <button type="submit">Send</button>
</form>

To this:


<form action="https://formgrid.dev/api/f/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your Name" />
  <input type="email" name="email" placeholder="Your Email" />
  <textarea name="message" placeholder="Your Message"></textarea>
  <button type="submit">Send</button>
</form>

Step 4: Submit a test form to confirm it is working

That is it. Your form is live. Every submission now arrives as a tracked lead in your Formgrid dashboard.

Adding the Honeypot Field for Spam Protection

For HTML forms on your own site, add this hidden field inside your form tag to enable honeypot spam protection:

<input 
  type="text" 
  name="_honey" 
  style="display:none" 
  tabindex="-1" 
  autocomplete="off" 
/>

Bots fill in every field, including hidden ones. This catches them automatically. Legitimate users never see or interact with this field.

If you are using the Formgrid form builder, the honeypot field is added automatically. No extra code needed.

The Bottom Line

Every form backend on this list will get your form submissions to your inbox. The question is what happens after that.

If you want to just receive emails, Formspree, Basin, and Web3Forms all work fine. Pick the one with the free tier that fits your volume.

If you want to actually manage the leads that come through those forms, know who you contacted, set follow-up reminders, and track how many enquiries became customers, then Formgrid is the only option on this list that does that without requiring a separate CRM.

For most developers building client sites or running small businesses, the lead management features pay for themselves the first time you close a deal you would otherwise have forgotten to follow up on.

👉 Start free at Formgrid No credit card required.

Why I Use Formgrid for Every Client Website I Build

Thu, 18 Jun 2026 16:49:24 +0000

A few months ago, I was building a website for my web design agency at leadsgrid.co.

I had the homepage done. The services page was looking good. The industry landing pages were ready. Everything was working.

Then I got to the contact form.

The Problem Every Web Developer Hits

I needed a lead capture form on the site. Not just a contact form that sends me an email. A proper form that would:

Notify me immediately when someone enquires. Store every submission somewhere I could track it. Let me see which enquiries I had followed up on and which ones I had not. Tell me which marketing channel sent each lead.

I had built this before. I knew what it involved.

A PHP backend to receive the POST request. An email sending library to format and deliver the notification. A database to store submissions. A dashboard to view them. Spam protection so bots do not flood the inbox. Something to track UTM parameters.

I looked at my shared hosting on Namecheap. cPanel. PHP 8. MySQL.

I thought: I could build this.

Then I thought: I already built this. It is called Formgrid.

Why I Almost Did Not Use My Own Tool

Here is the thing about building a product. You spend so much time inside it, thinking about edge cases and user flows and feature gaps, that you sometimes forget to step back and see what it actually does.

I almost went down the cPanel route out of habit. The same habit that makes developers spin up a Node.js backend and configure Nodemailer for a contact form when a better option already exists.

What stopped me was a simple question:

If I were not the founder of Formgrid and I needed a form backend for a static agency site right now, what would I use?

The answer was obvious.

What I Actually Did

I pointed the enquiry form on leadsgrid.co at a Formgrid endpoint.

<form action="https://formgrid.dev/api/f/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Your Email" required />
  <select name="package">
    <option value="">Choose a package</option>
    <option value="Lead Starter">Lead Starter $500</option>
    <option value="Lead Engine">Lead Engine $950</option>
    <option value="Lead Machine">Lead Machine $1,500</option>
  </select>
  <textarea name="message" placeholder="Tell me about your business">