Back to blog

How to Customize Your Form Submission Email Notifications (And Why It Matters)

Allen Jones
Allen Jones Posted on

If you've ever received a form submission email that looks like this:

name=John+Smith&email=john%40example.com
&message=Hello+there&_next=https://yoursite.com
&_gotcha=&session=Morning+Workshop
&totalAmount=%24150.00

You know exactly how frustrating it is. Raw field data dumped into an email with no structure, no labels, and no context. If you're the one reading those emails or worse, forwarding them to a colleague or client, it's a nightmare.

The problem gets worse when your form has many fields. Registration forms, event entries, client intake forms, and job applications. These forms can have 20, 30, or even 40 fields. When all of that arrives as one unformatted block of text, the person reading it has to hunt for the information they need every single time.

This guide shows you how to fix that completely using Formgrid's custom email template feature so every submission email arrives clean, organized, and readable by anyone.

Why Default Form Emails Look So Bad

Most form backends send notification emails by simply dumping whatever data they received into the email body. They don't know your form's structure. They don't know which fields are important. They don't know that your recipient needs to see Attendee Information before Session Selection, before Payment Details.

They just send everything in one flat list or worse, as raw URL-encoded data.

This is fine for a simple 3-field contact form. But the moment your form gets complex, the default email becomes unreadable.

Here are the most common complaints:

Internal fields showing up: hidden fields like _next, _gotcha, and _subject appear in the email even though they're not real data.

No section headers: All fields listed in one flat list with no grouping or context.

No formatting: Long text values show as one unbroken paragraph with no line breaks.

Wrong field order: Fields appear in submission order not in a logical reading order.

Generic subject line: Every email says "New form submission" with no context about who submitted or what they selected.

All of these problems are solved with a custom email template.

What a Custom Email Template Looks Like

Instead of a raw data dump, imagine receiving this for every workshop registration:

Image description

Clean. Organized. Readable by anyone. Whether they're a developer, an event coordinator, or an office manager who just needs to know who's coming and what they paid.

That's exactly what Formgrid's custom email template feature delivers.

Who Needs Custom Email Templates

Event organizers: Workshop registrations, conference entries, seminar signups. Your coordinator needs to see the attendee details in a logical order, not a random field dump.

Small businesses: Client intake forms, service booking forms, and quote request forms. Your team needs to act on submissions quickly. A clean email means faster response times.

Freelancers: Project brief forms, onboarding forms. When a new client submits their brief, you want it formatted like a document you can actually work from.

Nonprofits: Volunteer applications, membership forms, donation forms. Your coordinator needs to process applications efficiently without deciphering raw data.

Agencies: Building forms for clients. Your clients expect professional emails that match their brand and workflow.

If you're sending form submission emails to anyone who isn't a developer, custom email templates are not optional. They're essential.

How Formgrid Custom Email Templates Work

Formgrid uses Mustache templating: A simple, widely used templating language that lets you write an HTML email with placeholders that get replaced with real submission data automatically.

The Available Variables

