Forem: Allen Jones

How to Build a $15K Web Design Agency Landing Page With Next.js and Formgrid

Allen Jones — Fri, 08 May 2026 23:40:33 +0000

Most web design agencies charge between $5K and $20K
for a professional landing page. The difference between
a $2K page and a $15K page is rarely the design.
Both might look clean and modern. Both might have good copy.

The difference is what happens after a visitor arrives.

A $2K page has a contact form that sends an email. The
email gets buried. The lead goes cold. The agency never
knows whether that visitor came from Google, a referral, or a paid ad.

A $15K page has a lead capture system. Every enquiry is tracked. Every lead has a status. Every follow-up has a reminder. The agency knows exactly which marketing channels are bringing clients that actually pay.

This tutorial builds the second type. You will build a professional agency landing page in Next.js with a lead capture form powered by Formgrid. Every enquiry becomes a tracked lead with Google Sheets sync built in. No Zapier needed. No separate CRM required.

By the end, you will have a page you can use for your own agency or adapt for clients, and a lead tracking system that works from day one.

What You Are Building

Here is exactly what this tutorial produces:

A professional multi-section agency landing page in
Next.js with a hero section, services overview, social
proof, pricing packages, and a contact and quote request form at the bottom.

Every form submission goes to Formgrid, which turns it into a tracked lead instantly. The lead appears in your Formgrid dashboard with a status of New. It also appears as a new row in a Google Sheet that your whole team can see in real time. You can mark it Contacted when
you reach out, add notes from the conversation, set a follow-up reminder, and mark it Converted when it becomes a paying client.

The stack is Next.js for the frontend, Formgrid for form handling and lead tracking, and Google Sheets as
a shared team dashboard. No backend to build. No
database to manage. No Zapier bill at the end of the month.

Why Most Agency Sites Fail to Convert

Before building anything, it helps to understand why most agency landing pages underperform.

The most common problem is that the contact form is
treated as an afterthought. It sits on a separate Contact page that most visitors never navigate to deliberately.
They land on the homepage, browse the portfolio, and leave without making contact because the path to enquiring is one step too long.

The second problem is that there is no system for what happens after the enquiry arrives. It lands in an email inbox.
The agency responds when they can. There is no record of which enquiries got followed up on, which ones went cold, and no way to know which marketing channel sent them in the first place.

The third problem is that most agency sites look credible but do not build trust fast enough. Visitors need to see specific results, specific client names, and a specific next step within the first few seconds of landing on the page. Vague statements about being
passionate about design, do not convert.

This tutorial fixes all three problems.

Prerequisites

Before starting, make sure you have:

Node.js 18 or higher installed
A Formgrid account at formgrid.dev (free)
A Google account for Sheets integration
Basic familiarity with Next.js and React

Step 1: Set Up Your Next.js Project

Create a new Next.js project:

npx create-next-app@latest agency-landing \
  --typescript --tailwind --app
cd agency-landing
npm run dev

Open localhost:3000 and confirm the default Next.js page loads.

Step 2: Create Your Formgrid Form

Before writing any code, set up your Formgrid form so you have the endpoint URL ready.

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

Click New Form and name it something like "Agency
Enquiries" or "Proposal Request Form".
Click Create Form.

Go to the Overview tab and copy your endpoint URL.
It will look like this:
https://api.formgrid.dev/api/f/form_id

Save this URL. You will use it in your form component.

Step 3: Build the Page Structure

Replace the contents of app/page.tsx with this
base structure:

import Hero from '@/components/Hero'
import Services from '@/components/Services'
import SocialProof from '@/components/SocialProof'
import Pricing from '@/components/Pricing'
import ContactForm from '@/components/ContactForm'

export default function Home() {
  return (
    <main>
      <Navbar/>
      <Hero />
      <Services />
      <SocialProof />
      <Pricing />
      <ContactForm />
    </main>
  )
}

Create a components folder inside app and build
each section as a separate component.

Step 4: Build the Hero Section

Create app/components/Hero.tsx:

import Image from 'next/image'

const metrics = [
    { label: 'Revenue generated for clients', value: '$6.8M' },
    { label: 'Average increase in qualified leads', value: '214%' },
    { label: 'Projects shipped with measurable growth', value: '92' },
]

export default function Hero() {
    return (
        <section className="relative overflow-hidden bg-[#06070b] px-6 pt-28 pb-20 text-white md:pt-36">
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(250,204,21,0.2),transparent_35%),radial-gradient(circle_at_80%_20%,rgba(56,189,248,0.15),transparent_30%)]" />
            <div className="relative mx-auto grid w-full max-w-6xl items-center gap-14 lg:grid-cols-[1fr_1fr]">
                <div>
                    <p className="mb-5 text-xs font-semibold uppercase tracking-[0.32em] text-amber-300">
                        Precision web design for serious growth
                    </p>
                    <h1 className="font-display max-w-3xl text-4xl font-black leading-[0.92] tracking-[-0.02em] text-white md:text-5xl lg:text-6xl">
                        Your next website should feel premium and perform like a sales team
                    </h1>
                    <p className="mt-7 max-w-xl text-base leading-7 text-slate-300 md:text-lg">
                        We design fast conversion ready websites for agencies and software
                        brands that need more demand from the same traffic.
                    </p>

                    <div className="mt-10 flex flex-wrap gap-4">
                        <a
                            href="#contact"
                            className="rounded-full bg-amber-300 px-7 py-3 text-sm font-semibold uppercase tracking-[0.2em] text-slate-900 transition hover:bg-amber-200"
                        >
                            Book your strategy call
                        </a>
                        <a
                            href="#services"
                            className="rounded-full border border-slate-600 px-7 py-3 text-sm font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-slate-400 hover:text-white"
                        >
                            Explore capabilities
                        </a>
                    </div>

                    <div className="mt-14 grid gap-4 sm:grid-cols-3">
                        {metrics.map((metric) => (
                            <div
                                key={metric.label}
                                className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 backdrop-blur"
                            >
                                <p className="text-3xl font-semibold text-amber-300">{metric.value}</p>
                                <p className="mt-2 text-xs uppercase tracking-[0.16em] text-slate-400">
                                    {metric.label}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>

                <div className="relative">
                    <div className="absolute -inset-4 rounded-[2rem] bg-gradient-to-tr from-amber-300/30 to-cyan-300/20 blur-2xl" />
                    <div className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-slate-950/70 p-3 shadow-[0_24px_80px_rgba(0,0,0,0.55)]">
                        <Image
                            src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1600&q=80"
                            alt="Creative studio workspace with premium website design presentation"
                            width={1200}
                            height={900}
                            className="h-[390px] w-full rounded-[1.5rem] object-cover md:h-[470px] lg:h-[530px]"
                            priority
                        />
                        <div className="mt-4 rounded-xl border border-white/10 bg-black/40 p-4">
                            <p className="text-xs uppercase tracking-[0.2em] text-slate-300">
                                Active project dashboard
                            </p>
                            <p className="mt-2 text-sm text-slate-200">
                                Lead conversion this month is up 39 percent after launch
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

Step 5: Build the Navigation Bar

Create app/components/Navbar.tsx

'use client'

import { useState } from 'react'

const navItems = [
  { label: 'Services', href: '#services' },
  { label: 'Results', href: '#results' },
  { label: 'Pricing', href: '#pricing' },
  { label: 'Contact', href: '#contact' },
]

export default function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  const handleNavClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    href: string
  ) => {
    e.preventDefault()
    const target = document.querySelector(href)
    if (!target) return
    target.scrollIntoView({ behavior: 'smooth', block: 'start' })
    setIsMenuOpen(false)
  }

  return (
    <header className="fixed inset-x-0 top-0 z-50 px-6 pt-5">
      <nav className="mx-auto w-full max-w-6xl rounded-2xl border border-white/10 bg-slate-950/70 px-5 py-3 backdrop-blur md:px-7">
        <div className="flex items-center justify-between">
          <a href="#" className="text-sm font-semibold uppercase tracking-[0.2em] text-white">
            AGENCY STUDIO
          </a>

          <ul className="hidden items-center gap-7 md:flex">
            {navItems.map((item) => (
              <li key={item.href}>
                <a
                  href={item.href}
                  onClick={(e) => handleNavClick(e, item.href)}
                  className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-300 transition hover:text-white"
                >
                  {item.label}
                </a>
              </li>
            ))}
          </ul>

          <div className="flex items-center gap-3">
            <a
              href="#contact"
              onClick={(e) => handleNavClick(e, '#contact')}
              className="hidden rounded-full bg-amber-300 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-900 transition hover:bg-amber-200 md:inline-block md:px-5"
            >
              Book call
            </a>
            <button
              type="button"
              aria-label="Toggle navigation menu"
              aria-expanded={isMenuOpen}
              onClick={() => setIsMenuOpen((prev) => !prev)}
              className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 text-slate-200 transition hover:border-white/30 hover:text-white md:hidden"
            >
              <span className="text-lg">{isMenuOpen ? 'x' : '='}</span>
            </button>
          </div>
        </div>

        {isMenuOpen && (
          <div className="mt-4 border-t border-white/10 pt-4 md:hidden">
            <ul className="space-y-3">
              {navItems.map((item) => (
                <li key={`mobile-${item.href}`}>
                  <a
                    href={item.href}
                    onClick={(e) => handleNavClick(e, item.href)}
                    className="block rounded-lg px-2 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:bg-white/5 hover:text-white"
                  >
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
            <a
              href="#contact"
              onClick={(e) => handleNavClick(e, '#contact')}
              className="mt-4 inline-block rounded-full bg-amber-300 px-5 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-900 transition hover:bg-amber-200"
            >
              Book call
            </a>
          </div>
        )}
      </nav>
    </header>
  )
}

Step 6: Build the Services Section

Create app/components/Services.tsx:

import Image from 'next/image'

const services = [
  {
    title: 'Demand focused websites',
    description:
      'A complete website system built to guide visitors from curiosity to qualified enquiry.',
    deliverables: [
      'Messaging architecture',
      'Visual identity direction',
      'Conversion focused pages',
    ],
    image:
      'https://images.unsplash.com/photo-1487014679447-9f8336841d58?auto=format&fit=crop&w=1600&q=80',
  },
  {
    title: 'Premium launch experiences',
    description:
      'Launch pages and campaign experiences engineered to make your offer feel impossible to ignore.',
    deliverables: [
      'Launch strategy workshop',
      'Sales page copy structure',
      'Rapid split test setup',
    ],
    image:
      'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1600&q=80',
  },
  {
    title: 'Client acquisition systems',
    description:
      'Connected forms analytics and follow up logic so every qualified lead reaches your team instantly.',
    deliverables: [
      'Advanced enquiry flows',
      'CRM and sheet automation',
      'Performance reporting',
    ],
    image:
      'https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1600&q=80',
  },
]

export default function Services() {
  return (
    <section id="services" className="bg-[#090b10] px-6 py-24 text-white md:py-32">
      <div className="mx-auto w-full max-w-6xl">
        <div className="mb-14 flex flex-wrap items-end justify-between gap-8">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.32em] text-cyan-300">
              What your investment includes
            </p>
            <h2 className="mt-4 max-w-3xl text-4xl font-semibold leading-tight text-white md:text-5xl">
              Every engagement combines strategic thinking with polished execution
            </h2>
          </div>
          <p className="max-w-md text-sm leading-7 text-slate-300">
            You work directly with senior designers and developers from kickoff to
            launch so your project keeps speed and quality.
          </p>
        </div>

        <div className="grid gap-6 lg:grid-cols-3">
          {services.map((service) => (
            <div
              key={service.title}
              className="overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] shadow-[0_20px_50px_rgba(0,0,0,0.35)] transition hover:-translate-y-1 hover:border-cyan-300/30"
            >
              <Image
                src={service.image}
                alt={service.title}
                width={1000}
                height={700}
                className="h-52 w-full object-cover"
              />
              <div className="p-7">
                <h3 className="text-2xl font-semibold text-white">{service.title}</h3>
                <p className="mt-3 text-sm leading-7 text-slate-300">
                  {service.description}
                </p>
                <ul className="mt-6 space-y-2">
                  {service.deliverables.map((item) => (
                    <li key={item} className="text-sm text-slate-200">
                      {item}
                    </li>
                  ))}
                </ul>
                <a
                  href="#contact"
                  className="mt-7 inline-block rounded-full border border-slate-500 px-5 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-cyan-300 hover:text-cyan-200"
                >
                  Start this scope
                </a>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-10 rounded-3xl border border-white/10 bg-slate-950/70 p-8 md:p-10">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-cyan-300">
            Delivery confidence
          </p>
          <p className="mt-3 max-w-4xl text-lg leading-8 text-slate-200">
            Every project follows a clear sequence with weekly checkpoints design
            review sessions and launch QA so your team sees progress at every step.
          </p>
        </div>
      </div>
    </section>
  )
}

Step 6: Build the Social Proof Section

Create app/components/SocialProof.tsx:

import Image from 'next/image'

const testimonials = [
  {
    quote:
      'This launch gave our team instant credibility. Clients now say our site looks like the top firm in our market.',
    name: 'Elena Ross',
    title: 'Managing Partner at Meridian Legal',
    image:
      'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?auto=format&fit=crop&w=500&q=80',
  },
  {
    quote:
      'Our enquiry quality improved within the first week. We closed more deals without increasing ad spend.',
    name: 'James Holloway',
    title: 'Founder at North Ridge Growth',
    image:
      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=500&q=80',
  },
  {
    quote:
      'The experience feels premium from first click to submission. Every detail reflects confidence and trust.',
    name: 'Priya Raman',
    title: 'Marketing Director at Atlas Health',
    image:
      'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=500&q=80',
  },
]

export default function SocialProof() {
  return (
    <section id="results" className="bg-[#06070b] px-6 py-24 text-white md:py-32">
      <div className="mx-auto w-full max-w-6xl">
        <div className="mb-14 flex flex-wrap items-end justify-between gap-8">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.32em] text-amber-300">
              Trusted by ambitious teams
            </p>
            <h2 className="mt-4 text-4xl font-semibold leading-tight text-white md:text-5xl">
              Client stories from recent launches
            </h2>
          </div>
          <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-6 py-4">
            <p className="text-xs uppercase tracking-[0.2em] text-slate-400">
              Average launch rating
            </p>
            <p className="mt-2 text-3xl font-semibold text-amber-300">4.98</p>
          </div>
        </div>

        <div className="grid gap-6 md:grid-cols-3">
          {testimonials.map((t) => (
            <article
              key={t.name}
              className="rounded-3xl border border-white/10 bg-white/[0.03] p-7"
            >
              <div className="mb-5 flex items-center gap-4">
                <Image
                  src={t.image}
                  alt={t.name}
                  width={70}
                  height={70}
                  className="h-14 w-14 rounded-full border border-white/15"
                />
                <div>
                  <p className="text-sm font-semibold text-white">{t.name}</p>
                  <p className="text-xs uppercase tracking-[0.14em] text-slate-400">
                    {t.title}
                  </p>
                </div>
              </div>
              <p className="text-sm leading-7 text-slate-200">
                &quot;{t.quote}&quot;
              </p>
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}

Step 7: Build the Pricing Section

Create app/components/Pricing.tsx:

const packages = [
  {
    name: 'Essential',
    price: '$6000',
    description: 'For teams that need a refined digital presence quickly',
    features: [
      'Complete homepage and service pages',
      'Offer and messaging workshop',
      'Lead enquiry form and automation setup',
      'Performance setup and launch QA',
    ],
  },
  {
    name: 'Signature',
    price: '$11000',
    description: 'Our most selected package for serious growth campaigns',
    features: [
      'High fidelity brand aligned design system',
      'Custom copy structure for each major page',
      'Conversion journey and analytics map',
      'Team enablement and launch training session',
      'Thirty day optimization support',
    ],
    featured: true,
  },
  {
    name: 'Flagship',
    price: '$15000',
    description: 'Complete world class website program for market leaders',
    features: [
      'Full strategy discovery and growth planning',
      'Premium UI system and advanced interactions',
      'Integrated lead qualification logic',
      'Content framework and authority sections',
      'Ninety day advisory support after launch',
    ],
  },
]

export default function Pricing() {
  return (
    <section id="pricing" className="bg-[#090b10] px-6 py-24 text-white md:py-32">
      <div className="mx-auto w-full max-w-6xl">
        <p className="text-xs font-semibold uppercase tracking-[0.32em] text-amber-300">
          Investment tiers
        </p>
        <h2 className="mt-4 text-4xl font-semibold leading-tight text-white md:text-5xl">
          Pick the level that matches your growth targets
        </h2>

        <div className="mt-12 grid gap-6 lg:grid-cols-3">
          {packages.map((pkg) => (
            <article
              key={pkg.name}
              className={`rounded-3xl border p-8 ${
                pkg.featured
                  ? 'border-amber-300 bg-amber-300 text-slate-900 shadow-[0_20px_60px_rgba(250,204,21,0.22)]'
                  : 'border-white/10 bg-white/[0.03]'
              }`}
            >
              <p
                className={`text-xs font-semibold uppercase tracking-[0.2em] ${
                  pkg.featured ? 'text-slate-800' : 'text-amber-300'
                }`}
              >
                {pkg.name}
              </p>
              <p className="mt-4 text-5xl font-semibold">{pkg.price}</p>
              <p
                className={`mt-3 text-sm leading-7 ${
                  pkg.featured ? 'text-slate-800' : 'text-slate-300'
                }`}
              >
                {pkg.description}
              </p>

              <ul className="mt-7 space-y-3">
                {pkg.features.map((feature) => (
                  <li key={feature} className="flex items-start gap-3 text-sm">
                    <span className={pkg.featured ? 'text-slate-900' : 'text-amber-300'}>
                      ✓
                    </span>
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}

Step 8: Build the Contact Form With Formgrid

This is the most important section. Create
app/components/ContactForm.tsx:

'use client'

import Image from 'next/image'
import { useState } from 'react'

export default function ContactForm() {
    const [status, setStatus] = useState<'idle' | 'sending' | 'success' | 'error'>(
        'idle'
    )

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

    async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault()

        const form = e.currentTarget
        const honey = (form.elements.namedItem('_honey') as HTMLInputElement).value

        if (honey) return

        setStatus('sending')

        const formData = new FormData(form)

        const name = `${formData.get('firstName') ?? ''} ${formData.get('lastName') ?? ''}`.trim()
        const service = (formData.get('service') as string) ?? 'Unknown service'
        const budget = (formData.get('budget') as string) ?? 'No budget selected'

        formData.set('_subject', `New Enquiry: ${name} | ${service} | ${budget}`)

        try {
            const res = await fetch(FORMGRID_ENDPOINT, {
                method: 'POST',
                body: formData,
            })

            if (res.ok) {
                setStatus('success')
            } else {
                setStatus('error')
            }
        } catch {
            setStatus('error')
        }
    }

    return (
        <section id="contact" className="bg-[#06070b] px-6 py-24 text-white md:py-32">
            <div className="mx-auto grid w-full max-w-6xl gap-8 lg:grid-cols-[0.9fr_1.1fr]">
                <aside className="rounded-3xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <p className="text-xs font-semibold uppercase tracking-[0.3em] text-amber-300">
                        Let us build your next growth engine
                    </p>
                    <h2 className="mt-4 text-3xl font-semibold leading-tight md:text-4xl">
                        Request your custom proposal
                    </h2>
                    <p className="mt-4 text-sm leading-7 text-slate-300">
                        Share your goals and our team will send scope pricing and timeline
                        recommendations within one business day.
                    </p>
                    <Image
                        src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1600&q=80"
                        alt="Agency team reviewing website strategy"
                        width={1000}
                        height={1000}
                        className="mt-6 rounded-2xl border border-white/10"
                    />
                </aside>

                {status === 'success' ? (
                    <div className="rounded-3xl border border-amber-300 bg-amber-300/10 p-10 text-center">
                        <p className="text-xs font-semibold uppercase tracking-[0.25em] text-amber-200">
                            Enquiry received
                        </p>
                        <p className="mt-4 text-3xl font-semibold text-white">Thank you</p>
                        <p className="mt-3 text-sm text-slate-200">
                            We will reply with your proposal details within one business day.
                        </p>
                    </div>
                ) : (
                    <form
                        onSubmit={handleSubmit}
                        className="rounded-3xl border border-white/10 bg-slate-950/60 p-6 md:p-8"
                    >
                        <input
                            type="text"
                            name="_honey"
                            style={{ display: 'none' }}
                            tabIndex={-1}
                            autoComplete="off"
                        />

                        <div className="grid gap-4 sm:grid-cols-2">
                            <label className="text-sm text-slate-300">
                                First name
                                <input
                                    type="text"
                                    id="firstName"
                                    name="firstName"
                                    required
                                    placeholder="Jordan"
                                    className="mt-2 w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-white outline-none transition focus:border-amber-300"
                                />
                            </label>

                            <label className="text-sm text-slate-300">
                                Last name
                                <input
                                    type="text"
                                    id="lastName"
                                    name="lastName"
                                    required
                                    placeholder="Reed"
                                    className="mt-2 w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-white outline-none transition focus:border-amber-300"
                                />
                            </label>
                        </div>

                        <label className="mt-4 block text-sm text-slate-300">
                            Email address
                            <input
                                type="email"
                                id="email"
                                name="email"
                                required
                                placeholder="jordan@company.com"
                                className="mt-2 w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-white outline-none transition focus:border-amber-300"
                            />
                        </label>

                        <div className="mt-4 grid gap-4 sm:grid-cols-2">
                            <label className="text-sm text-slate-300">
                                Service needed
                                <select
                                    id="service"
                                    name="service"
                                    required
                                    className="mt-2 w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-white outline-none transition focus:border-amber-300"
                                >
                                    <option value="">Select service</option>
                                    <option>Demand focused website</option>
                                    <option>Premium launch experience</option>
                                    <option>Client acquisition system</option>
                                </select>
                            </label>

                            <label className="text-sm text-slate-300">
                                Budget range
                                <select
                                    id="budget"
                                    name="budget"
                                    className="mt-2 w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-white outline-none transition focus:border-amber-300"
                                >
                                    <option value="">Select range</option>
                                    <option>$6000 to $9000</option>
                                    <option>$10000 to $14000</option>
                                    <option>$15000 and above</option>
                                </select>
                            </label>
                        </div>

                        <label className="mt-4 block text-sm text-slate-300">
                            Project goals
                            <textarea
                                id="message"
                                name="message"
                                rows={6}
                                required
                                placeholder="Tell us what you are launching who you want to reach and what success looks like."
                                className="mt-2 w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-white outline-none transition focus:border-amber-300"
                            />
                        </label>

                        <button
                            type="submit"
                            disabled={status === 'sending'}
                            className="mt-6 rounded-full bg-amber-300 px-7 py-3 text-sm font-semibold uppercase tracking-[0.2em] text-slate-900 transition hover:bg-amber-200 disabled:cursor-not-allowed disabled:opacity-60"
                        >
                            {status === 'sending' ? 'Sending' : 'Send proposal request'}
                        </button>

                        {status === 'error' && (
                            <p className="mt-4 text-sm text-red-300">
                                Something went wrong. Please try again or contact us by email.
                            </p>
                        )}
                    </form>
                )}
            </div>
        </section>
    )
}

Replace your-form-id in the FORMGRID_ENDPOINT
constant with your actual Formgrid form ID from
Step 2.

Step 9: Connect Google Sheets

In your Formgrid dashboard, go to your form settings
and click the Integrations tab. Connect your Google
account and select the sheet where you want enquiries
to land.

From this point, every form submission creates a new row in that sheet automatically. The columns match your form fields exactly. Your team can see new enquiries in real time without logging into anything.

Step 10: Test the Full Flow

Start your development server:

npm run dev

Navigate to the contact form section and submit a test enquiry with real-looking data.

Within seconds, you should see three things happen.

The submission also appears in your
Leads tab as a tracked lead with
a status, a timestamp, and all the Submitter details.

The submission appears in your Formgrid dashboard with a status of New.

An email notification arrives at your Formgrid signup email with the full submission details.

A new row appears in your connected Google Sheet with every field populated automatically.

If all three appear, your lead capture system is working correctly.

The Lead Pipeline in Action

Go to your Formgrid dashboard and click on the test submission you just created.

You will see the lead with a status of New. This is the starting state for every enquiry that arrives.

Click the status and change it to Contacted.
This records that you have reached out to this person.
Your conversion rate updates automatically.

Click Add Note and type something like "Spoke on
the phone. Interested in the Growth package.
Needs two weeks to confirm budget." That note lives on the lead permanently.

Click Set Follow Up and choose a date five days from now.
On that date, Formgrid will email you with the lead details and your note attached. You will not need to remember to follow up. The
reminder does it for you.

This is the difference between an agency that closes 40% of its enquiries and one that closes 15%. Not skill. Not price. Just follow up on consistency.

What Makes This a $15K Page

The page you just built has every element that separates a premium agency site from a basic one.

A clear value proposition in the hero that speaks directly to the outcome the client wants. Not "we are passionate about design" but "we build websites that convert."

Specific social proof with real numbers. Percentage lift in conversions. Revenue generated. Projects delivered. Vague testimonials do not build trust. Specific results do.

Service packages with transparent pricing. Clients
who see pricing upfront are more qualified when they
enquire. They have already decided the price is acceptable before filling out the form.

A strong single call to action. Every section points to the same place. Get a Quote. Nothing competes with it.

Lead tracking is built in from day one. This is the element most agency sites completely miss. Every enquiry is captured, tracked, and followed up on systematically. No lead goes cold because someone forgot to reply.

The last point is what justifies the $15K price tag to clients. You are not just delivering a website. You are delivering a system that actively generates and tracks revenue for their business.

Using This for Your Own Agency

If you are building this for your own freelance or agency business, replace the placeholder copy with your real services, real results, and real pricing.

Add your actual testimonials. Replace the statistics
with real numbers from your own projects. Update the service descriptions to match what you actually build.

The form endpoint is already connected to Formgrid.
The Google Sheets sync is already configured. The lead pipeline is already working.

Every client enquiry that comes in through this page will appear in your dashboard as a tracked lead, in your Google Sheet as a new row, and in your inbox as an email notification within seconds of submission.

Deploying to Production

When you are ready to go live, deploy to Vercel in one command:

npx vercel

Vercel detects Next.js automatically and deploys with zero configuration. Your form will work identically in production because Formgrid handles all the server-side processing.

Final Thoughts

The gap between a $2K website and a $15K website
is not the design framework, the number of animations, or the size of the portfolio section.

It is whether the site has a system for turning visitors into trackable, followable, convertible leads.

A beautiful static site with a contact form that sends emails is a $2K site. The same design with Formgrid powering the form, Google Sheets sync running in the background, and a lead pipeline
tracking every enquiry from New to Converted is a $15K site.

The only technical difference is one endpoint URL and a ten-minute Formgrid setup.

If you want to build this for your own agency or for a client, start free at
formgrid.dev. The form
backend, lead pipeline, and Google Sheets sync
are all included from day one.

For a done-for-you version, where we build the entire system for you, see our
agency setup packages.

👉 Start free at formgrid.dev

AI Built Your HTML Form. Now What? How to Handle Form Submissions Without a Backend

Allen Jones — Fri, 08 May 2026 10:08:00 +0000

You asked an AI tool to build a contact form for you. It delivered
clean, well-structured HTML in about 30 seconds. You copied
it into your site, opened it in the browser, filled it out,
clicked submit, and nothing happened.

Maybe you saw a blank page. Maybe the URL changed to something
strange. You may have encountered an error you did not understand.

This is one of the most common problems developers and
non-technical founders run into right now. AI tools have made
it trivially easy to generate beautiful HTML forms. But they
cannot give you the server-side infrastructure those forms
need to actually work.

This post explains exactly why that happens and how to fix it
in about five minutes without writing a single line of backend
code.

The Problem With AI-Generated HTML Forms

When ChatGPT, Claude, or any AI tool generates an HTML form, it produces something like this:

<form action="" method="POST">

  <label for="name">Your Name</label>
  <input
    type="text"
    id="name"
    name="name"
    required
  />

  <label for="email">Email Address</label>
  <input
    type="email"
    id="email"
    name="email"
    required
  />

  <label for="message">Your Message</label>
  <textarea
    id="message"
    name="message"
    rows="5"
    required
  ></textarea>

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

  <button type="submit">Send Message</button>

</form>

This is perfectly valid HTML. The problem is that line:

action="/submit"

That is telling the browser to send the form data to a URL
called /submit on your server. But if you are building a
static site, a landing page, or just a plain HTML file, there
is no server. There is no /submit endpoint. There is nothing
on the other end to receive the data.

When the user clicks Submit, the browser faithfully sends the
data to /submit and gets back either a blank page, a 404 error, or silence.

This is not a bug in your HTML. It is a fundamental limitation
of how static websites work.

Why Static Sites Cannot Process Forms on Their Own

A static site is just files. HTML, CSS, and maybe some
JavaScript. When someone visits your site, their browser
downloads those files and displays them. That is it. There
is no running program, no database, no code executing on a
server in response to user input.

Form submissions require a server because something has to:

Receive the POST request when the user submits
Validate the data
Store it somewhere
Send you an email notification
Return a response to the user

None of that happens automatically. All of it requires
server-side code running somewhere.

In the past, this meant you had to either build your own
backend in Node.js, PHP, or Python, pay for a server to
run it, configure email sending, handle spam protection,
and maintain the whole thing forever.

For a simple contact form on a landing page, that is a
massive amount of overhead. Most people either gave up or
used a workaround like a mailto link that opens the
user's email client, which is clunky and unreliable.

Today, there is a much better option.

The Solution: A Form Backend Service

A form backend service acts as the server that your static site
does not have. Instead of pointing your form action at a
URL on your own server, you point it at an endpoint URL
provided by the service.

When someone submits your form, the browser sends the data
to that endpoint. The service receives it, validates it,
stores it, sends you an email notification, and returns
a response to the user. All of it happens automatically.
You never have to think about servers, email configuration,
spam filtering, or database management.

Your static site stays completely static. You just change
one line in your HTML form.

Fixing the Form With Formgrid

Formgrid is an open source form
backend that works with any HTML form on any website
regardless of where it is hosted.

Every submission becomes a tracked lead in your dashboard
with a status, a notes field, and a follow-up reminder.
Submissions also land in Google Sheets automatically with
no Zapier required.

Here is exactly how to connect your ChatGPT-generated form
to Formgrid in five minutes.

Step 1: Create Your Free Formgrid Account

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

The free plan includes unlimited forms and 25 submissions
per month, which is more than enough to get started.

Step 2: Create a New Form

Once you are in your dashboard, click New Form. Give it a
descriptive name like "Contact Form" or "Quote Request".
Click Create Form.

Step 3: Copy Your Endpoint URL

After creating your form, go to the Overview tab. You will
see your unique endpoint URL. It will look like this:
https://api.formgrid.dev/forms/your-form-id/submissions

Copy this URL. This is the address your form will submit
data to.

Step 4: Update Your HTML Form

Find the action attribute in your ChatGPT-generated form:

<form action="/submit" method="POST">

Replace it with your Formgrid endpoint URL:

<form action="https://api.formgrid.dev/forms/your-form-id/submissions" method="POST">

That is the only change you need to make. One line.
Everything else in your form stays exactly as ChatGPT
generated it.

Step 5: Add a Honeypot Field

While you are in the form code, add this hidden field
anywhere inside your form tag:

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

This is a honeypot field. Real users never see it or fill
it in. Bots that automatically fill every field they find
will fill it in, and Formgrid will reject that submission
silently. It filters out the vast majority of spam with
zero friction for real users.

Step 6: Test It

Open your form in a browser, fill it out with real test
data, and click submit. Within seconds, you should receive
an email notification at the address you signed up with.

Open your Formgrid dashboard. You will see your test
submission listed as a new lead with a status of New.
That submission is now tracked. You can add notes to it,
mark it as Contacted when you follow up, and mark it as
Converted when it becomes a customer or sale.

Step 7: Connect Google Sheets

In your form settings, go to the Integrations tab and
connect your Google account. Select or create a Google
Sheet where you want submissions to land.

From this point on, every form submission appears as a
new row in that sheet automatically. No Zapier. No extra
tools. No additional monthly cost.

If you have a team or a business partner, they can view
that sheet in real time without logging into anything new.

The Exact ChatGPT Prompt to Generate a Working Form

If you want to start from scratch, here is the prompt
that generates a clean HTML form ready to connect to
Formgrid:
Build me a clean HTML contact form with these fields:
name (text, required), email (email, required),
message (textarea, required). Include a hidden honeypot
field named "_honey" with style="display:none".
Set the form method to POST. Leave the action
attribute empty for now. Use clean semantic HTML
with labels for every field. No CSS needed.

ChatGPT will generate something like this:

<form action="" method="POST">

  <label for="name">Your Name</label>
  <input
    type="text"
    id="name"
    name="name"
    required
  />

  <label for="email">Email Address</label>
  <input
    type="email"
    id="email"
    name="email"
    required
  />

  <label for="message">Your Message</label>
  <textarea
    id="message"
    name="message"
    rows="5"
    required
  ></textarea>

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

  <button type="submit">Send Message</button>

</form>

Replace the empty action attribute with your Formgrid
endpoint URL and the form is fully functional.

A Real Example: The T-Shirt Business

One of the businesses using Formgrid today is a custom
T-shirt printing shop. The owner needed a quote request
form where clients could describe their order and upload
their design files.

He used ChatGPT to generate the HTML form. It produced
clean code with all the right fields in about a minute.
He connected it to Formgrid, enabled file uploads on the
Premium plan, and pointed out the Google Sheets integration
at a shared spreadsheet that his team uses.

Now every quote request arrives in his inbox with the
design file attached. The request appears in the shared
sheet immediately, so his team can see it without checking
email. He marks each request as Contacted when he follows
up and Converted when the order is confirmed.

He went from managing everything through email to having
a proper lead tracking system. No developer was involved.
Total setup time was under 10 minutes. Total monthly cost
is $8.

What Happens After Submission

This is the part most tutorials skip. Getting the form
to submit is only half the problem. What happens to that
data after it lands in your inbox matters just as much.

With a basic form backend, you get an email, and that is it.
The email gets buried. You forgot to follow up. A potential
customer moves on.

Formgrid approaches this differently. Every submission
becomes a tracked lead with three states:

New means the submission just arrived and has not been
actioned yet.

Contacted means you have reached out to this person.

Converted means they became a customer, a sale, or
whatever outcome you are tracking.

You can also add notes to any lead after a conversation,
set a follow-up date, and get an email reminder on that
date with their details and your notes attached. Warm
leads never go cold because you forgot to follow up.

When to Use a Form Backend vs Building Your Own

Use a form backend like Formgrid if you need a contact
form, a quote request form, a registration form, or any
simple lead capture on a static site or landing page.
You want email notifications, spam protection, and a way
to track submissions without maintaining a server.

Build your own backend if you need complex custom logic
tied to your specific database, authentication that is
deeply integrated with your own system, or you are
building a full SaaS product where form handling is just
one small piece of a larger application.

For 90% of landing pages, portfolios, and small businesses
sites, and indie projects, a form backend handles
everything you need without the overhead of a full server.

Final Thoughts

AI tools have made it easier than ever to build the front
end of almost anything. A landing page, a portfolio, a
business site, a quote request form. What they cannot do
is give you the infrastructure behind it.

A form backend fills exactly that gap. You keep the
HTML your AI-generated. You add one URL to the action
attribute. Everything else is handled automatically.

If you want to get your ChatGPT-generated form working
in the next five minutes, start free at formgrid.dev](https://formgrid.dev).
No credit card required. No backend to build or maintain.
Just a form that works and a lead tracking system built in
from day one.

👉 Start free at formgrid.dev

The Roofing Contact Form That Actually Gets Homeowners to Submit

Allen Jones — Tue, 05 May 2026 02:47:20 +0000

Here is something most roofing companies never think to check.

Open your own website on your phone. Find the contact form. Try to fill it in while standing up, with one hand, the way a homeowner actually would after noticing something wrong with their roof on a Saturday afternoon.

How many fields are there? How long does it take to get to the submit button? Does the keyboard cover half the screen when you tap on a field? Does it ask for information you genuinely need before you have even spoken to the person?

Most roofing contact forms fail this test badly. Not because the business owner does not care about enquiries. But because the form was added to the website as an afterthought, nobody tested it as a real user, and the default assumption was that if you put a form on a website people will use it.

They will not. Not if the form creates friction. Not if it feels like paperwork. Not if it is buried at the bottom of a Contact page that a homeowner with a leaking roof in the middle of a rainstorm is never going to navigate to find.

The contact form is one of the highest-leverage elements on a roofing website. Getting it right does not require a redesign. It requires understanding why homeowners abandon forms and removing every single one of those reasons.

Why Roofing Contact Forms Have a Conversion Problem

The fundamental issue is that most roofing contact forms were designed from the perspective of the business, not the homeowner.

The business wants to know the roof size, the year the house was built, the type of roofing material currently installed, the insurance provider, the preferred appointment time, and a detailed description of the problem before they will even schedule a visit.

The homeowner is standing outside looking at a damaged gutter section after a storm. They are on their phone with cold hands. They want to send a quick message to a roofer and have someone call them back.

These two things are completely incompatible. When the form reflects the business's information needs rather than the homeowner's willingness to engage, the homeowner closes the tab and calls the next company on the list.

The goal of the contact form is not to collect everything you will eventually need to do the job. The goal is to start a conversation. Everything else can wait until the phone call.

What the Research Says About Form Completion Rates

The data on form completion is consistent across industries and it is stark for anything on mobile.

Forms with three fields convert at roughly 25 percent. Forms with six fields convert at around 15 percent. Forms with ten or more fields convert at under 10 percent in most studies.

For roofing specifically, the numbers are likely worse because the majority of roofing searches happen on mobile devices. A homeowner searching for a roofer is almost always doing so on their phone. They are either in their driveway looking at the damage, at work during a break, or at home after seeing a water stain spread across the ceiling.

None of those situations is a comfortable desktop-form-filling scenario. They are phone-in-one-hand, quick-message scenarios. A form that takes four minutes to complete on a phone will be abandoned by most of the homeowners who started it.

The Fields That Actually Belong on a Roofing Contact Form

After stripping away everything that serves the business rather than the conversion, a roofing quote request form needs exactly these fields at the point of first contact:

First name, so you know who you are calling and can address them properly when you ring back. Last name is optional at this stage.

Phone number because this is how you will follow up. It is the most important field on the form. Make it required.

Email address as a secondary contact method, so you can send a confirmation that their request was received. Also useful if they do not answer when you call.

Property address so you know where the job is, whether it is in your service area, and so you can look at the property on Google Maps before you call. This saves time and makes the first call more informed.

Type of work as a dropdown with clear options. Full replacement, repair, storm damage, inspection, gutters, not sure. A dropdown is much faster to complete on mobile than a text field, and it gives you the context you need without requiring the homeowner to write a paragraph.

Optional message or photo upload for homeowners who want to give more context or show you the damage. Making this optional is important. Some homeowners will use it. Many will not. Making it required creates unnecessary friction.

That is six fields. Or five if you remove the optional message. That is the form. Everything else comes out in the first phone call.

The Photo Upload Field That Changes Everything

Most roofing contact forms do not include a file upload field. This is a missed opportunity that is specific to roofing in a way that does not apply to most other service businesses.

A homeowner who has spotted damage on their roof is already looking at it. They have their phone in their hand. They took a photo or a video because that is what people do when they see something unexpected. If your form gives them a field to upload that photo, they will use it.

This does three valuable things simultaneously.

It lowers the submission barrier because the homeowner feels like they have communicated the problem properly. They are not just leaving a vague message. They are showing you what they are dealing with. That completeness makes them more likely to submit.

It gives you information that makes your follow-up call more valuable. You can call back and say you looked at the photo, and it looks like the flashing around the chimney rather than the shingles themselves. That level of preparation creates immediate trust. It signals that you are attentive and knowledgeable before you have even visited the property.

It reduces the number of calls required to get to the inspection stage because you have already started the assessment process remotely. Homeowners appreciate not having to explain everything from scratch on the call.

File upload on a roofing contact form converts hesitant submitters into confident ones. It is one of the few form additions that increases rather than decreases completion rates because it replaces the pressure of writing a description with the ease of sharing a photo.

Where the Form Needs to Live on Your Website

Placement is as important as the form itself. A well-designed five-field form on a Contact page that nobody visits is worse than a basic form that appears on every page where a homeowner might arrive from a Google search.

Think about how homeowners actually find roofing websites. They search for something specific. Roof repair after a storm. Roof replacement cost. Roofer near me. They click a result. They land on a page.

That page might be your homepage. It might be your storm damage service page. It might be a blog post about signs of hail damage. It is almost certainly not your Contact page, which they would have to navigate to deliberately.

If the only place your form exists is on the Contact page, a significant portion of your visitors never see it. They land on a service page, read some content, decide they want to enquire, and then have to hunt for a way to reach you. Some find it. Many leave.

The form should appear in at least four places on your website.

On the homepage in a prominent section above the fold or at least without excessive scrolling on mobile. This is the first page many visitors see, and the form should be visible without effort.

At the bottom of each service page so that a visitor who just read your full storm damage restoration page can immediately request an inspection without navigating away. The moment of highest intent is immediately after reading relevant content. The form should be there at that moment.

On a dedicated quote request page that can be linked from everywhere and that Google can index independently for searches like "free roofing quote Virginia" or "request roof inspection."

In the mobile navigation as a sticky button or a prominent link so that on small screens where navigation is compressed, there is always a visible way to reach the form without digging through menus.

The Call to Action That Converts

The text on your submit button and the heading above your form matter more than most website owners realise.

A form headed "Contact Us" with a button that says "Submit" is doing almost no persuasion work. The homeowner knows they are sending a message. They do not need to be told. What they need is reassurance that submitting is the right move and a clear description of what happens next.

Compare these two headings and button combinations:

Version one: "Contact Us" with a "Submit" button.

Version two: "Request Your Free Roof Inspection" with a "Send My Request" button and a line underneath that says "We respond to all requests within 24 hours."

The second version tells the homeowner exactly what they are requesting, what the commitment level is (free, no obligation), and what they can expect after submitting (a response within 24 hours). That clarity reduces the hesitation that causes people to abandon forms at the last step.

Adding a response time commitment next to the submit button is particularly effective for roofing because speed of response is one of the most important factors homeowners use when choosing between contractors. Seeing "We respond within 24 hours" in the moment of submission makes the homeowner feel confident that their enquiry will not disappear into a void.

The Trust Signals That Belong Next to the Form

A homeowner filling in a roofing contact form is making a small but real decision about whether to trust an unfamiliar business with their home and their personal contact details. The form is not just a data collection mechanism. It is a trust checkpoint.

Most roofing websites put their trust signals on a separate Testimonials page or in the About section. By the time a visitor reaches the form, those signals are long gone. The form appears in isolation, asking for personal information from a business the visitor may have found five minutes ago.

Placing trust signals directly adjacent to the form changes this dynamic. A short column next to the form or a strip directly above the submit button showing three to five pieces of evidence significantly increases the likelihood that a hesitant visitor completes the submission.

The most effective trust signals for a roofing firm are:

Your Google rating and number of reviews with a small link to verify. Something as simple as "4.9 stars across 312 Google reviews" next to a star icon is enough. Homeowners check Google reviews before hiring anyone. Showing the rating right next to the form removes the need to leave the page to find that information.

A statement about your crew. "No subcontractors. Every person on your roof is our own employee." This is one of the highest trust concerns homeowners have about roofing companies, and very few put it front and centre where it can actually influence a decision.

Your license number. In states where this is publicly verifiable, displaying it next to the form signals legitimacy in a way that no amount of marketing copy can replicate.

A short response time commitment. "We respond to all quote requests within 24 hours," says the homeowner. Their message will not be ignored.

One or two lines from a genuine customer review. Not a dedicated testimonials section. Just a single sentence from a real customer placed right next to the submit button. "They were the only company that actually told me the truth about what I needed" is more convincing than a three-paragraph testimonial on a separate page that nobody reads.

The Confirmation That Keeps the Lead Warm

What happens after someone submits your form is almost as important as the form itself.

Most roofing contact forms show a generic "Thank you for your message" page or nothing at all. This is a missed opportunity that costs you warm leads.

When a homeowner submits a roofing enquiry, they are in a window of high engagement. They just made a small commitment. They are thinking about their roof and their options. They are open to being guided toward the next step.

A good confirmation page or confirmation message does three things.

It acknowledges the submission specifically. Not "Thanks for contacting us" but "Your roof inspection request has been received." Specific language confirms that the right thing happened and the right person will be getting in touch.

It tells them exactly what happens next. "One of our team will call you within 24 hours to arrange a convenient time for a free inspection." This manages expectations and prevents the homeowner from reaching out to three other roofers in the meantime because they are not sure anyone is coming.

It gives them something to do while they wait. A link to your before and after gallery. A link to your Google reviews. A short paragraph about your inspection process. This keeps them engaged with your business during the gap between submission and your call.

An auto-responder email that goes to their inbox the moment they submit, repeating these three elements, is even more effective because it gives them something to find when they search their email later and can no longer remember which roofing company they contacted.

What the Complete Form Setup Looks Like

Putting all of this together, a roofing contact form that actually converts has the following characteristics.

It lives on every relevant page of the website, including the homepage, each service page, and a dedicated quote request page.

It has five to six fields. First name, phone, email, address, service type as a dropdown, and an optional photo upload.

The heading above the form is specific and action-oriented. "Request Your Free Roof Inspection" or "Get a Free Quote Today" rather than "Contact Us."

The submit button uses active specific language. "Send My Request" or "Request My Free Inspection" rather than "Submit."

A response time commitment appears directly below the submit button. "We respond to all requests within 24 hours."

Trust signals appear adjacent to the form. Star rating and review count, crew statement, license number, and one customer quote.

A good confirmation message appears after submission, explaining what happens next.

An auto-responder email goes to the homeowner immediately after submission, confirming receipt and next steps.

Every submission routes into a lead pipeline where it can be tracked from New to Contacted to Converted rather than disappearing into an email inbox.

And crucially, every submission syncs automatically to a shared Google Sheet so the entire office team sees new enquiries in real time without logging into a separate tool.

The Tool Behind This Setup

Everything described in this post is built using Formgrid.

Formgrid started as a form backend for static websites, then added a drag-and-drop builder that generates shareable form links without requiring any website changes. Every submission becomes a tracked lead with a pipeline, notes, follow-up reminders, and automatic Google Sheets sync.

The free plan is available with no credit card required. The Premium plan at $8 per month adds file uploads for photo submissions, advanced spam protection, CSV export, and Google Sheets sync for up to 500 rows per month.

For roofing companies that want the full system built for them including the landing page, form placement, Google Sheets integration, UTM tracking, and lead pipeline, there is a done-for-you setup starting at $500 one time.

See the full roofing lead generation setup →

The Summary

A roofing contact form that actually gets homeowners to submit is not a complicated piece of technology. It is a simple form in the right place with the right number of fields, the right call to action, and the right trust signals next to it.

Place the form on every relevant page so visitors never have to navigate to find it.

Reduce the fields to five or six. Name, phone, email, address, service type, and optional photo upload.

Use a specific call to action that tells homeowners exactly what they are requesting and what happens next.

Add the photo upload field so homeowners can show you the damage rather than describe it.

Place trust signals directly next to the form rather than on a separate page where nobody sees them.

Show a specific confirmation message and send an auto-responder email after submission so the homeowner knows their message was received and what comes next.

Route every submission into a lead pipeline so nothing gets forgotten between the submission and the callback.

None of this requires rebuilding your website. Each piece is a specific addition or change. Implement them, and the same homeowners who were abandoning your current form will start submitting their enquiries instead.

Want the complete roofing lead generation system set up for your business? Reach out to allen@formgrid.dev, and we can walk through what your website specifically needs.

How to Get More Roofing Quote Requests From Your Website Without Paying for More Ads

Allen Jones — Tue, 05 May 2026 02:32:34 +0000

Most roofing companies facing a slow pipeline reach for the same solution.

They increase the Google Ads budget.
They hire someone to run Facebook campaigns.
They invest in more SEO.
They drive more traffic to the same website, hoping the numbers eventually work in their favor.

Sometimes it helps. Often it does not.

Because the problem was never the traffic.
The problem is what happens to that traffic after it arrives. And
no amount of additional ad spend fixes a website that was never built to convert visitors into enquiries in the first place.

The good news is that getting more quote requests does not require more marketing budget. It requires fixing the parts of your website that are quietly turning away homeowners who were ready to contact you.

This post walks through exactly how to do that.

Why More Traffic Is Not the Answer

Here is the math most roofing companies never look at.

If your website converts 1% of visitors into quote requests, and you are getting 500 visitors per month, you are receiving 5 enquiries.

Doubling your ad spend to get 1,000 visitors gives you ten enquiries.
You spent twice as much and got twice the leads.

But if you fix your conversion rate from one percent to three percent
on the same 500 visitors, you get fifteen enquiries. No additional
ad spend. No additional traffic. Just a website that works harder with what it already has.

The biggest lever most roofing companies are not pulling is
conversion rate. And the fixes are not expensive or technically
complicated. They are specific and actionable.

Fix 1: Put the Quote Form Where Homeowners Actually Are

Open your website on your phone right now. Not on a desktop where
everything looks clean and accessible. On your phone, the way
a homeowner will see it after searching for a roofer during
their lunch break or while standing in their driveway staring at a
damaged section of their roof.

Where is the form?

If the answer is "on the Contact page," you have already lost a
significant portion of visitors who would have filled it in if it were in front of them. Most people do not navigate. They scroll. If they do not see a clear way to reach out on the page they land on, they leave.

The form should appear on your homepage. It should appear on each
service page. If someone lands on your storm damage page from a
Google search, they should be able to request an inspection without
going anywhere else.

Placement is the single most impactful change most roofing
websites can make. It costs nothing to implement, and the results show up immediately.

Fix 2: Reduce the Number of Fields on the Form

Count the fields on your current contact form. If the answer is more
than six, you are leaving enquiries on the table every single day.

Research consistently shows that every additional field on a contact
form reduces the completion rate. A homeowner on their phone with cracked shingles after a storm does not want to fill in their roof size, year of installation, property type, and insurance provider before someone will even call them back.

They want to send their name and number and have a roofer call them.

The information you genuinely need at the point of first contact is simple:

Name so you know who you are calling back.

Phone number so you can actually reach them.

Email as a backup contact.

Type of work, so you know roughly what the conversation is about.

Property address, so you can look it up before the inspection.

An optional message or photo upload for homeowners who want to give more context.

That is it. Everything else can wait until the phone call. The goal
of the form is to start a conversation, not to conduct a
pre-inspection survey.

Fix 3: Make the Call to Action Specific, Not Generic

Look at the button on your contact form. What does it say?

If it says "Submit" or "Send" or "Contact Us" you are missing an
opportunity that costs nothing to fix.

Specific calls to action convert better than generic ones because
they tell the visitor exactly what will happen next. A homeowner
reading "Request Your Free Inspection" knows precisely what they are getting when they submit.
A homeowner reading "Submit" does not know anything except that they
are sending something somewhere.

Test these alternatives:

"Request Your Free Roof Inspection"

"Get a Free Quote Today"

"Send Us Your Roofing Enquiry"

"Book a Free Site Visit"

Any of these outperforms a generic submit button because they reduce
the uncertainty that causes hesitation at the final step.

Fix 4: Add a Photo Upload Field

This one is specific to roofing, and it is consistently underused.

A homeowner who has noticed damage on their roof after a storm is
already standing there looking at it.
They have their phone in their hand. If your form allows them to
upload a photo of the damage, they will. And that photo does two things.

It lowers the friction of the initial enquiry because they feel
like they have communicated the problem properly, rather than just
leaving a vague message.

It gives you a genuine head start on the conversation. You can call
them back with a rough sense of what the job involves rather than
going in completely blind.

File upload is available on the Formgrid Premium plan at $8 per
month. For a roofing company, it is one of the most useful features
on the form because the product being assessed is almost always
visual.

Fix 5: Add Trust Signals Near the Form

Homeowners are making a significant decision when they hand over their contact details to a roofing company.
They are going to let strangers on their roof.
They are going to pay thousands of dollars for work they cannot watch being done. They want to know you are legitimate before they commit to a conversation.

Most roofing websites put trust signals on a separate About page
or bury testimonials at the bottom of the homepage. By the time a
visitor reaches the contact form, the trust signals are long gone.

Put them right next to the form:

A short line about how long you have been operating.

Your Google rating and number of reviews with a link to verify.

A statement about whether you use your own crew or subcontractors.
Homeowners care deeply about this.

One or two sentences from a recent customer about their experience.

Your license number, if you are in a state where this is visible.

These are small additions that significantly reduce the hesitation
between a visitor reading your page and a visitor submitting the form.

Fix 6: Set Up a Lead Pipeline So Nothing Slips Through

Getting more quote requests only helps your business if you actually
follow up on them.

Most roofing companies manage enquiries through email. A form
submission arrives in the inbox. It sits there alongside everything
else. If the owner is on a job and checks email at the end of
the day, the lead is already several hours old. If the next day is busy, the lead gets pushed to the following
day. By then, the homeowner had already spoken to two other roofers
who responded faster.

The data on this is direct. Leads contacted within five minutes of
submitting a form are nine times more likely to convert than leads
contacted after thirty minutes. Speed of response is one of the
strongest predictors of whether a roofing enquiry becomes a job.

A lead pipeline solves this by giving every enquiry a status and a visible place in your workflow.

When a form is submitted, the lead appears in your dashboard as New.
You get an immediate email notification with their full details.
You call them back. You mark the lead as Contacted. You add a note
about the conversation. You set a follow-up date for next Tuesday
because they want to think about it.

On Tuesday, you get an email reminder with their details and your notes. You call again. You mark them converted when they agree to the job.

At any point, you can see exactly how many active leads you have,
which ones are waiting for a follow-up, and what does your overall conversion rate look like from initial enquiry to closed job?

That visibility changes how you run the business. Most roofing
company owners have no idea what their enquiry is about, the job conversion rate is because there is no system to measure it.

Fix 7: Sync Every Enquiry to Google Sheets Automatically

If you have an office manager or an admin team who handle scheduling
and coordination, they should not need to log into a separate tool
or search through email to see incoming quote requests.

Connecting your form to a Google Sheet means every new enquiry
appears as a new row automatically the moment it is submitted. Name,
phone, email, address, type of work, and timestamp all in columns.
The whole team can see new enquiries in real time without accessing
anything new. No manual data entry. No forwarding emails. No missed
leads because someone was not watching the inbox.

For a roofing company with a dedicated office team, this is one
of the most practically useful changes you can make to your
enquiry process.

Fix 8: Track Which Marketing Is Actually Sending You Leads

This is the fix most roofing companies overlook because it
sounds technical. It is not.

If you are spending money on Google Ads, posting on Facebook,
listed on local directories, and collecting referrals from past
customers, which one of those is actually sending you the quote
requests that become paying jobs?

Without source tracking on your form, you have no way to answer
that question. You are making decisions about where to spend
your marketing budget based on guesswork rather than data.

UTM tracking solves this by attaching a label to each version
of your form link. You create different links for different
channels:
Your Google Ad link:
formgrid.dev/f/your-form-id
?utm_source=google&utm_medium=paid
Your Facebook post link:
formgrid.dev/f/your-form-id
?utm_source=facebook&utm_medium=social
Your directory listing link:
formgrid.dev/f/your-form-id
?utm_source=directory&utm_medium=referral

When a homeowner clicks your Facebook link and fills in the
form, Formgrid automatically records that they came from
Facebook. After 30 days, you can see exactly how many enquiries came from each channel and which ones actually became jobs.

A roofer spending $800 per month on Google Ads, who discovers that
most of their actual paying customers came from their Facebook posts, which has made a discovery worth far more than the cost of any tool.

The Formgrid Share modal generates these tracked links automatically.
You do not need to edit URLs manually or understand the technical
details. You open the Share button in your form builder and copy the
pre-built tracked link for each channel you use.

What This Looks Like When Everything Is Set Up

A homeowner searches "roof repair near me" after noticing a leak.

They land on your storm damage service page. Your quote form is
visible on that page without them needing to navigate anywhere.
The form has five fields and a clear call to action. There is
a photo upload field and a short note about your response time and
your Google rating sitting right next to the submit button.

They fill it in and upload a photo of the damage from their phone.
They hit submit.

You receive an immediate email notification with their name,
number, address, type of work, and the photo they uploaded.
Their details appear as a new row in your team's shared Google Sheet.
Their lead appears in your Formgrid dashboard as New, with the source
showing Google organic search.

You call them back within the hour.
You mark the lead as Contacted.
You schedule the inspection and add a note. Two days later, you convert the enquiry into a job and mark it Converted.

Your conversion rate updates automatically. Your team saw the
enquiry in real time. Nothing fell through the cracks.

That is not a complicated system. It is a form, a pipeline, a Google Sheet, and an email notification working together. But most roofing websites are missing every single piece of it.

A Real Example

A roofing company serving a regional area was receiving around 600 website visitors per month from local Google searches. Their contact form was on a dedicated Contact page with nine
fields. They were receiving three to four enquiries per month.

They simplified the form to five fields and placed it on the homepage
and on each service page. They added a photo upload field. They connected the form to a lead pipeline so every submission appeared as a tracked lead rather than just an email.
They set up Google Sheets sync so their office manager could see new
leads without logging into anything new.

Within the first month, enquiries went from three or four to fourteen.

The traffic had not changed. The ad budget had not increased. The
only thing that changed was what happened to that traffic after
it arrived on the website.

The Tool That Handles All of This

The system described in this post
is built using Formgrid.

Formgrid started as a form backend for static websites and later added a drag-and-drop form builder. Every submission becomes a tracked lead with a pipeline, notes, and follow-up
reminders, and automatic Google Sheets sync. The Share modal
generates tracked links for every social channel automatically so
you always know where your leads are coming from.

The free plan is available with no credit card required. Premium starts at $8 per month and includes file uploads for photo submissions, CSV export, and Google Sheets sync for up to 500 rows per month.

For roofing companies that want the entire system set up for them
including the landing page, form, Google Sheets integration, and UTM
tracking, and lead pipeline, there is a done-for-you option starting
at $500 one time.

See how Formgrid helps roofing
companies get more quote requests

The Summary

Getting more quote requests from your existing roofing website does
not require a bigger ad budget. It requires fixing the specific
points where your current website is turning away homeowners who
were ready to contact you.

Move the form onto every relevant page so visitors do not have to
navigate to find it.

Reduce the fields to the five or six you actually need at first contact.

Make the call to action specific so homeowners know exactly what
happens when they submit.

Add a photo upload field so homeowners can show you the damage
from their phone.

Put trust signals next to the form so visitors feel confident submitting.

Set up a lead pipeline so every enquiry is tracked and nothing is
gets forgotten.

Sync enquiries to Google Sheets so your whole team sees new leads in real time.

Track which marketing channel is sending your best leads, so you
stop spending on what is not working.

None of these requires a new website. Each one is a specific fix.
Implement them, and the traffic you already have will start turning
into the quote requests and the jobs your business runs on.

Running a roofing business and want the full system set up for you?
Reach out at allen@formgrid.dev, and we can talk through what makes
sense for your specific setup.

Why Your Roofing Website Gets Traffic, But No Quote Requests

Allen Jones — Mon, 04 May 2026 16:11:36 +0000

You check Google Analytics, and the numbers look fine.

Hundreds of visitors every month.
People find your site from local searches. Time on page looks decent. Nothing obviously wrong.

But the phone is quiet. The inbox is empty. Quote requests are not
coming in the way the traffic numbers suggest they should be.

This is one of the most common frustrations roofing contractors
face in 2026. And almost everyone diagnoses it wrong.

The instinct is to assume you need more traffic.
So you spend more on Google Ads, invest in more SEO, and drive even more visitors to the same site. The leads still do not come.
Because the traffic was never the problem.

The problem is what happens to that traffic after it arrives.

The Real Reason Roofing Websites Do Not Convert

Most roofing websites were built to exist online.
A web designer created something that looks professional,
lists your services, shows some photos of past jobs, and has your
phone number in the header.

That is a brochure. Not a lead generation system.

A brochure tells people what you do.
A lead generation system captures their interest at the moment they
have it, routes that interest into something trackable, and gives you
a way to follow up before they call someone else.

Most roofing websites are missing the second part entirely.

Here is where the leads are leaking out before they ever reach you.

Problem 1: The Contact Form Is an Afterthought

Walk through your own website like a homeowner who just noticed their
roof is leaking after last night's rain. They are on their phone. They are a little stressed. They want to find someone who can help quickly.

Where is your contact form? Is it on a separate Contact page buried
in the navigation? Does it ask for their name, email, phone number,
address, type of work, roof size, year of installation, and a message?

Every additional field on a contact form costs you submissions. Research consistently shows that forms asking for more than five to six pieces of information see significantly lower
completion rates than simpler ones. A homeowner on their phone during
their lunch break will not fill in an eight-field form. They will close the tab and call the next roofer they find.

The fix is not a beautiful form. It is a simple one. Name, phone
number, email, type of work needed, and an optional message. That is
enough to start a conversation. You can collect everything else
when you call them back.

The other part of this is placement. Your form should not live only on a Contact page. It should appear on your homepage, on your services pages, and ideally at the bottom of every page a visitor might land on from a Google search. A homeowner who lands on your storm damage page from a Google search should not have to navigate anywhere to request a quote. It should be right there.

Problem 2: You Have No Way to Follow Up Systematically

A homeowner fills in your contact form at 2 pm on a Tuesday. Your
website sends you an email notification. You are on a job.
You see the email at 5 pm. You plan to call tomorrow morning.

By then, they had already spoken to two other roofers who responded
faster.

The data on this is stark. Leads contacted within five minutes of
submitting a form is nine times more likely to convert than leads
contacted after thirty minutes. By the time 24 hours have passed
the conversion probability has dropped to almost nothing for a
homeowner with an urgent problem.

This is not about being available every minute of every day. It is
about having a system that captures the lead properly and ensures
nothing slips through.

When a quote request comes in, you need to know about it immediately.
You need the full details in one place. You need to be able to
mark it as contacted when you reach out. You need a reminder
set for the follow-up date, so that if they do not answer on
Tuesday you do not forget to try again on Thursday.

Most roofing websites do not give you any of that. The email arrives.
You either respond or you do not. There is no pipeline. There is no
tracking. There is no visibility into which leads you followed up
on and which ones went cold.

Problem 3: You Cannot Tell Which Marketing Is Sending You Leads

You are running Google Ads. You are posting on Facebook. You did a
letterbox drop last month. You get referrals from past customers. You
have a presence on a few local directories.

Which one of those is sending you quote requests? Which one is sending you the jobs that actually become paying customers, rather than people who enquire and go quiet?

If your current setup is a contact form that sends you an email, you
have no way to answer that question. The submission arrives with a name and a phone number. There is nothing in it that tells you the person came from your Facebook ad or from the Google search they did after a storm.

This matters enormously for where you spend your money and your time.
A roofer spending $800 a month on Google Ads, who discovers that 80
percent of their actual paying customers came from Facebook organic
posts have made a significant discovery.
Without source tracking on your enquiry form, that discovery is impossible to make.

Problem 4: Your Mobile Experience Is Losing You Leads Before They Even See Your Form

The majority of roofing searches happen on smartphones. A homeowner
notices something wrong with their roof.
They pick up their phone and search. They land on your site.

If your site loads slowly on mobile, you have already lost a significant portion of those visitors before they see a single word about your company. If your form is hard to fill in on a small screen, you lose another portion. If the submit button is below the fold and not obvious on mobile, you lose more.

The visitors who leave because of these friction points do not
disappear. They go to the next result and call that roofer instead.

Testing your own site on your phone from the perspective of
a first-time visitor takes ten minutes and will tell you more
about your conversion problem than any analytics tool.

Problem 5: There Is No Evidence You Are Real and Trustworthy

Homeowners are making a significant decision when they contact a roofing company. They are going to let strangers on their roof. They are going to pay thousands of dollars for work they cannot supervise.
They are trusting that the finished result is what they paid for.

Before they submit a form, they are looking for evidence that you are legitimate, that past customers had good experiences, and that you will not disappear after taking the deposit.

If your website has no visible reviews, no before-and-after photos
of real jobs, no information about how long you have been operating,
and no details about the people who will actually do the work, visitors will hesitate. And hesitation on a contact form means abandonment.

Trust signals do not have to be elaborate. Five genuine Google
reviews displayed prominently. Three before and after photos
with the location and type of work listed. A statement about
how many years you have been operating and whether you use
your own crew or subcontractors. These are small things that
significantly reduce the hesitation that stands between a visitor and a submitted form.

What a Lead Generation System for a Roofing Website Actually Looks Like

Fixing the problems above does not require a new website. It requires
adding the right infrastructure to what you already have.

A properly set up roofing lead system does the following:

Captures the enquiry immediately. A simple form on every relevant page with no more than six fields. Name, phone, email, property address, type of work, and an optional photo upload for homeowners who want to show you the damage. The form is prominent on
mobile. It is above the fold on service pages. It has a clear and
specific call to action that says something like "Request Your Free
Inspection" rather than the generic "Contact Us."

Routes the lead into a trackable pipeline. Every submission lands
in a dashboard as a named lead with a status. New when they arrive.
Contacted when you reach out. Converted when they become a job.
You can see at any moment how many active leads you have, which ones
you have not followed up on, and what your overall conversion rate
looks like. That visibility alone changes how you run the business.

Sends you an immediate notification.
An email arrives the moment someone submits a form. Not a daily digest. Not a weekly summary. An immediate notification with the lead's full details so you can respond quickly while they are still thinking about their roof and have not yet called the next company on the list.

Syncs automatically to Google Sheets. If you have an office manager or admin team who coordinate jobs, they should not need to log into a separate tool to see incoming enquiries. Every new submission can appear as a new row in a shared Google Sheet automatically. The whole team sees new leads without anyone manually transferring data.

Tells you where each lead came from.
Using tracked links with UTM parameters, each version of your
enquiry form link can carry a label showing whether the visitor came
from your Google Ad, your Facebook post, your local directory listing, or a referral. That information attaches to the lead automatically when they submit. After 30 days, you can see exactly which channel is generating real enquiries and which ones are generating nothing.

Reminds you to follow up.
If a lead does not answer when you call on Tuesday, you set a
follow-up date for Thursday. On Thursday, you receive an email
with the lead's details and any notes you added. You pick up the
phone with the full context in front of you. The lead never
gets forgotten because you were busy on a job.

A Real Example of What This Changes

A roofing company serving a regional area was getting around 600 website visitors per month from local Google searches. Their contact form was on a dedicated Contact page. It had nine fields. They were
receiving around three to four enquiries per month.

They simplified the form to five fields and placed it on their
homepage and on each of their service pages. They added a
photo upload field so homeowners could send pictures of damage.
They connected the form to a simple lead pipeline so every
submission appeared as a tracked lead rather than just an email.
They set up Google Sheets sync so their office manager could
see new leads without logging into anything new.

Within the first month, enquiries went from three or four to
fourteen. The traffic had not changed. The ad budget had not
increased. The only thing that changed was what happened to the traffic after it arrived.

Fourteen enquiries per month from 600 visitors is still a modest
conversion rate. But it is the difference between a quiet phone
and a pipeline of active jobs to work through.

The Tool Behind This Setup

The lead system described above is
built using Formgrid.
Formgrid started as a form backend for static websites and later added a drag-and-drop form builder. Every submission becomes a tracked lead with a pipeline, notes, follow-up reminders, and automatic Google Sheets sync.

The free plan is available with no
credit card required. Premium starts
at $8 per month and includes file
uploads, CSV export, and up to 500 Google Sheets rows per month.

For roofing companies that want the entire system set up for them
including the landing page, form, Google Sheets integration, and UTM
tracking there is a done-for-you option starting at $500.

See how Formgrid helps roofing companies get more quote requests →

The Summary

If your roofing website is getting traffic but not generating quotes
requests the problem is almost certainly one of these five things:

Your form is buried, complicated, or hard to use on mobile.

You have no system for following up quickly and consistently.

You cannot see which marketing is actually sending you leads.

Your mobile experience is creating friction before visitors
even reach your form.

Your site lacks the trust signals that give homeowners the confidence
to submit their details.

None of these requires rebuilding your website from scratch. Each
one is a specific fix. Fix them, and the traffic you already have
will start turning into the quote requests your business runs on.

Running a roofing business and
want help setting up a lead system
that works? Reach out at
allen@formgrid.dev, and we can talk through what makes sense
for your setup.

How to Send Next.js Form Submissions to Google Sheets Without a Backend

Allen Jones — Wed, 29 Apr 2026 19:03:00 +0000

Building a contact form in Next.js is straightforward.

You create a form component, add your input fields, wire up some state with useState, and handle the submission with a fetch call. Clean. Predictable. Very Next.js.

But then comes the question every Next.js developer eventually faces:
Where does the data actually go?

The obvious answer is an API route. You create a pages/api/contact.ts file or an app/api/contact/route.ts file, write a handler that receives the submission, and then figure out how to store it somewhere. A database. A Google Sheet. An email. Something.

For a side project or a client site, that is a lot of infrastructure to set up and maintain just to collect a few contact form submissions. You need a database or a third-party email service. You need environment variables. You need error handling.
You need to think about rate limiting and spam.

And if you want those submissions in Google Sheets specifically, you also need to figure out the Google Sheets API, OAuth tokens, service accounts, and all the complexity that comes with that integration.

There is a simpler way.

This guide shows you how to send Next.js form submissions directly
to Google Sheets using Formgrid. No API routes. No database. No Google Apps Script. No Zapier. Just your form component pointing at a Formgrid endpoint and a Google Sheet shared with one email address.

Who This Is For

This guide is for Next.js developers who want form submissions in Google Sheets without building and maintaining backend infrastructure:

Next.js developers building portfolio sites, landing pages, or client sites who need a contact form that works reliably without spinning up a database or a serverless function just to collect
enquiries.

Indie hackers building Next.js projects who want submissions organised in a spreadsheet without paying for Zapier or writing their own Google Sheets integration.

Freelancers who build Next.js sites for clients and want a form backend that is easy to set up, requires zero maintenance, and puts submissions somewhere the client can actually see them without logging into a developer tool.

Frontend developers who want to keep their Next.js project statically deployed on Vercel or Netlify without needing a separate API server just to handle form submissions.

If you have a Next.js form and you want submissions in Google Sheets, this guide gets you there in one sitting.

The Problem With Building Your Own API Route

The standard Next.js approach to form handling is an API route. It looks clean, and it is the right solution for many cases. But for a simple contact form, it introduces more complexity than the problem warrants.

Here is what you end up building:

An API route to receive the submission
A way to store or forward the data
Error handling for failed requests
Rate limiting to prevent spam abuse
Environment variables for API keys
Deployment configuration
Ongoing maintenance when things break

Then, if you want the data in Google
Sheets specifically, you also need:

A Google Cloud project
A service account with credentials
The Google Sheets API enabled
OAuth scope configuration
Token refresh handling
The actual Sheets API integration code

That is a significant amount of infrastructure for what is essentially a contact form. Every piece of it is something you wrote and something you own.
When it breaks at 2 am because an OAuth token expired, it is your
problem to fix.

Formgrid is all of that infrastructure already built and maintained for you. You point your form at an endpoint. The data lands in your Sheet. Done.

What You Get With Formgrid

Once your Next.js form is connected to formgrid.dev and your Google Sheet is linked, here is what happens on every submission:

Every entry appears as a new row in your spreadsheet automatically. No manual export. No dashboard to check every day.

Column headers are created automatically from your form field names on the very first submission. You do not need to set up the spreadsheet structure. Name your fields clearly and Formgrid
handles the rest.

The integration works in real time. The moment someone submits your form, the row appears in Google Sheets within seconds. Not on a schedule. Instantly.

You also get email notifications on every submission. Spam protection is built in through honeypot fields and rate limiting. And every submission is saved to your Formgrid dashboard as a backup, so if anything ever goes wrong with your Sheet, you have a full record
to fall back on.

What You Will Need

Before starting, make sure you have the following in place:

A Formgrid account:
Google Sheets integration is available on all plans, including free. The free plan syncs your first 10 rows per form.
The Premium plan at $8 per month syncs up to 500 rows per month. The Business plan at $29 per month syncs unlimited rows automatically.
Sign up for free at formgrid.dev.
No credit card required.

A Next.js project with a form:
Any Next.js form works whether you are using the Pages Router or the
App Router. The approach is the same for both.

A Google account:
You will need access to Google Sheets to create the spreadsheet that will receive your submissions.

How This Works

Instead of sending your form data to a Next.js API route, you send it directly to a Formgrid endpoint URL using a standard HTML POST or a fetch call from your form component.

Formgrid receives the submission, saves it to your dashboard, sends you an email notification, and writes a new row to your connected Google Sheet instantly.

No API route needed in your Next.js project. No server code. No database. Just your form component and a Formgrid endpoint.

Part One: Set Up Your Formgrid Form and Get Your Endpoint URL

Step 1: Create a Form in Your Formgrid Dashboard

Log in to your Formgrid account at formgrid.dev. From your dashboard, create a new form
and give it a name that matches what you are collecting. For example
"Contact Form" or "Project Enquiries."

You are not building a form inside Formgrid here. You are registering
a form entry in your dashboard so that Formgrid knows where to route
the incoming submissions from your Next.js project. Your actual form
component stays exactly as it is.

Step 2: Copy Your Formgrid Endpoint URL

Once your form is created, open it in your Formgrid dashboard. You will see your unique endpoint URL displayed
prominently. It will look like this:
https://formgrid.dev/api/f/your-form-id

Copy this URL. You will need it when you update your Next.js form component.

This URL is permanent. It does not change when you update your form
settings or connect integrations. You set it once and never need to
touch it again.

Part Two: Update Your Next.js Form Component

There are two ways to connect your Next.js form to Formgrid, depending on how your form is currently built.

Option A: Using a Standard HTML Form

If your form is a standard HTML form with a POST action, this is the simplest approach.
Just set the action attribute to your Formgrid endpoint, and the
method to POST:

export default function ContactForm() {
  return (
    <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
      />
      <textarea
        name="message"
        placeholder="Your Message"
      />

      {/* Honeypot field for spam protection */}
      <input
        type="text"
        name="_honey"
        style={{ display: 'none' }}
      />

      <button type="submit">
        Send Message
      </button>
    </form>
  )
}

That is the entire change. One attribute on the form tag. Your
form now sends submissions to Formgrid on submit.

One important detail: Formgrid reads the name attribute of each input
field and uses those values as the column headers in your Google Sheet. Make sure every field has a clear descriptive name attribute.

Option B: Using fetch with a React Controlled Form

If your form is a controlled React component using useState and you want to handle the submission with fetch to show a custom success state, use this approach instead:

'use client'

import { useState } from 'react'

export default function ContactForm() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')
  const [status, setStatus] = useState
    'idle' | 'submitting' | 'success' | 'error'
  >('idle')

  const handleSubmit = async (
    e: React.FormEvent
  ) => {
    e.preventDefault()
    setStatus('submitting')

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

      const response = await fetch(
        'https://formgrid.dev/api/f/your-form-id',
        {
          method: 'POST',
          body: formData
        }
      )

      if (response.ok) {
        setStatus('success')
        setName('')
        setEmail('')
        setMessage('')
      } else {
        setStatus('error')
      }
    } catch (error) {
      setStatus('error')
    }
  }

  if (status === 'success') {
    return (
      <div>
        <p>Thank you. Your message 
        has been received.</p>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        placeholder="Your Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        required
      />
      <input
        type="email"
        name="email"
        placeholder="Your Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <textarea
        name="message"
        placeholder="Your Message"
        value={message}
        onChange={(e) => 
          setMessage(e.target.value)}
      />

      <button
        type="submit"
        disabled={status === 'submitting'}
      >
        {status === 'submitting' 
          ? 'Sending...' 
          : 'Send Message'}
      </button>

      {status === 'error' && (
        <p>Something went wrong. 
        Please try again.</p>
      )}
    </form>
  )
}

Option C: Using the App Router With Server Actions

If you are using the Next.js App Router and prefer Server Actions, here is how to forward the submission to Formgrid from a server action:

'use server'

export async function submitContactForm(
  formData: FormData
) {
  const response = await fetch(
    'https://formgrid.dev/api/f/your-form-id',
    {
      method: 'POST',
      body: formData
    }
  )

  if (!response.ok) {
    throw new Error('Submission failed')
  }

  return { success: true }
}

Then, in your form component:

import { submitContactForm } from 
  './actions'

export default function ContactForm() {
  return (
    <form action={submitContactForm}>
      <input
        type="text"
        name="name"
        placeholder="Your Name"
        required
      />
      <input
        type="email"
        name="email"
        placeholder="Your Email"
        required
      />
      <textarea
        name="message"
        placeholder="Your Message"
      />
      <button type="submit">
        Send Message
      </button>
    </form>
  )
}

All three options send the same data to the same Formgrid endpoint. Use whichever pattern matches how your form is currently built.

Step 3: Test That Submissions Are Reaching Formgrid

Before connecting Google Sheets, confirm that submissions are reaching Formgrid correctly.
Run your Next.js project locally or deploy it and
submit a test entry through your form.

Open your Formgrid dashboard and check the submissions list for your
form. The test entry should appear within a few seconds.

If the submission does not appear, open your browser developer tools,
go to the Network tab, submit the form again, and look for the POST
request to formgrid.dev. A 200 response means the submission was
received. Any other status code means there is a configuration
issue to sort out before moving on.

Part Three: Connect Google Sheets

Step 4: Open the Integrations Tab in Formgrid

In your Formgrid dashboard, open the form you just connected and click on the Integrations tab at the top of the page.

You will see the Google Sheets integration section. If you are within
your plan limits the Connect interface, which is active and ready to use.

Step 5: Create a Blank Google Sheet

Click the Create blank Google Sheet
button. This opens a fresh blank spreadsheet in Google Sheets in a
new browser tab.

Give your sheet a clear, identifiable name. Something like "Contact Form Submissions" or "Next.js Project Enquiries 2026" works well.

Do not add any column headers or set up any structure in the spreadsheet. Formgrid creates the column headers automatically from your Next.js form field names on the very first submission. The sheet should be empty when you connect it.

Step 6: Share the Sheet With the Formgrid Service Account

In your Google Sheet, click the Share button in the top right
corner. The share dialog will open.

You need to add the Formgrid service account email address as an Editor. Go back to your Formgrid dashboard, where the service account email is displayed with a Copy button
next to it.

Copy it directly from there to avoid any chance of a typing error. Paste the email into the share dialog and make sure you select Editor access, not Viewer. Formgrid needs
Editor access to write new rows to your sheet. If you add it as a Viewer the connection will fail with a
permissions error.

Click Send or Done to confirm.

Step 7: Paste Your Sheet URL Into Formgrid

Go back to your Formgrid dashboard.
Copy the full URL of your Google Sheet from the browser address bar. The URL will look like this:
https://docs.google.com/spreadsheets/d/
1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74
OgVE2upms/edit

Paste the full URL into the sheet URL field in your Formgrid dashboard. Make sure the URL contains the full
spreadsheet ID, which is the long alphanumeric string between /d/
and /edit.

Step 8: Choose Whether to Sync Existing Submissions

Before connecting, you will see this option:
Sync existing submissions to this sheet? If you already have submissions, Formgrid can add them all to your
Google Sheets now, so your entire history is in one place.
[ ] Yes, sync my existing submissions

If you have been collecting submissions through Formgrid for a while and want your full history in the sheet from day one, check this box. If you only want new submissions going forward, leave it unchecked.

Step 9: Click Connect

Click the Connect Google Sheets button.

Formgrid will verify that it can access your sheet and that the service account has the correct permissions. If everything is in order, you will see a success confirmation:
Connected successfully
Your sheet is ready. Every new submission will appear as a new
row automatically.

Part Four: Verify the Full Flow Is Working

Step 10: Submit Another Test Entry Through Your Next.js Form

Submit another test entry through your form. Use realistic-looking data so it is easy to identify in your spreadsheet.

Open your Google Sheet. Within a few seconds, you should see:

Row 1: Column headers created automatically from your Next.js form field name attributes.

Row 2: Your test submission data with a timestamp in the final column showing exactly when the submission was received.

From this point forward, every submission from your Next.js form
will appear as a new row in your Google Sheet in real time. You never
need to log into Formgrid, export anything, or take any manual action.

What Happens on Every Submission

Here is the complete flow from the
moment a visitor submits your Next.js
form to the moment a row appears in
your spreadsheet:
Visitor fills in your Next.js form
and clicks Submit
↓
The form sends a POST request to
your Formgrid endpoint
↓
Formgrid receives and saves the
submission to your dashboard
↓
Email notification sent to you
and any other configured recipients
↓
A new row added to your Google
Sheet instantly
↓
Spam protection runs in the
background to filter out
bot submissions

Your submission is available in three places simultaneously: your Formgrid dashboard, your email inbox, and your Google Sheet.

Managing Your Google Sheets Connection

Once connected, the Integrations tab
in your Formgrid dashboard, you have full control:

Pause the integration:
Use the Active toggle to pause syncing at any time. New submissions are still saved to your dashboard and email notifications still go out, but new rows are not written to your sheet.

Disconnect:
Removes the connection entirely. Your existing sheet data stays exactly as it is. New submissions will not sync until you reconnect.

Open Sheet:
Takes you directly to your connected Google Sheet with a single click.

How This Compares to Building Your Own API Route

	Custom API Route	Formgrid
Setup time	1 to 2 hours	Under 5 minutes
Code to maintain	Yes	None
Google Sheets API	You build it	Built in
Spam protection	You build it	Built in
Email notifications	You build it	Included
Deployment config	Required	None
When it breaks	Your problem	Formgrid's problem

How This Compares to Using Zapier

	Zapier Route	Formgrid Native
Extra monthly cost	$19.99/month	Included in all plans
Setup steps	6 to 8 steps across two tools	3 steps in one place
Real time sync	Depends on Zap frequency	Instant
Failure points	Two services that can break	One
Spam protection	None built in	Honeypot and rate limiting
Email notifications	Requires extra Zap	Included

A Real Example: A Freelancer Who Stopped Writing API Routes

for Contact Forms

James is a freelance Next.js developer. He builds sites for clients across various industries. Every client site needs a contact form. Every contact form used to mean a new API route, a new email service integration, and a new Google Sheets setup that he built from scratch each time.

He was spending 2 to 3 hours per project just on form infrastructure.
Code he would never touch again once the site was live, but code he was still responsible for when it broke.

He switched to Formgrid for all his client contact forms. Now the setup takes 5 minutes per project. He points the form at a Formgrid endpoint, shares a Google Sheet with the Formgrid service account, and clicks connect. The client gets a spreadsheet that
fills itself and sends an email notification on every enquiry.

He saves roughly 2 hours per project. Across 15 client projects a year, that is 30 hours of development time he now spends on work that actually charges at his hourly rate.

Troubleshooting

Form submissions not appearing in Formgrid at all:

Check that your fetch call or form action is pointing to your Formgrid endpoint and that the method is POST, not GET. Open your browser developer tools, go to the Network tab, submit the form, and look for the POST request to formgrid.dev. A 200 response means
the submission was received. Any other status code means something is
misconfigured.

CORS error in the browser console:

If you are seeing a CORS error, it means you are likely trying to send
a JSON body with a Content-Type of application/json. Formgrid expects
FormData or URL-encoded form data, not JSON. Switch to using FormData
in your fetch call as shown in Option B above.

"Could not access this sheet" error when connecting:

This means Formgrid does not have write access to your sheet.
Open in Google Sheets, click Share, and confirm that the Formgrid service account email is listed as an Editor. If it is listed as a Viewer, remove it and re-add it with Editor access, then try connecting again.

Column headers missing or showing unexpected values:

Column headers come from the name attributes of your form input fields. If a column is missing, check that the corresponding input has a name attribute set. If a header looks incorrect, update the name attribute and resubmit a test entry.

Submissions appearing in Formgrid but not in Google Sheets:

Open the Integrations tab in your Formgrid dashboard and check that
the Google Sheets integration is showing as Active. If it shows as paused, click the toggle to resume. If it shows as Active but submissions are still not appearing, try disconnecting and reconnecting the integration.

Server Action forwarding not working:

If you are using a Server Action to forward submissions to Formgrid, make sure you are passing the FormData object directly to the fetch body. Do not convert it to JSON. Formgrid reads FormData directly.

What Formgrid Includes

Google Sheets integration is available on all Formgrid plans, including free.

Free plan at $0 per month:
Google Sheets sync (first 10 rows
per form. One time.)
Form builder with shareable link
Form endpoint URL
Email notifications
25 submissions per month

Premium plan at $8 per month:
Google Sheets sync (up to 500 rows
per month)
Everything in the free plan
1,000 submissions per month
File uploads up to 1GB per file
CSV export
Advanced spam protection
Remove Formgrid branding

Business plan at $29 per month:
Google Sheets sync (unlimited rows.
Every submission syncs automatically.)
Everything in Premium
15,000 submissions per month
Webhooks: connect to Zapier, Make,
Slack, Notion, Airtable, and more
Workflow automations
Custom HTML email templates
Auto-responder emails to form submitters
Multiple notification recipients
Custom email subject lines
Priority support with direct access
to the founder

No contracts. Cancel at any time.

👉 Start free at formgrid.dev
No credit card required.

Final Thoughts

Next.js makes it easy to build form components. Formgrid makes it
easy to do something useful with what those forms collect.

You do not need an API route. You do not need a database. You do not need to build a Google Sheets integration. You do not need Zapier.

Point your form at a Formgrid endpoint. Share a Google Sheet with one email address. Click connect.

Every submission lands in your spreadsheet automatically and in real time from that moment forward.

👉 Get started at formgrid.dev

Full disclosure: I built Formgrid.
Written as honestly as I could.
Let me know in the comments if
anything is unclear or looks off.

How to Send Framer Form Submissions to Google Sheets Without Zapier

Allen Jones — Wed, 29 Apr 2026 17:28:24 +0000

Framer is one of the fastest-growing website builders in 2026. Its visual editor, component system, and performance have made it a favourite among designers and developers who want beautiful sites without writing everything from scratch.

But Framer's built-in form handling has a significant gap.

By default, Framer sends form submissions to your email inbox. That works for a handful of enquiries a month. But the moment you need your team to see submissions in real time, filter entries by type, track patterns over time, or keep everything organised without searching through emails, an inbox is not enough.

The solution most Framer users reach for is Zapier. Connect Framer to Google Sheets through a Zap, and submissions flow across automatically. It works, but it adds a monthly subscription to the top of what you are already paying, introduces a delay between submission and spreadsheet row, and creates a dependency on a third service that can break independently of both Framer and Google Sheets.

This guide shows you a more direct approach. Using Formgrid, you can
replace Framer's default form handler with a custom endpoint and have every submission land in Google Sheets automatically in real time with no Zapier account required.

Who This Is For

This guide is for designers and developers who have built their site in Framer and want form submissions to go straight to Google Sheets without adding another monthly subscription:

Framer designers who built a
contact form, enquiry form, or booking request form, and want every submission organised in a spreadsheet automatically. You already built the form. You should not need a separate tool just to collect
the data is properly.

Indie hackers and solopreneurs who use Framer for their product landing page or waitlist, and want submissions in a shared spreadsheet without paying for Zapier on top of everything else.

Small business owners who collect client enquiries, service requests, or event registrations through a Framer form, and want every entry in a spreadsheet that their team can access without logging into a separate tool.

Agencies managing multiple Framer sites for clients who want a reliable form backend that sends submissions to a Google Sheet, so the client can see in real time.

If you have a Framer form and you want submissions in Google Sheets, this guide gets you there in one sitting.

The Problem With Framer's Native Form Handling

Framer's built-in form component is clean and easy to use. You drag a
form onto the canvas, add your fields, and publish your site. Submissions arrive in your inbox.

But that is where Framer's job ends.

There is no submission dashboard.
No way to see all your entries in one
place without searching your email.
No Google Sheets sync. No lead pipeline.
No way to track which enquiries you followed up on and which ones went cold.

For a simple contact form on a portfolio, that is fine. For a business form collecting real leads from real potential customers, it falls short almost immediately.

The standard workaround is Zapier. But Zapier adds cost, complexity, and another point of failure. You pay $19.99 per month for Zapier just to move data from one place to another.

Formgrid solves this in one step.

What You Get With Formgrid

Once your Framer form is connected to
formgrid.dev and your Google Sheet is linked here is what happens on every submission:

Every entry from your Framer form appears as a new row in your
spreadsheet automatically. No manual export. No logging into a dashboard every day. No copy and paste.

Column headers are created automatically from your form field names on the very first submission. You do not need to set up the spreadsheet structure yourself. Name your fields clearly and
Formgrid handles the rest.

The integration works in real time. The moment someone submits your form, the row appears in Google Sheets within seconds. Not the next time a Zap runs. Not on a schedule. Instantly.

You also get email notifications on every submission, so you are not
dependent on checking Sheets. Spam protection is built in through honeypot fields and rate limiting, so fake submissions do not pollute your data. And every submission is saved to your Formgrid dashboard as a backup, so if anything ever goes wrong with your
Sheet you have a full record to fall back on.

What You Will Need

Before starting, make sure you have the following in place:

A Formgrid account:
Google Sheets integration is available on all plans, including free. The free plan syncs your first 10 rows per form.
The Premium plan at $8 per month syncs up to 500 rows per month. The Business plan at $29 per month syncs unlimited rows automatically. Sign up for free at
formgrid.dev.
No credit card required.

A Framer site with a form:
You will need an existing Framer form to connect to Google Sheets. Any Framer form works, whether it is a contact form, a service enquiry form, a waitlist signup, or a booking request form.

A Google account:
You will need access to Google Sheets to create the spreadsheet that will receive your submissions. Any standard Google account works.

How This Works

Framer forms support a custom form action URL. Instead of letting Framer handle the submission and forward it to your email, you point the form at a Formgrid endpoint URL.

Formgrid receives the submission, saves it to your dashboard, sends you an email notification, and writes a new row to your connected Google Sheet instantly.

The key change on the Framer side is a single setting: the form action URL. You point it at your Formgrid endpoint instead of leaving it on Framer's default handler. Everything else happens inside Formgrid.

Part One: Set Up Your Formgrid Form and Get Your Endpoint URL

Step 1: Create a Form in Your Formgrid Dashboard

Log in to your Formgrid account at [formgrid.dev(https://formgrid.dev). From your dashboard, create a new form and give it a name that corresponds to the Framer form you are connecting. For example, "Contact Form" or "Waitlist Signups."

You are not building a form inside Formgrid here. You are registering
a form entry in your dashboard so that Formgrid knows where to route
the incoming submissions from Framer. Your actual form fields remain exactly as they are in Framer.

Step 2: Copy Your Formgrid Endpoint URL

Once your form is created, open it in your Formgrid dashboard. You will see your unique endpoint URL displayed prominently. It will follow this format:
https://formgrid.dev/api/f/your-form-id

Copy this URL. You will need it in the next section when you update your Framer form settings.

This URL is permanent. It does not change when you update your form
settings, connect integrations, or make any other changes inside Formgrid. You set it once in Framer and never need to touch it again.

Part Two: Connect Your Framer Form to Formgrid

Step 3: Open Your Framer Canvas

Log in to your Framer account and open the project containing the form you want to connect. Click on your form component in the canvas to select it.

Step 4: Set the Form Action URL

With your form selected, open the properties panel on the right side
of the Framer editor.

Look for the Action field under your form settings. This is where
Framer sends the form data when someone submits it.

Replace any existing value with your
Formgrid endpoint URL:
https://formgrid.dev/api/f/your-form-id

Set the Method to POST if it is not already set.

Step 5: Check Your Field Names

Formgrid uses the name attributes of your form fields to create the column headers in your Google Sheet. In Framer, each input field has a name property you can set in the properties panel.

Click on each input field and confirm it has a clear descriptive name. Fields
named "name", "email", "phone", and
"message" will produce clean, readable column headers in your spreadsheet. Review and update any field names that are unclear before moving on.

Step 6: Publish Your Framer Site

Once you have updated the form action URL and reviewed your field names, publish your Framer site to push the changes live. The Formgrid endpoint will not receive any submissions until your site is published.

Step 7: Submit a Test Entry

Before connecting Google Sheets, confirm that submissions are reaching Formgrid correctly. Visit your live Framer site, fill in your form with test data, and submit it.

Open your Formgrid dashboard and check the submissions list for your form. The test entry should appear within a few seconds.

If the submission does not appear, go back to your Framer form settings and confirm that the action URL is set correctly and that the method is POST. Also, confirm that you published the site after making the change, as unpublished changes in Framer do not take effect on the live site.

Part Three: Connect Google Sheets

Step 8: Open the Integrations Tab

in Formgrid

In your Formgrid dashboard, open the form you just connected and click on the Integrations tab at the top
of the page.

You will see the Google Sheets integration section. If you are within
your plan limits the Connect interface, which is active and ready to use.

Step 9: Create a Blank Google Sheet

Click the Create blank Google Sheet
button. This opens a fresh blank spreadsheet in Google Sheets in a new browser tab.

Give your sheet a clear, identifiable name. Something like "Framer Contact Form Submissions" or "Waitlist Signups 2026" works well. If you manage multiple Framer sites and plan to connect each form to its own sheet, a consistent naming convention will help you stay organised.

Do not add any column headers or set up any structure in the spreadsheet. Formgrid creates the column headers automatically from your Framer field names on the very first submission.
The sheet should be empty when you connect it.

Step 10: Share the Sheet With the Formgrid Service Account

In your Google Sheet, click the
Share button in the top right corner. The share dialog will open.

You need to add the Formgrid service account email address as an Editor. Go back to your Formgrid dashboard, where the service account email is displayed with a Copy button next to it.

Copy it directly from there to avoid any chance of a typing error. Paste the email into the share dialog and make sure you select Editor access, not Viewer. Formgrid needs Editor access to write new rows to your sheet. If you add it as a Viewer, the connection
will fail with a permissions error.

Click Send or Done to confirm.

Step 11: Paste Your Sheet URL Into Formgrid

Go back to your Formgrid dashboard. Copy the full URL of your Google Sheet from the browser address bar of the tab where your sheet is open. The URL will look like this:
https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms/edit

Paste the full URL into the sheet URL field in your Formgrid dashboard. Make sure you are copying from the address bar and that the URL contains the full spreadsheet ID, which is the long alphanumeric string between /d/ and /edit.

Step 12: Choose Whether to Sync Existing Submissions

Before connecting, you will see this option:
Sync existing submissions to this sheet?
If you already have submissions
Formgrid can add them all to your Google Sheet now, so your entire
history is in one place.
[ ] Yes, sync my existing submissions

If you have been collecting Framer form submissions through Formgrid for a while and want your full history in the sheet from day one, check this box. Formgrid will write all past submissions to the sheet before it begins syncing new ones.

If you only want submissions going forward, leave it unchecked.

Step 13: Click Connect

Click the Connect Google Sheets button.

Formgrid will verify that it can access your sheet and that the service account has the correct permissions. If everything is in order, you will see a success confirmation:
Connected successfully. Your sheet is ready. Every new
submission will appear as a new row automatically.

Part Four: Verify the Full Flow Is Working

Step 14: Submit Another Test Entry Through Your Framer Form

Visit your live Framer site and submit another test entry through the form. Use realistic-looking data so it is easy to identify in your spreadsheet.

Open your Google Sheet. Within a few seconds, you should see:

Row 1: Column headers created
automatically from your Framer form field names.

Row 2: Your test submission data with a timestamp in the final column showing exactly when the submission was received.

From this point forward, every submission made through your Framer form will appear as a new row in your Google Sheet in real time. You do not need to log into Formgrid, export anything, or take any manual action. The data moves automatically the moment someone fills in your form.

What Happens on Every Submission

Here is the complete flow from the moment a visitor fills in your Framer form to the moment a row appears in
your spreadsheet:
Visitor fills in your Framer form
and clicks Submit
↓
The browser sends a POST request
to your Formgrid endpoint
↓
Formgrid receives and saves the
submission to your dashboard
↓
Email notification sent to you
and any other configured recipients
↓
A new row added to your Google
Sheet instantly
↓
Spam protection runs in the
background to filter out
bot submissions

Your submission is available in three places simultaneously: your Formgrid dashboard, your email inbox, and your Google Sheet. If any one of those ever has an issue, you still have the other two as a complete record.

Managing Your Google Sheets Connection

Once connected, the Integrations tab in your Formgrid dashboard gives you full control over your connection:

Pause the integration:
Use the Active toggle to pause syncing at any time. When paused new submissions are still saved to your Formgrid dashboard and email notifications still go out, but new rows are not written to your sheet. Toggle it back on to resume at any time.

Disconnect:
Removes the connection entirely. Your existing sheet data stays exactly as it is in Google Sheets. New submissions will not be synced until you reconnect.

Open Sheet:
Takes you directly to your connected Google Sheet with a single click
without having to search for it in your Google Drive.

How This Compares to Using Zapier

	Zapier Route	Formgrid Native
Extra monthly cost	$19.99/month	Included in all plans
Setup steps	6 to 8 steps across two tools	3 steps in one place
Real time sync	Depends on Zap frequency	Instant
Failure points	Two services that can break	One
Spam protection	None built in	Honeypot and rate limiting
Email notifications	Requires extra Zap	Included
Submission history	In Zapier logs	In Formgrid dashboard

A Real Example: How a Designer Uses This Setup

Marcus runs a design studio. He uses Framer for his portfolio and has a project enquiry form on his contact page.

Before connecting Formgrid, every enquiry arrived as an email. Client
name, project type, budget, and timeline all in one unformatted block. He was replying from his inbox with no way to track which enquiries he had followed up on and which ones had gone cold.

He connected his Framer form to Formgrid and linked it to a Google
Sheet. Now every new project enquiry appears instantly as a structured row in his spreadsheet. Name in one column, project type in the next, budget after that, timeline at the end.

He shares the sheet with his business partner, who can see new enquiries in real time without needing access to his email.

After connecting, he discovered that most of his best-paying clients were coming from LinkedIn referrals, not his Instagram. He would never have known that from his inbox. The spreadsheet made the pattern visible.

Troubleshooting

Submissions not appearing in Formgrid
after publishing Framer:

Confirm that you published your Framer site after changing the form action URL. Changes made in the Framer editor do not go live until you publish. Also, confirm that the action URL is your full Formgrid endpoint and that the method is set to POST.

"Could not access this sheet" error
when connecting:

This means Formgrid does not have write access to your sheet. Open Google Sheets, click Share, and confirm that the Formgrid service account email is listed as an Editor. If it is listed as a Viewer, remove it and re-add it with Editor access, then try connecting again.

Column headers are missing or showing
unexpected values:

Column headers come from the name attributes of your Framer form fields. If a column is missing, check that the corresponding field has a name attribute set in Framer. If a header looks incorrect, update the field name in Framer, republish, and submit a new test entry. Note that existing headers in your sheet will not update
automatically. You would need to clear the sheet and reconnect if you want the headers to reflect updated field names.

Submissions appearing in Formgrid but not in Google Sheets:

Open the Integrations tab in your Formgrid dashboard and check that the Google Sheets integration is showing as Active. If it shows as Paused, click the toggle to resume. If it shows as Active but submissions are still not appearing, try disconnecting and reconnecting the integration.

Framer is still sending its own confirmation email:

When you set a custom action URL in Framer, it takes over the form submission handling. If Framer is still sending its own notification alongside Formgrid, you can disable the Framer notification in your Framer form settings and rely on Formgrid's email notification instead.

Invalid Google Sheets URL error:

Make sure you copied the full URL from your browser address bar not just the spreadsheet title or a partial URL.
The URL must contain /spreadsheets/d/ followed by a long alphanumeric string. Always copy from the address bar of the tab where your Sheet is open.

What Formgrid Includes

Google Sheets integration is available on all Formgrid plans, including free.

Free plan at $0 per month:
Google Sheets sync (first 10 rows
per form. One time.)
Form builder with shareable link
Form endpoint URL
Email notifications
25 submissions per month

No contracts. Cancel at any time.

👉 Start free at formgrid.dev
No credit card required.

Final Thoughts

Framer makes it easy to build beautiful forms. Formgrid makes it
easy to do something useful with what those forms collect.

Connecting your Framer form to Google Sheets through Formgrid requires one change in your Framer form settings, one shared spreadsheet, and a few clicks in your Formgrid dashboard.
Once it is set up, every submission lands in your spreadsheet automatically and in real time without a Zapier subscription and without any ongoing maintenance on your part.

If your team is currently managing Framer form submissions out of an
email inbox, this setup will save you time from the first submission it processes.

👉 Get started at formgrid.dev

Full disclosure: I built Formgrid.
Written as honestly as I could.
Let me know in the comments if
anything is unclear or looks off.

How to Send Squarespace Form Submissions to Google Sheets Without Zapier

Allen Jones — Wed, 29 Apr 2026 13:02:40 +0000

Squarespace makes it easy to build a beautiful website. It's built-in form builder lets you add contact forms, enquiry forms, and booking request forms to any page without writing a single line of code.

But when it comes to where those submissions actually go, Squarespace's native options are limited.

By default, Squarespace sends form submissions to your email inbox. That works well enough when you are receiving a handful of enquiries a month. But the moment you need your team to collaborate on responses, filter submissions by type, track patterns over time, or simply keep everything organised in one place, an inbox falls short quickly.

The solution most people reach for is Zapier. Set up a Zap, connect Squarespace to Google Sheets, and submissions flow across automatically.
It works, but it adds a monthly subscription on top of what you are already paying for. Squarespace introduces a delay between submission and spreadsheet row, and creates a dependency on a third service
that can break independently of both Squarespace and Google Sheets.

This guide shows you a more direct approach. Using Formgrid, you can
replace Squarespace's form handler with a custom endpoint and have every submission land in Google Sheets automatically, in real time, with no Zapier account required.

What You Will Need

Before starting, make sure you have the following in place:

A Formgrid account:
Google Sheets integration is available on all plans, including free. The free plan syncs your first 10 rows per form.
The Premium plan at $8 per month syncs
up to 500 rows per month. The Business
plan at $29 per month syncs unlimited
rows automatically. Sign up free at
formgrid.dev.
No credit card required.

A Squarespace site with a form:
You will need an existing Squarespace form to connect to Google Sheets. Any Squarespace form works, whether it is a simple contact form, a service enquiry form, or a booking request form.

A Google account:
You will need access to Google Sheets to create the spreadsheet that will receive your submissions. Any standard Google account works.

How This Works

Squarespace forms support a custom form action URL. Instead of letting Squarespace handle the submission and forward it to your email, you point the form at a Formgrid endpoint URL.

Formgrid receives the submission, saves it to your dashboard, sends you an email notification, and writes a new row to your connected Google Sheet instantly.

The key change on the Squarespace side is a single setting: the form action URL. You point it at your Formgrid endpoint instead of leaving it on Squarespace's default handler. Everything else happens inside Formgrid.

Part One: Set Up Your Formgrid Form

and Get Your Endpoint URL

Step 1: Create a Form in Your

Formgrid Dashboard

Log in to your Formgrid account at
formgrid.dev.
From your dashboard, create a new form and give it a name that corresponds to the Squarespace form you are connecting.
For example, "Contact Form" or
"Service Enquiry Form."

You are not building a form inside Formgrid here.
You are registering a form entry in your dashboard so that
Formgrid knows where to route the incoming submissions from Squarespace. Your actual form fields remain exactly as they are in Squarespace.

Step 2: Copy Your Formgrid

Endpoint URL

Once your form is created, open it in your Formgrid dashboard. You will see your unique endpoint URL displayed
prominently. It will follow this format:
https://formgrid.dev/api/f/your-form-id

Copy this URL. You will need it in the next section when you update your Squarespace form settings.

This URL is permanent. It does not change when you update your form
settings, connect integrations, or make any other changes inside Formgrid. You set it once in Squarespace and never need to touch it again.

Part Two: Update Your Squarespace Form to Use the Formgrid Endpoint

Step 3: Open Your Squarespace Form Block Settings

Log in to your Squarespace account and open the page containing the form you want to connect.
Click on the form block to select it, then click the pencil icon to edit it.

In the form block editor, navigate to the Advanced tab. This is where Squarespace allows you to set a custom form action URL.

Step 4: Set the Post URL

In the Advanced tab, look for the field labelled Post URL or Form Action. This is where Squarespace sends the
form data when someone submits it.

Replace any existing value with your
Formgrid endpoint URL:
https://formgrid.dev/api/f/your-form-id

Click Save or Apply to save the change.

Step 5: Check Your Field Names

Formgrid uses the field labels from your Squarespace form to create the column headers in your Google Sheet.
Make sure your form fields have clear and descriptive labels before you connect your Sheet.

Field labels like Name, Email, Phone, and Message will produce clean readable column headers in your spreadsheet.
Review your form fields and update any that are unclear before moving on.

Step 6: Submit a Test Entry

Before connecting Google Sheets, confirm that submissions are reaching Formgrid correctly.
Fill in your Squarespace form with test data and submit it.

Open your Formgrid dashboard and check the submissions list for your form.
The test entry should appear within a few seconds.

If the submission does not appear, go back to your Squarespace form settings and confirm that the Post URL is set
correctly. Also, confirm that you saved and published the changes in Squarespace after updating the form action.

Part Three: Connect Google Sheets

Step 7: Open the Integrations Tab

in Formgrid

In your Formgrid dashboard, open the form you just connected and click on the Integrations tab at the top
of the page.

You will see the Google Sheets integration section. If you are within
your plan limits the Connect interface, which is active and ready to use.

Step 8: Create a Blank Google Sheet

Click the Create blank Google Sheet
button. This opens a fresh blank spreadsheet in Google Sheets in a
new browser tab.

Give your sheet a clear, identifiable name. Something like "Squarespace Contact Form Submissions" or
"Service Enquiries 2026" works well. If you manage multiple forms and plan to connect each one to its own sheet, a consistent naming convention will help you stay organised.

Do not add any column headers or set up any structure in the spreadsheet. Formgrid creates the column headers automatically from your Squarespace field labels on the very first submission.
The sheet should be empty when you connect it.

Step 9: Share the Sheet With

the Formgrid Service Account

In your Google Sheet, click the Share button in the top right corner. The share dialog will open.

You need to add the Formgrid service account email address as an Editor. Go back to your Formgrid dashboard, where the service account email is displayed with a Copy button next to it.

Copy it directly from there to avoid any chance of a typing error. Paste the email into the share dialog and make sure you select Editor access, not Viewer.
Formgrid needs Editor access to write new rows to your sheet.
If you add it as a Viewer, the connection will fail with a permissions error.

Click Send or Done to confirm.

Step 10: Paste Your Sheet URL Into Formgrid

Go back to your Formgrid dashboard. Copy the full URL of your Google Sheet from the browser address bar of the tab where your sheet is open.
The URL will look like this:

https://docs.google.com/spreadsheets/d/
1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74
OgVE2upms/edit

Paste the full URL into the sheet URL field in your Formgrid dashboard.
Make sure you are copying from the address bar and that the URL contains the full spreadsheet ID, which is the long
alphanumeric string between /d/ and /edit.

Step 11: Choose Whether to Sync Existing Submissions

Before connecting, you will see this option:
Sync existing submissions to this sheet? If you already have submissions, Formgrid can add them all to your Google Sheet now so your entire history is in one place.
[ ] Yes, sync my existing submissions

If you have been collecting Squarespace form submissions through Formgrid for a while and want your full history in the sheet from day one, check this box. Formgrid will write all past submissions to the sheet before it begins syncing new ones.

If you only want submissions going forward, leave it unchecked.

Step 12: Click Connect

Click the Connect Google Sheets
button.

Part Four: Verify the Full Flow Is Working

Step 13: Submit Another Test Entry Through Your Squarespace Form

Visit your live Squarespace site and submit another test entry through the form.
Use realistic-looking data so it is easy to identify in your spreadsheet.

Open your Google Sheet. Within a few seconds, you should see:

Row 1: Column headers created
automatically from your Squarespace form field labels.

Row 2: Your test submission data with a timestamp in the final column showing exactly when the submission was received.

From this point forward, every submission made through your Squarespace form will appear as a new row in your Google Sheet
in real time. You do not need to log into Formgrid, export anything, or take any manual action. The data moves automatically the moment someone fills in your form.

What Happens on Every Submission

Here is the complete flow from the moment a visitor fills in your
Squarespace form to the moment a row appears in your spreadsheet:
Visitor fills in your Squarespace
form and clicks Submit
↓
The browser sends a POST request
to your Formgrid endpoint
↓
Formgrid receives and saves the
submission to your dashboard
↓
Email notification sent to you
and any other configured recipients
↓
A new row added to your Google
Sheet instantly
↓
Spam protection runs in the
background to filter out bot submissions

Managing Your Google Sheets Connection

Once connected, the Integrations tab in your Formgrid dashboard gives you full control over your Google Sheets connection:

Pause the integration:
Use the Active toggle to pause syncing at any time. When paused, new submissions are still saved to your Formgrid dashboard and email notifications still go out, but new rows are not written to your sheet. Toggle it back on to resume at any time.

Disconnect:
Removes the connection entirely. Your existing sheet data stays exactly as it is in Google Sheets. New submissions will not be synced until you reconnect.

Open Sheet:
Takes you directly to your connected Google Sheet with a single click
without having to search for it in your Google Drive.

How This Compares to Using Zapier

A common approach is to use Zapier to push Squarespace form submissions into Google Sheets.
It works, but you are paying for two services instead of one and adding a delay between submission and spreadsheet row because Zapier does not always run in real time.

	Zapier Route	Formgrid Native
Extra monthly cost	$19.99/month	Included in all plans
Setup steps	6 to 8 steps across two tools	3 steps in one place
Real time sync	Depends on Zap frequency	Instant
Failure points	Two services that can break	One
Spam protection	None built in	Honeypot and rate limiting
Email notifications	Requires extra Zap	Included

A Real Example: How a Photographer Uses This Setup

Sarah runs a photography studio. She uses Squarespace for her website and has a booking enquiry form on her contact page.

Before connecting Formgrid, every enquiry arrived as an email. Client
name, event type, date, and budget all dumped into one unformatted
message.
She was managing her entire pipeline from her inbox, trying to
remember which enquiries she had replied to and which ones needed
a follow-up.

She connected her Squarespace form to Formgrid and linked it to a Google Sheet.
Now every new booking enquiry appears instantly as a new row in her
spreadsheet. Name in one column, event type in the next, date after that, budget at the end. Organised. Automatic. No manual work.

She shares the Sheet with her assistant, who can see new enquiries in real time without needing access to her email or her Formgrid dashboard.

Her conversion rate went from unknown to measurable the week she set this up.

Troubleshooting

Submissions not appearing in Formgrid after updating Squarespace:

Confirm that you saved and published the changes in Squarespace after
updating the Post URL. Squarespace changes do not take effect on your
live site until you publish. Also, confirm that the Post URL is your full Formgrid endpoint and not a partial URL.

"Could not access this sheet" error when connecting:

This means Formgrid does not have write access to your sheet.
Open Google Sheets, click Share, and confirm that the Formgrid service account email is listed as an Editor. If it is listed
as a Viewer, remove it and re-add it with Editor access, then try
connecting again.

Column headers missing or showing unexpected values:

Column headers come from the field labels in your Squarespace form. If a column is missing or looks incorrect, review your form field labels in Squarespace, make the changes, publish the site, and submit a new test entry. Note that existing headers in your sheet will not update automatically. You would need to clear the sheet and
reconnect if you want the headers to reflect updated field labels.

Submissions appearing in Formgrid but not in Google Sheets:

Open the Integrations tab in your Formgrid dashboard and check that
the Google Sheets integration is showing as Active. If it shows as
Paused, click the toggle to resume. If it shows as Active but submissions are still not appearing, try disconnecting and reconnecting the integration.

Squarespace is still sending its own confirmation email:

When you set a custom Post URL in Squarespace, it takes over the form
submission handling. If Squarespace is still sending its own confirmation, that is fine. Formgrid also sends an email notification independently. You can disable the Squarespace notification in your Squarespace form storage settings if you only want the Formgrid notification.

What Formgrid Includes

Google Sheets integration is available on all Formgrid plans, including free.

Free plan at $0 per month:
Google Sheets sync (first 10 rows
per form. One time.)
Form builder with shareable link
Form endpoint URL
Email notifications
25 submissions per month

No contracts. Cancel at any time.

👉 Start free at formgrid.dev
No credit card required.

Final Thoughts

Squarespace makes it easy to build
forms. Formgrid makes it easy to do
something useful with what those
forms collect.

Connecting your Squarespace form to Google Sheets through Formgrid requires one change in your Squarespace form settings, one shared spreadsheet, and a few clicks in your Formgrid dashboard.
Once it is set up, every submission lands in your spreadsheet automatically and in real time without a Zapier subscription and without any ongoing maintenance on your part.

If your team is currently managing Squarespace form submissions out of an email inbox, this setup will save you time from the first submission it processes.

👉 Get started at formgrid.dev

Full disclosure: I built Formgrid.
Written as honestly as I could.
Let me know in the comments if
anything is unclear or looks off.

How to Track Where Your Form Submissions Are Coming From Using Your Own HTML Form

Allen Jones — Wed, 29 Apr 2026 11:19:48 +0000

You already have a contact form on your website.

Maybe it is a simple three-field form on your portfolio. Maybe it is a detailed quote request form on your business site.
Maybe it is a registration form you built yourself in React or plain HTML.

It is working. Submissions are arriving.
People are filling it in.

But here is the question you probably have not thought to ask:

Where are these people coming from?

Did they find your site through a Google search? Did someone share your link in a WhatsApp group? Did they click a link in your email newsletter? Did they come from your Instagram bio?

If you do not know the answer, you are making marketing decisions blindly. You are spending time on channels that might not be sending you any leads while ignoring the one channel sending you your best customers.

This guide shows you how to add UTM tracking to your existing HTML form using Formgrid, so every submission automatically shows you exactly where it came from.

What You Need Before Starting

A Formgrid account:
Sign up for free at formgrid.dev
No credit card required
An existing HTML form on your website:
Any HTML form works, whether it is
a contact form, a quote request form,
a registration form, or anything else
A basic understanding of HTML:
You just need to be able to add
a few lines to your existing form

How UTM Tracking Works With Your Own HTML Form

When someone arrives at your page
through a tracked link like this:
https://yourwebsite.com/contact
?utm_source=twitter&utm_medium=social

The UTM parameters are in the page URL. Your form needs to read those parameters from the URL and include them in the
submission, so Formgrid knows where the person came from.

There are two parts to setting this up:
Part 1:
Add hidden fields to your HTML form
to carry the UTM data
Part 2:
Add a small JavaScript snippet that reads the UTM parameters from the URL and fills those hidden fields automatically before the form submits

The person filling in your form sees nothing different. They fill in their name, email, and message as normal. The UTM data is captured invisibly in the background.

Step 1: Connect Your Form to Formgrid

If you have not already done this, replace your form action URL with
your Formgrid endpoint. One line change. Everything else stays exactly as it is.

<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 
  />
  <textarea 
    name="message" 
    placeholder="Your Message"
  ></textarea>
  <button type="submit">Send</button>
</form>

Go to formgrid.dev and sign up. Create a new form and copy your endpoint URL from the form details page.

Paste that endpoint URL into your form action attribute. Your form now sends submissions to Formgrid.

Step 2: Add Hidden UTM Fields to Your Form

Add three hidden input fields inside your form. These fields are invisible to the person filling in your form, but they carry the UTM data to Formgrid when the form is submitted.

<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 
  />
  <textarea 
    name="message" 
    placeholder="Your Message"
  ></textarea>

  <!-- Hidden UTM tracking fields -->
  <!-- These are invisible to the user -->
  <input 
    type="hidden" 
    name="utm_source" 
    id="utm_source" 
  />
  <input 
    type="hidden" 
    name="utm_medium" 
    id="utm_medium" 
  />
  <input 
    type="hidden" 
    name="utm_campaign" 
    id="utm_campaign" 
  />

  <button type="submit">Send</button>
</form>

The three hidden fields are:
utm_source:
Where the traffic came from
Examples: twitter, whatsapp,
instagram, newsletter, google
utm_medium:
How the traffic arrived
Examples: social, email, paid, organic
utm_campaign:
Which specific campaign sent them
Examples: summer_launch, instagram_bio,
newsletter_april

Step 3: Add the JavaScript Snippet

Add this script immediately after your closing form tag. It reads the UTM parameters from the page URL and populates the hidden fields automatically before the form is submitted.

<script>
  (function() {
    // Read UTM parameters from the 
    // current page URL
    var params = new URLSearchParams(
      window.location.search
    )

    // Get each UTM value from the URL
    var utmSource = 
      params.get('utm_source')
    var utmMedium = 
      params.get('utm_medium')
    var utmCampaign = 
      params.get('utm_campaign')

    // Populate the hidden fields 
    // if the values exist
    if (utmSource) {
      var sourceField = 
        document.getElementById('utm_source')
      if (sourceField) 
        sourceField.value = utmSource
    }

    if (utmMedium) {
      var mediumField = 
        document.getElementById('utm_medium')
      if (mediumField) 
        mediumField.value = utmMedium
    }

    if (utmCampaign) {
      var campaignField = 
        document.getElementById('utm_campaign')
      if (campaignField) 
        campaignField.value = utmCampaign
    }
  })()
</script>

This script runs automatically when the page loads. If the URL contains UTM parameters, it fills the hidden fields silently. If there are no UTM parameters in the URL, the hidden fields stay empty, and the submission goes through normally.

Your Complete Form With UTM Tracking

Here is the full form with everything
in place:

<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 
  />
  <textarea 
    name="message" 
    placeholder="Your Message"
  ></textarea>

  <!-- Hidden UTM tracking fields -->
  <input 
    type="hidden" 
    name="utm_source" 
    id="utm_source" 
  />
  <input 
    type="hidden" 
    name="utm_medium" 
    id="utm_medium" 
  />
  <input 
    type="hidden" 
    name="utm_campaign" 
    id="utm_campaign" 
  />

  <button type="submit">Send</button>
</form>

<script>
  (function() {
    var params = new URLSearchParams(
      window.location.search
    )

    var utmSource = 
      params.get('utm_source')
    var utmMedium = 
      params.get('utm_medium')
    var utmCampaign = 
      params.get('utm_campaign')

    if (utmSource) {
      var sourceField = 
        document.getElementById('utm_source')
      if (sourceField) 
        sourceField.value = utmSource
    }

    if (utmMedium) {
      var mediumField = 
        document.getElementById('utm_medium')
      if (mediumField) 
        mediumField.value = utmMedium
    }

    if (utmCampaign) {
      var campaignField = 
        document.getElementById('utm_campaign')
      if (campaignField) 
        campaignField.value = utmCampaign
    }
  })()
</script>

That is the entire setup. No libraries.
No build tools. No dependencies. Just
three hidden fields and ten lines of vanilla JavaScript.

Step 4: Create Your Tracked Links

Now that your form is ready to capture UTM data, you need to create tracked versions of your page URL to share in different places.

Your normal contact page URL:
https://yourwebsite.com/contact

Your tracked versions:
For Twitter:
https://yourwebsite.com/contact
?utm_source=twitter&utm_medium=social
For WhatsApp:
https://yourwebsite.com/contact
?utm_source=whatsapp&utm_medium=social
For your email newsletter:
https://yourwebsite.com/contact
?utm_source=newsletter&utm_medium=email
For Instagram bio:
https://yourwebsite.com/contact
?utm_source=instagram&utm_medium=social
For LinkedIn:
https://yourwebsite.com/contact
?utm_source=linkedin&utm_medium=social

Share the right link in the right place. The person clicking the link arrives at your normal contact page. They see nothing different. But when they submit your form, Formgrid records exactly which link they clicked.

Step 5: See Where Your Submissions

Are Coming From

When submissions arrive in your Formgrid dashboard, each one shows you exactly where it came from.

Open any submission, and you will see:
Source: twitter via social

Or:
Source: whatsapp via social

Or:
Source: newsletter via email

After a few weeks of sharing tracked links, you can see at a glance which channel is sending you the most submissions and which channel is sending you leads that actually convert.

Using This With React or

Other Frameworks

If your form is built in React or another JavaScript framework, the
approach is the same, but you read the URL parameters using the
framework's router or the native browser API.

React example:

import { useEffect, useState } from 'react'

function ContactForm() {
  const [utmSource, setUtmSource] = 
    useState('')
  const [utmMedium, setUtmMedium] = 
    useState('')
  const [utmCampaign, setUtmCampaign] = 
    useState('')

  useEffect(() => {
    const params = new URLSearchParams(
      window.location.search
    )
    setUtmSource(
      params.get('utm_source') || ''
    )
    setUtmMedium(
      params.get('utm_medium') || ''
    )
    setUtmCampaign(
      params.get('utm_campaign') || ''
    )
  }, [])

  return (
    <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 
      />
      <textarea 
        name="message" 
        placeholder="Your Message"
      />

      {/* Hidden UTM fields */}
      <input 
        type="hidden" 
        name="utm_source" 
        value={utmSource} 
      />
      <input 
        type="hidden" 
        name="utm_medium" 
        value={utmMedium} 
      />
      <input 
        type="hidden" 
        name="utm_campaign" 
        value={utmCampaign} 
      />

      <button type="submit">
        Send Message
      </button>
    </form>
  )
}

export default ContactForm

Next.js example using useSearchParams:

'use client'

import { useEffect, useState } from 'react'
import { useSearchParams } from 'next/navigation'

function ContactForm() {
  const searchParams = useSearchParams()

  const utmSource = 
    searchParams.get('utm_source') || ''
  const utmMedium = 
    searchParams.get('utm_medium') || ''
  const utmCampaign = 
    searchParams.get('utm_campaign') || ''

  return (
    <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 
      />
      <textarea 
        name="message" 
        placeholder="Your Message"
      />

      <input 
        type="hidden" 
        name="utm_source" 
        value={utmSource} 
      />
      <input 
        type="hidden" 
        name="utm_medium" 
        value={utmMedium} 
      />
      <input 
        type="hidden" 
        name="utm_campaign" 
        value={utmCampaign} 
      />

      <button type="submit">
        Send Message
      </button>
    </form>
  )
}

export default ContactForm

The logic is identical in every framework. Read the URL parameters when the component mounts. Pass them as hidden field values. Formgrid handles the rest.

Testing Your Setup

Before sharing your tracked links, test that everything is working correctly.

Step 1: Open your contact page with
a UTM parameter in the URL:
https://yourwebsite.com/contact
?utm_source=test&utm_medium=testing

Step 2: Right-click on the page and inspect the hidden form fields. You should see:

utm_source value: test
utm_medium value: testing
utm_campaign value: (empty)

Step 3: Fill in the form and submit it.

Step 4: Open your Formgrid dashboard and find the submission. Open it and check that the source shows:
Source: test via testing

If you see the source on the submission, your setup is working correctly. If not, check that the hidden field IDs match the JavaScript and that the script is running after the form loads.

A Real Example: The Difference

This Makes

James runs a cleaning business. He shares his quote request form link in four places
every week:
His Instagram bio
A local business Facebook group
His monthly email newsletter
Google My Business profile

Before UTM tracking, he had no idea which channel was working. He was
posting on Instagram every day and sending a newsletter once a month.

After adding UTM tracking to his form, he checked his Formgrid dashboard
after one month:
Instagram: 3 submissions
Facebook group: 21 submissions
Newsletter: 8 submissions
Google My Business: 11 submissions

He was spending most of his time on Instagram, and it was sending him almost nothing. The Facebook group he checked once a week was sending him the most leads.

He shifted his time accordingly. More engagement in the Facebook group. Less Instagram posting. His monthly quote requests increased by 60 percent without doing any additional marketing.

That decision was only possible because he could see the data.

What Happens to the UTM Data

in Formgrid

Every submission that includes UTM data shows the source in the lead
detail view in your dashboard.

You also see it in the leads tab alongside each submission, so you
can see at a glance which channel each lead came from without opening
the full detail view.

Combined with Formgrid's lead pipeline, you can track both the source and the outcome of every lead:
Facebook group submissions:
21 total
15 contacted
9 converted (43% conversion rate)
Instagram submissions:
3 total
2 contacted
0 converted (0% conversion rate)

Facebook is not just sending more leads.
It is sending leads that actually become customers. Instagram is sending leads that go nowhere.

Without UTM tracking, you would never know that.

Getting Started

If you already have an HTML form on
your website:
Step 1:
Connect it to Formgrid by replacing
the form action URL
Step 2:
Add the three hidden UTM fields
Step 3:
Add the JavaScript snippet
Step 4:
Create tracked versions of your
page URL for each channel
Step 5:
Share the right link in each place

Total setup time: about 10 minutes.

From that point forward, every submission
automatically shows you where it came from.

👉 Start free at formgrid.dev

No credit card required. Free plan
available. UTM tracking works on all plans, including free.

Have questions about setting up UTM
tracking with your specific form or
framework? Email allen@formgrid.dev, and I will help you get it working.

How to Track Where Your Form Submissions Are Coming From

Allen Jones — Tue, 28 Apr 2026 20:23:12 +0000

You are getting form submissions.

People are filling in your contact form, your registration form, and your quote request form.
The submissions are arriving in your inbox and your dashboard.

But here is the question most small business owners never think to ask:

Where are these people coming from?

Did they find your form through your Instagram bio? Did someone share your link in a WhatsApp group? Did they click a link in your email newsletter? Did they find you through a Google search?

If you do not know the answer to that question, you are making marketing decisions blindly. You are spending time on channels that might not be sending you any leads at all, while ignoring the one channel that is sending you your best customers.

This guide shows you how to track exactly where every form submission comes from using a simple system called UTM tracking and how Formgrid makes it automatic.

Why This Matters More Than You Think

Imagine you are sharing your contact form
in three places:
Your Instagram bio
A WhatsApp group for your industry
Your monthly email newsletter

After a month, you have 40 submissions. But you have no idea which channel sent which submissions.

Without source tracking:
You guess Instagram is working because you post there most often.
You stop sending the newsletter because it feels like a lot of effort.
You leave the WhatsApp group because it seems inactive.

With source tracking, you discover:
Instagram: 4 submissions
WhatsApp: 28 submissions
Newsletter: 8 submissions

WhatsApp was sending you 70 percent of your leads, and you almost stopped using it.

That is the difference source tracking makes.

What UTM Tracking Is

UTM stands for Urchin Tracking Module. The name does not matter. What matters is what it does.

UTM tracking is a simple way to add invisible labels to your links so you can see which link a person clicked before they filled in your form.

You create different versions of your form link for each place you share it. Every version looks the same to the person clicking it. But behind the scenes, each version carries a label that tells you where it came from.

When someone clicks your WhatsApp link and fills in your form, Formgrid reads that label automatically and attaches it to the submission. No form fields needed. No technical setup required.
It just works.

How UTM Links Work

Your normal Formgrid form link looks
like this:
https://formgrid.dev/f/your-form-id

A UTM tracked version of the same link
looks like this:
https://formgrid.dev/f/your-form-id?utm_source=whatsapp&utm_medium=social

The part after the question mark is the
UTM parameter. It tells Formgrid two things:
utm_source=whatsapp where the link was shared.
In this case, WhatsApp.
utm_medium=social
How the link was shared.
In this case through social media.

The person clicking the link sees nothing different. They open your form. They fill it in. They submit it.

Behind the scenes, Formgrid reads the UTM parameters from the URL and saves them to the submission automatically.

No visible fields. No extra steps.
No technical knowledge is needed from the person filling in your form.

The Three UTM Parameters

You only need to understand three:
utm_source
Where the traffic came from.
Examples:
whatsapp
twitter
instagram
linkedin
facebook
email
google
reddit

utm_medium
How the traffic arrived.
Examples:
social (shared on social media)
email (sent in an email)
paid (from a paid ad)
organic (from search)
referral (linked from another site)

utm_campaign
Which specific campaign or piece
of content sent to them.
Examples:
summer_launch
newsletter_april
instagram_bio
horse_ride_outreach

You do not need all three on every link.
Source and medium are enough for most small businesses.

How to Create Tracked Links in Formgrid

Formgrid generates tracked links automatically for you. You do not need to edit URLs manually or understand the technical details.

Here is how it works.

Step 1: Create and Save Your Form

Go to formgrid.dev
and sign up. No credit card required.

Create a new form using the drag and drop builder or connect your existing HTML form to a Formgrid endpoint.

Give your form a name and click Save.

Step 2: Open the Share Modal

Once your form is saved, open it in the form builder. In the top toolbar, you will see four buttons:
Embed Preview Share Save Changes

Click Share.

A modal opens showing your form link and six pre-built tracked links for the most common channels.

Each button copies a different tracked version of your form link to your clipboard.
Twitter link:
formgrid.dev/f/your-form-id
?utm_source=twitter&utm_medium=social
WhatsApp link:
formgrid.dev/f/your-form-id
?utm_source=whatsapp&utm_medium=social
Email link:
formgrid.dev/f/your-form-id
?utm_source=email&utm_medium=newsletter

You copy the link for wherever you are sharing. Paste it. Done.

Each link goes to the same form.
The person filling it in sees nothing different.
But Formgrid knows which link they clicked.

Step 5: See Where Your Submissions

Are Coming From

When submissions arrive in your dashboard, each one shows where it came from.

Open any submission, and you will see:
Source: WhatsApp via social

Or:
Source: Twitter via social

Or:
Source: email via newsletter

After a few weeks of sharing your tracked links, you can see at a glance which channel is sending you the most submissions and which channel is sending you the leads that actually convert.

A Real Example: How This Changes

Your Decisions

Sarah runs a photography studio. She shares
her booking enquiry form in four places:
Her Instagram bio
Her WhatsApp group for local businesses
Her monthly email newsletter
Her Twitter profile

After using tracked links for one month, her Formgrid dashboard shows:
Instagram: 6 submissions
WhatsApp: 19 submissions
Newsletter: 3 submissions
Twitter: 2 submissions

She was spending two hours per week creating content for Twitter. She had 2 submissions to show for it.

She was spending 10 minutes per week in the local business WhatsApp group. She had 19 submissions to show for it.

She stopped posting on Twitter. She started engaging more in the WhatsApp group.
Her submission volume increased by 40 percent without creating any
more content.

That decision was only possible because she could see the data.

What About Custom Channels

Not every channel fits neatly into the six default options. Maybe you share your form in a Reddit community.
Maybe you put it in a blog post. Maybe a podcast mentions your business.

The Share modal in Formgrid has a custom
source field at the bottom:
Custom source:
[reddit ] [Copy]

Type your source name and click Copy.
Formgrid generates a tracked link for that exact source:
formgrid.dev/f/your-form-id
?utm_source=reddit&utm_medium=custom

You can create tracked links for any channel you use.

What To Do With This Information

Once you have a few weeks of tracked submissions in your dashboard, ask yourself these questions:
Which channel sends the most submissions?
Double down on that channel.
Which channel sends zero submissions?
Stop spending time there, or try a different approach.
Which channel sends submissions that actually convert to customers?
That is your most valuable channel regardless of volume.

The last question is the most powerful one. Volume is vanity. Conversion is what matters.

A channel that sends 5 submissions, and 4 of them become customers is
worth more than a channel that sends 30 submissions and none of them convert.

With Formgrid's lead pipeline, you can track both. You see the source on each submission, and you see whether that submission became
New, Contacted, or Converted.
WhatsApp submissions:
19 total
14 contacted
8 converted (42% conversion rate)
Instagram submissions:
6 total
4 contacted
1 converted (17% conversion rate)

WhatsApp is not just sending more leads.
It is sending better leads. You would never know that without source tracking.

Why Most Form Tools Do Not Do This

Most form backends receive your submission and send you an email. That is where their job ends.

They have no concept of where the submission came from.
They have no pipeline to track what happens after.
They have no way to connect a lead back to the channel that generated it.

Formgrid captures UTM parameters automatically from every submission.
It stores the source, medium, and campaign on every lead record. It shows you the source in the lead detail view so you always know where each person came from.

No plugin. No Zapier integration.
No third-party analytics tool.
It is just built in.

Getting Started

If you already have a form on your website, you can connect it to Formgrid by replacing the form action URL with your Formgrid endpoint. One line change. Everything else stays the same.

<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 
  />
  <textarea 
    name="message" 
    placeholder="Your Message"
  ></textarea>
  <button type="submit">Send</button>
</form>

If you are starting from scratch, use the drag-and-drop form builder to get a shareable link in under 2 minutes. No website needed.

Either way, the moment you start sharing tracked links, Formgrid automatically shows you where every submission came from.

👉 Start free at formgrid.dev

No credit card required. Free plan available.
The Share modal with tracked links is available on all plans, including free.

Have questions about UTM tracking
or setting up source tracking for
your specific form? Email
allen@formgrid.dev, and I will
help you get it working.

Getform Is Now Forminit: What Changed and What It Means for Your Forms

Allen Jones — Mon, 27 Apr 2026 23:43:28 +0000

If you have been using Getform and recently noticed things look different, you are not imagining it.

Getform officially rebranded to Forminit in January 2026. Same team. Same core product. New name and a significant feature update.

Your existing Getform endpoints still work.
No migration needed. But the rebrand comes with changes worth understanding before you decide whether to stay or switch.

This post covers what actually changed, what is new, what is still missing, and what your alternatives look like in 2026.

What Is Forminit (Formerly Getform)?

Forminit is a headless form backend API.
You build your own form in HTML, React, or any framework, point it at a Forminit endpoint, and they handle everything after the user clicks submit.


  <form action="https://forminit.com/f/{YOUR-FORM-ID}" method="POST">
  <!-- Sender Block -->
  <input type="text" name="fi-sender-fullName" placeholder="Full name" />
  <input type="email" name="fi-sender-email" placeholder="Email" />
  <input type="tel" name="fi-sender-phone" placeholder="Phone" />
  <input type="text" name="fi-sender-city" placeholder="City" />
  <input type="text" name="fi-sender-address" placeholder="Address" />
  <button type="submit">Submit</button>

</form>

Submissions are stored in a dashboard. You get email notifications. File uploads, spam protection, and webhooks are included on paid plans.

That was Getform. Forminit is the same thing with new features added on top.

What Actually Changed in the Rebrand

Authentication Modes

The biggest technical change is authentication.
Forminit now offers two modes:

Public mode works exactly like Getform did.
Your form posts to an endpoint, and submissions arrive in your dashboard. Anyone can technically target that endpoint.

Protected mode lets you generate API keys for server-side use. If you are proxying form submissions through your own backend before sending them to Forminit, this gives you higher rate limits and better protection against abuse.

For most users, using a simple HTML form on a static site in public mode is still the right choice. Protected mode is for developers who want server-side control.

Workspaces

Forminit now has workspaces. These are containers you can share with team members. Useful for agencies managing multiple clients or freelancers keeping projects separated.

If you are a solo developer or small business owner with one or two forms, this feature will not affect you at all.

Form Blocks

This is the most interesting technical addition. Form Blocks bring typed fields to your submissions. Each block type
validates automatically:
Phone block: validates E.164 format
Email block: validates RFC 5322 format
Country block: validates ISO 3166 codes
Select block: tracks which options
get chosen most often
Rating block: validates 1 to 5 range

The idea is cleaner data arriving in your dashboard without extra validation work on your end. If you are collecting structured data at scale, this is genuinely useful.

Submission Inbox

This is where it gets interesting for small businesses.
Forminit added a submission inbox to the dashboard with:
Star submissions
Change status
Add notes
Switch between inbox and table views

Sound familiar? That is a lightweight lead management system. The same problem Formgrid was built to solve.

The difference is that Forminit's inbox is still fairly basic. Status changes and notes exist, but there are no follow-up reminders.
No conversion rate. No email was sent to you on the day you need to act. You still have to remember to check the dashboard yourself.

What Is Still Missing From Forminit

After the rebrand, Forminit remains a developer-focused form backend. It does not have:
A form builder ❌
A shareable form link ❌
Follow-up reminder emails ❌
Conversion rate tracking ❌
Open source code ❌
Self-hosting option ❌

If you do not have a website or need to share a form link via WhatsApp, email, or Instagram, Forminit cannot help you. You need to build your own form first and then deploy it.

If you care about data ownership, GDPR compliance, or running your form backend on your own infrastructure, Forminit gives you no option.

What Does Forminit Cost?

Forminit's pricing after the rebrand:
Free: 50 submissions per month
30-day submission history
Basic features
Pro: $19 per month
3,000 submissions per month
File uploads
Webhooks
CSV export
REST API
Business: $49 per month
Higher limits
Auto-responder emails
Custom SMTP
Workspaces

The free plan is the same as before.
The paid plans are more expensive than most alternatives in the same category.

The Best Forminit Alternatives in 2026

If you were happy with Getform and are now evaluating whether Forminit is still the right choice, here are the main alternatives worth looking at.

1. Formgrid: Form Backend, Form Builder, and Lead Management in One Place

Best for: Developers who want a form backend and small businesses who want to manage leads without a separate CRM.

Formgrid does everything Forminit does as a form backend. You point your existing HTML form at a Formgrid endpoint with
one change:

<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 
  />
  <textarea 
    name="message" 
    placeholder="Your Message"
  ></textarea>
  <input 
    type="text" 
    name="_honey" 
    style="display:none" 
  />
  <button type="submit">Send Message</button>
</form>

But Formgrid adds three things Forminit does not have.

A drag and drop form builder with a shareable link.

If you do not have a website or want to share a form via WhatsApp, email, or social media, Formgrid gives you a shareable link in under 2 minutes. No HTML required. No hosting needed.

A proper lead pipeline.

Every submission becomes a tracked lead with a status you can update in one click:
New → Contacted → Converted

At the top of the leads tab you see your conversion rate updated automatically:
3 of 23 leads converted (13%)

Forminit shows you a submission inbox. Formgrid shows you a business pipeline.

Follow-up reminder emails.

This is the feature Forminit does not have and the one that matters most for small businesses.

When a lead asks you to follow up in two weeks, you set a date for the follow-up. On that date, Formgrid emails you with the lead details and your notes attached.

You open the email. You have all the context.
You send the follow-up. You close the deal.

Forminit has no equivalent. You have to remember to check the dashboard yourself.

Notes on every lead.

After every conversation, add a private note directly on the lead. What you talked about. What they need. What is the next step?

The next time you open that lead, your note is right there. You always know where the conversation stands.

Pricing:
Free: $0/month 25 submissions
Premium: $8/month 1,000 submissions
Business: $29/month 15,000 submissions
plus auto-responder
emails and more

Formgrid's Pro equivalent is $8 per month compared to Forminit's $19 per month. You pay less and get a form builder, lead pipeline, and follow-up reminders that Forminit does not have.

Open source and self-hostable.

Formgrid is fully open source under the MIT license. You can run it on your own infrastructure with Docker for unlimited free usage. Forminit has no open source option.

👉 formgrid.dev

2. Formspree: The Original Form Backend

Best for: Developers who want a dead-simple form endpoint with no extras.

Formspree is one of the oldest and most reliable form backends available. It does one thing and does it well.
Point your form at an endpoint, and submissions arrive in your inbox.

Key features:
HTML form endpoint
Email notifications
File uploads on paid plans
Spam protection
Basic dashboard

Pricing: Free plan with 50 submissions
per month. Paid plans start at $10 per month for 200 submissions.

Drawback: No form builder. No lead
management. No notes. No follow-up
reminders. No open source. Submission
history is deleted after 30 days on the
free plan.

3. Basin: Minimal and No-Frills

Best for: Developers who want the simplest possible backend form with no distractions.

Basin is intentionally minimal. Point your form at their endpoint. Receive emails. Done.

Key features:
HTML form endpoint
Email notifications
Spam protection
Simple dashboard

Pricing: Free tier available.
Paid plans start at $8 per month.

Drawback: Very limited compared to
other options. No form builder. No lead
management. No self-hosting.
Minimal integrations.

4. Netlify Forms: Great If You Are Already on Netlify

Best for: Developers whose sites are deployed on Netlify.

If your site is on Netlify, forms work out of the box. Add one attribute to your form tag, and submissions are stored automatically.

<form 
  name="contact" 
  method="POST" 
  data-netlify="true"
>

Pricing: 100 submissions per month
free with Netlify. Additional submissions through Netlify's pricing.

Drawback: Only works on Netlify.
No lead management. No form builder.
No self-hosting.

Side-by-Side Comparison

Feature	Forminit	Formgrid	Formspree	Basin
HTML form endpoint	✅	✅	✅	✅
Email notifications	✅	✅	✅	✅
File uploads	✅ Paid	✅	✅ Paid	✅ Paid
Spam protection	✅	✅	✅	✅
Form builder	❌	✅	❌	❌
Shareable form link	❌	✅	❌	❌
Lead pipeline	Basic	✅	❌	❌
Notes on leads	✅	✅	❌	❌
Follow up reminders	❌	✅	❌	❌
Conversion tracking	❌	✅	❌	❌
Self-hostable	❌	✅	❌	❌
Open source	❌	✅	❌	❌
Free submissions	50/month	25/month	50/month	Limited
Starting price	$19/month	$8/month	$10/month	$8/month
GDPR friendly	⚠️	✅	⚠️	⚠️

Who Should Stay on Forminit

Forminit is still a good choice if:

You are a developer who needs protected API key authentication for server-side form submissions.

You need typed field validation (phone, email, country, rating) built in at the backend level without writing your own validation logic.

You are running an agency with multiple clients and want workspace isolation.

You were happy with Getform and just need to know your endpoints still work. They do.

Who Should Switch to Formgrid

Switch to Formgrid if:

You do not have a website and need a shareable form link you can send via WhatsApp or email without any code.

You want to track what happens to submissions after they arrive. Who did you contact? Who converted? Who needs a follow-up?

You want follow-up reminder emails that tell you when to act rather than relying on yourself to check a dashboard.

You care about open source and self-hosting.

You are paying $19 per month for Forminit and want the same functionality plus a form builder and lead management for $8 per month.

You need GDPR friendly hosting with no tracking and no data selling.

How to Switch From Getform or Forminit to Formgrid

If you are already using Getform or Forminit, switching to Formgrid takes about five minutes.

Step 1: Sign up at
formgrid.dev.
No credit card required.

Step 2: Create a new form and copy your Formgrid endpoint URL from the form details page.

Step 3: Replace your Forminit or Getform endpoint URL in your existing HTML form with your Formgrid endpoint URL. One line change.

That is the entire migration. Your form works exactly as before. The difference is that every submission now lands in a lead pipeline with a status, a notes field, and a follow-up reminder you can set in one click.

Final Thoughts

The Getform to Forminit rebrand is a genuine product update, not just a name change. Authentication modes and Form Blocks are useful additions for developers building more complex form workflows.

But the core limitation remains. Forminit is a headless form backend for developers. If you want to share a form link without writing HTML, track leads through a pipeline, set follow-up reminders, or
self-host your form backend. Forminit is not built for that.

Formgrid is.

👉 Start free at formgrid.dev

No credit card required. Free plan available. If you are already on Getform or Forminit, switching takes five minutes, and your form does not change at all.

Have questions about switching or setting
up lead tracking for your specific use
case? Email allen@formgrid.dev, and I will
help you get it working.

Formspree vs Formgrid: What Happens to Your Leads After They Hit Your Inbox

Allen Jones — Sun, 26 Apr 2026 15:34:23 +0000

Most comparisons between Formspree and Formgrid focus on price and features.

This one focuses on something more important.

What actually happens to your leads after they submit your form?

Because that is where most small businesses are losing customers without realising it.
Not at the form. Not at the inbox.
After the inbox.

The Moment Formspree's Job Ends

When someone fills in your contact form
and hits submit, Formspree does its job
cleanly and reliably.
Submission received ✅
Spam filtered ✅
Email notification sent ✅
Submission stored ✅

That is it. Formspree's job is done.

The submission is in your inbox. It is
in your Formspree dashboard. What happens next is entirely up to you.

Did you reply? Did you follow up? Did they become a customer? Did they go cold while sitting in your starred emails?

Formspree has no idea. It received the submission. That was the assignment.

For a developer building a portfolio contact form or a simple static site, that is completely fine. The submission is just a notification. There is nothing more to track.

But for a small business owner, that submission is a potential customer.
And potential customers need more than an email notification.
They need a system that tracks what happens to them after they reach out.

The Moment Formgrid's Job Begins

Formgrid does everything Formspree does
at the point of submission.
Submission received ✅
Spam filtered ✅
Email notification sent ✅
Submission stored ✅

But that is where the similarity ends.

Because in Formgrid, that submission does not just sit in a flat list. It becomes a tracked lead with a status, a notes field, and a follow-up reminder you can set in one click.

The submission landing in your dashboard is not the end of the workflow. It is the beginning.

What Happens in Formspree After

the Submission

You receive an email notification.
You open it. You read the enquiry.

Then one of three things happens.

Best case: You reply immediately, have a great conversation, and the person becomes a customer. Formspree worked perfectly.

Most common case: You reply when you get a chance, a day or two later. The lead is still warm, but not as warm as it was. You close some of them. You lose some of them. You have no idea which or why.

Worst case: The submission gets buried under 40 other emails.
You find it two weeks later. The person has already gone with someone else. You have no idea how many times this has happened because Formspree has no way to show you.

After a month of submissions in your Formspree dashboard, you have no idea at a glance:
Which ones did you reply to?
Which ones are still waiting?
Which ones became customers?
Which ones went cold?

You have a list of submissions.
Not a picture of your business.

What Happens in Formgrid After

the Submission

You receive the same instant email notification. You open it. You read the enquiry.

But then you open your Formgrid dashboard, and the lead is already
there waiting for you as a New lead with a status, a timestamp, and
all the submitter details.

At the top of the leads tab, you see your full pipeline at a glance:
New: 12 Contacted: 8 Converted: 3

And your conversion rate:
3 of 23 leads converted (13%)

You know immediately which leads need your attention. You know
exactly how your form is performing. You know your conversion rate without counting anything manually.

That is the difference between a form backend and a lead management system.

The Four Things That Happen

Differently in Formgrid

1. You Can See Where Every Lead Stands

In Formspree, every submission looks the same. New or old. Replied to or not. Converting or dead. It is all in the same flat list.

In Formgrid, every lead has a status:
New: You have not replied yet
Contacted: You have been in touch
Converted: They became a customer

When you reply to a lead, you change its status from New to Contacted. When they become a customer, you change it to Converted.

You can also update multiple leads at once using bulk actions.
Mark everything you replied to this morning as Contacted in one click.

Three stages. That is all you need to turn a flat list into a visible one pipeline.

2. You Can Add Notes to Every Lead

After you call a potential customer and they tell you their budget is
tight until next quarter, and to follow up in July, you need to write
that down somewhere attached to that specific person.

Formspree has no notes field. You end up writing it somewhere else or trying to remember it.

In Formgrid, every lead has a notes field that accepts up to 2000
characters. Write whatever you need to remember:
Called Thursday. Interested in the monthly package. Budget around
$800 per month. Partner needs to approve. Follow up after the 20th.

The next time you open that lead, your note is right there. You know
exactly where the conversation left off before you pick up the phone.
You sound prepared. You sound professional. You close more deals.

Without the note, you are starting from scratch every time. You ask
the same questions again. You sound like you do not remember them.
You lose the deal to someone who does.

3. You Can Set Follow-Up Reminders

Most leads do not convert on the first contact. They need a follow-up. Sometimes two or three.

The problem is that "follow up in two weeks" is not a system. It is a hope.

In Formgrid, you set a follow-up reminder directly on the lead.
Pick a date. Click Set Reminder.

On that date, Formgrid emails you with the lead details and your
notes so you have everything you need before you follow up.

Follow-up reminder: James Garside
from Contact Form
Lead: James Garside
Email: james@email.com
Current status: Contacted
Notes: Called Thursday. Budget
around $800. Follow up after
the 20th.
View this lead: [link]

You open that email. You have the
context. You send the follow-up. You close the deal.

Formspree has no equivalent of this. The moment the submission hits your inbox, Formspree is done. Whether you follow up is entirely up to you and your memory.

4. You Can See Your Conversion Rate

Do you know what percentage of your Formspree submissions become paying customers?

Almost certainly not. Because Formspree has no way to track that. It receives submissions and stores them. It has no concept of whether a submission converted or not.

In Formgrid, your conversion rate updates automatically as you move
leads through the pipeline:
3 of 23 leads converted (13%)

That number tells you things you cannot see from a flat submissions list.

If it drops, you know something changed. Maybe a new traffic source is bringing lower-quality leads. Maybe you are taking too long to reply. Maybe your pricing conversation needs work.

If it is climbing, you know your process is working. Keep doing
what you are doing.

Without that number, you are guessing. With Formspree, you are always guessing.

The Side-by-Side Comparison

Feature	Formspree	Formgrid
HTML form endpoint	✅	✅
Email notifications	✅	✅
Submissions dashboard	✅	✅
CSV export	✅	✅
Spam protection	✅	✅
File uploads	✅ Paid	✅
Lead pipeline	❌	✅
Notes on leads	❌	✅
Follow up reminders	❌	✅
Conversion rate tracking	❌	✅
Form builder	❌	✅
Shareable form link	❌	✅
Self-hostable	❌	✅
Open source	❌	✅
Free submissions	50/month	25/month
Starting price	$10/month	$8/month
GDPR friendly	⚠️	✅

The technical foundation is similar.
What happens after the submission is not even close.

How to Switch From Formspree

to Formgrid

If you are already using Formspree, switching to Formgrid takes about
five minutes and your form does not change at all.

Step 1: Sign up at
formgrid.dev.
No credit card required.

Step 2: Create a new form and
copy your Formgrid endpoint URL from the form details page.

Step 3: Replace your Formspree
endpoint in your existing HTML form with your Formgrid endpoint URL.
One line change:

<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 
  />
  <textarea 
    name="message" 
    placeholder="Your Message"
  ></textarea>

  <input 
    type="text" 
    name="_honey" 
    style="display:none" 
  />

  <button type="submit">Send Message</button>
</form>

That is the entire migration. Your form works exactly as before. The
difference is that every submission now lands in a lead pipeline with a status, a notes field, and a follow-up reminder you can set in one click.

If you do not have a website or want a standalone shareable form
link use the drag and drop builder to get a link in under 5 minutes.

What This Costs

Free: $0/month 25 submissions
Premium: $8/month 1,000 submissions
Business: $29/month 15,000 submissions
plus auto-responder
emails and more

Formspree's equivalent paid plan starts at $10 per month for 200
submissions with no lead management.

You pay less with Formgrid and get a complete lead pipeline on top of
everything Formspree already does.

When Formspree Is Still the Right Choice

To be honest, Formspree is still a perfectly good choice in one
specific situation.

If you are a developer building a simple contact form for a
portfolio site or a static site where submissions are just
notifications and nothing more. Formspree works fine.

You are not trying to convert those submissions into customers.
You are just receiving messages. The pipeline, the notes, and the
follow-up reminders add no value for that use case.

But the moment those submissions represent real revenue opportunities
the calculation changes completely.

A small business taking 20 enquiries per month needs to know which ones they replied to, which ones need a follow-up, and which ones became customers. Formspree cannot tell you any of that. Formgrid can.

Getting Started

If you are a small business owner using Formspree, and you have ever
lost track of a lead that could have become a customer. This is worth five minutes of your time.

Switch your form endpoint. Set up your first pipeline. See what your
conversion rate actually is.

That number alone might change how you think about your contact
form entirely.

👉 Start free at formgrid.dev

No credit card required. Free plan
available. Switching from Formspree takes five minutes, and your form
does not change at all.

Have questions about switching from
Formspree or setting up lead tracking for your specific use case? Email
allen@formgrid.dev, and I will help
you get it working.