{{ _formName }}    — name of your form
{{ _time }}        — submission timestamp
{{ fieldName }}    — any field by its exact name
{{# fields }}      — loop through all fields
  {{ _name }}      — field label inside the loop
  {{ _value }}     — field value inside the loop
{{/ fields }}      — close the loop

The {{ fieldName }} variable is the most powerful one. It maps directly to the name attribute of your HTML input field. So if your form has:

<input type="text" name="attendeeName" />

You can use {{ attendeeName }} anywhere in your email template and it will be replaced with whatever the user typed.

Two Ways to Use Custom Email Templates

Option 1: The Simple Loop (Works for Any Form)

If you just want clean, formatted emails without thinking too much about structure, use the fields loop. This works for any form automatically:

<div style="font-family: sans-serif; 
            max-width: 600px; 
            margin: 0 auto;">

  <h2 style="color: #1d4f3d;">
    New Submission — {{ _formName }}
  </h2>

  {{# fields }}
  <div style="margin-bottom: 16px; 
              border-bottom: 1px solid #eee; 
              padding-bottom: 16px;">
    <p style="margin: 0; 
              font-size: 12px; 
              color: #888; 
              text-transform: uppercase;">
      {{ _name }}
    </p>
    <p style="margin: 4px 0 0; 
              font-size: 15px; 
              color: #333;">
      {{ _value }}
    </p>
  </div>
  {{/ fields }}

  <p style="font-size: 12px; color: #999;">
    Submitted: {{ _time }}
  </p>

</div>

This renders every field cleanly with its label above and value below. No internal fields, no raw data, no mess. Just clean readable output for every submission automatically.

Option 2: Sectioned Template

(For Complex Registration Forms)

If your form has multiple sections, like a workshop registration with attendee details, session selection, dietary requirements, and payment. You can group fields into sections with clear headers:

<div style="font-family: sans-serif; 
            max-width: 600px; 
            margin: 0 auto; 
            color: #1f2937;">

  <h2 style="color: #1d4f3d; 
             border-bottom: 2px solid #e8f3ee; 
             padding-bottom: 10px;">
    New Registration: {{ _formName }}
  </h2>

  <h3 style="color: #1d4f3d;">
    Attendee Information
  </h3>
  <p><strong>Name:</strong> {{ attendeeName }}</p>
  <p><strong>Email:</strong> {{ email }}</p>
  <p>
    <strong>Company:</strong> {{ company }}
  </p>
  <p><strong>Phone:</strong> {{ phone }}</p>

  <h3 style="color: #1d4f3d; 
             margin-top: 24px;">
    Session Selection
  </h3>
  <p>
    <strong>Workshop:</strong> {{ workshopName }}
  </p>
  <p><strong>Date:</strong> {{ workshopDate }}</p>
  <p><strong>Format:</strong> {{ format }}</p>

  <h3 style="color: #1d4f3d; 
             margin-top: 24px;">
    Dietary Requirements
  </h3>
  <p>
    <strong>Dietary Preference:</strong> 
    {{ dietaryPreference }}
  </p>
  <p>
    <strong>Allergies:</strong> {{ allergies }}
  </p>

  <h3 style="color: #1d4f3d; 
             margin-top: 24px;">
    Payment
  </h3>
  <p>
    <strong>Ticket Type:</strong> {{ ticketType }}
  </p>
  <p>
    <strong>Total:</strong> {{ totalAmount }}
  </p>
  <p>
    <strong>Payment Method:</strong> 
    {{ paymentMethod }}
  </p>

  <h3 style="color: #1d4f3d; 
             margin-top: 24px;">
    Notes
  </h3>
  <p>{{ notes }}</p>

  <hr style="margin-top: 32px; 
             border: none; 
             border-top: 1px solid #e5e7eb;" />
  <p style="font-size: 12px; 
            color: #9ca3af; 
            margin-top: 12px;">
    Submitted: {{ _time }}
  </p>

</div>

The variable names, {{ attendeeName }}, {{ workshopName }}, {{ totalAmount }}, must match the name attributes of your HTML form inputs exactly.

So if your form has:

<input type="text" name="attendeeName" />
<select name="workshopName">...</select>
<input type="hidden" name="totalAmount" />

The variables {{ attendeeName }}, {{ workshopName }}, and {{ totalAmount }} will be replaced with the actual submitted values automatically.

This gives you complete control over the layout, grouping, and the order of every notification email.

How to Set Up Custom Email Templates

in Formgrid

Custom email templates are available on the Business plan at $29/month.

Step 1: Go to Your Form Settings

Log in to your Formgrid dashboard, open your form, and click the Settings tab.

Image description

Step 2: Find the Custom Email Template Section

Scroll down to the Custom Email Template section. If you're on the Business plan, you'll see the full template editor. If you're on the free or Premium plan, you'll see a prompt to upgrade.

Image description

Step 3: Enable the Custom Template

Toggle the custom template on. The editor pre-populates with a starter template using the simple fields loop, a clean starting point that works for any form immediately.

Step 4: Customize Your Template

Edit the HTML to match your needs. Use the simple loop for basic forms or build a sectioned template for complex registration forms.

The available variables panel shows every variable you can use. Click any variable chip to copy it to your clipboard instantly.

Step 5: Preview and Save

Click Preview to see exactly how your email will look with sample data substituted in. When you're happy, click Save Template.

From this point on every submission to your form will use your custom template, clean, organized, and formatted exactly the way you designed it.

Step 6: Test It

Submit a test entry on your form and check your inbox. Your notification email should arrive formatted exactly as you designed it.

Custom Subject Lines

You can also control the email subject line using the _subject hidden field in your HTML form:

<input 
  type="hidden" 
  name="_subject" 
  value="Workshop Registration — {{ attendeeName }}"
/>

Or set it dynamically with JavaScript before submission:

document.getElementById('subjectField').value = 
  'Registration - ' + name + ' - ' + ticketType;

This means every submission email has a meaningful subject line: "Workshop Registration. Sarah Johnson. Early Bird", instead of the generic "New form submission."

What Else Is Included in the Business Plan

Custom email templates are part of the Formgrid Business plan that also includes:

  • 15,000 submissions/month
  • Webhooks: Connect to Zapier, Make, Slack, Notion, Google Sheets, and more
  • Auto-responder emails: Automatically Send confirmation emails to your form submitters
  • Priority support

All for $29/month.

Final Thoughts

Default form notification emails are fine for simple contact forms. But the moment your form gets complex, with multiple sections and many fields, non-technical recipients, a raw data dump in your inbox, it becomes a real problem.

Custom email templates solve this completely. Your emails arrive formatted, organized, and readable by anyone. Whether they're a developer, an event coordinator, or an office manager, processing registrations.

With Formgrid.dev you get:

✅ Full HTML email template control
✅ Mustache variables for any field
✅ Sectioned layouts for complex forms
✅ Custom subject lines
✅ Preview before saving
✅ Works with any HTML form on any website

Start free and upgrade to Business when you're ready for custom templates.

👉 Try Formgrid free at formgrid.dev

Full disclosure: I built Formgrid. Written as honestly as I could let you know in the comments if anything looks off.

Tags: #webdev #javascript #tutorial #productivity #formapi