Coder Legion - Recent posts tagged forms

Why I Use Formgrid for Every Client Website I Build

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

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

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

Then I got to the contact form.

The Problem Every Web Developer Hits

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

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

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

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

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

I thought: I could build this.

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

Why I Almost Did Not Use My Own Tool

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

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

What stopped me was a simple question:

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

The answer was obvious.

What I Actually Did

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

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

How to Send a Confirmation Email to Your Webflow Form Submitters Without Zapier or Make

Sat, 23 May 2026 01:29:25 +0000

Someone fills out your Webflow contact form.
They click submit. They wait.

Nothing arrives in their inbox.

No confirmation. No acknowledgement.
No "thank you, we received your message."
Just silence.

They wonder if the form worked.
They submit it again. You receive two identical enquiries and have no idea which one to respond to.

This is one of the most common frustrations Webflow users run into. Your form looks professional. Your site looks polished.
But the moment someone submits your form, they get nothing back.

This post explains exactly why this happens, why the most commonly suggested fixes no longer work, and how to solve it completely
in about 5 minutes, without Zapier, Make, or MailerSend.

Why Webflow Cannot Send Confirmation Emails to Submitters

Webflow's native form handling notifies you when someone submits your form. Not to notify them.

By default, Webflow sends an email to the address associated with your Webflow account every time a form is submitted. You can
customize who receives that notification, what the subject line says, and what the body contains.

But that notification goes to you.
Not to the person who submitted the form.

There is no native setting in Webflow that sends an automatic confirmation email back to the submitter the moment they fill in
your form.

What Happened to Webflow Logic

For a while, there was hope that Webflow Logic would solve this. Webflow Logic was an automation feature that allowed you to build
workflows triggered by form submissions, including sending emails to submitters.

Webflow Logic was discontinued on June 27, 2025.

If you have read tutorials suggesting you use Webflow Logic for auto-responder emails, those tutorials are now outdated. Webflow Logic no longer exists.

The Workaround Most People Find

After discovering that Webflow cannot do this natively, most people find the same workaround:
Connect Webflow to Make
Connect Make to MailerSend
Build a scenario that triggers when a form is submitted
Map the form fields to email variables
Send the confirmation email through MailerSend

This works. But it requires:
A Make account: $9 to $16 per month
A MailerSend account: free to $30 per month
Several hours to set up and test
A dependency on three separate services
that can each break independently

You are paying for multiple subscriptions and maintaining a complex integration just to send one confirmation email when someone fills in a form.

There is a simpler way.

The Simpler Solution: Replace the Webflow Form With a Formgrid Endpoint

Formgrid is an open-source form backend that works with any website, including Webflow. Instead of Webflow handling your form submissions, you point your form at a Formgrid endpoint URL.

Formgrid receives every submission, saves it to your dashboard, sends you an email notification, and automatically sends a branded confirmation email back to the person who submitted the form.

Auto-responder emails are included on the Premium plan at $12 per month.
No Zapier. No Make. No MailerSend.
No complex scenarios to build or maintain.

Here is exactly how to set it up.

What You Will Need

A Formgrid account: Sign up for free at formgrid.dev
No credit card required
Auto-responder emails are available
on Premium at $12 per month
A Webflow site with a form:
Any Webflow form works
Contact forms, enquiry forms,
registration forms, booking forms
A Google account (optional):
If you also want submissions to land
in Google Sheets automatically

Part One: Set Up Your Formgrid Form

Step 1: Create Your Formgrid Account

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

The free plan lets you test the setup and receive submissions. Upgrade to Premium at $12 per month to enable auto-responder emails.

Step 2: Create a New Form

Once you are in your Formgrid dashboard, click New Form. Give it a name that matches the Webflow form you are connecting to. For example, "Contact Form" or "Booking Enquiry."

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

Step 3: Copy Your Endpoint URL

After creating your form, open it in your Formgrid dashboard. You will see your unique endpoint URL displayed prominently in the Overview tab.

Copy this URL. You will need it in the next section when you update your Webflow 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 Webflow and never need to touch it again.

Part Two: Update Your Webflow Form

Step 4: Open Your Webflow Form Settings

Log in to your Webflow account and open the project containing the form you want to connect. In the Webflow Designer, click
on your form element to select it. Then open the form settings panel.

Step 5: Set the Form Action URL

In the form settings panel, locate the Action field. By default, this is either empty or set to Webflow's internal submission handler.

Replace the 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 6: Check Your Field Names

Formgrid uses the name attribute of each form field to identify submissions and to populate variables in your auto-responder email.

In the Webflow Designer, click on each input field in your form and check the name value in the element settings panel. Make sure the email field is named "email" exactly. Formgrid uses this
field to know where to send the confirmation email.

Field names like "name", "email", "phone", and "message" will produce
clean, readable variables in your auto-responder template. Update any
that are unclear or auto-generated by Webflow.

Step 7: Publish Your Webflow Site

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

Step 8: Submit a Test Entry

Before setting up the auto-responder, confirm that submissions are reaching Formgrid correctly. Visit your live Webflow 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 Webflow 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, since unpublished changes in Webflow do not take effect on the live site.

Part Three: Set Up Auto-Responder Emails in Formgrid

This is where Formgrid replaces the entire Webflow + Make + MailerSend workflow. Auto-responder emails are built directly into Formgrid. No external services required.

Step 9: Open Your Form Settings

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

Step 10: Find the Auto-Responder Section

Scroll down to the Auto-Responder Emails section. If you are on the
Premium plan at $12 per month, you will see the full auto-responder
configuration. If you are on the free plan, you will see a prompt
to upgrade.

Step 11: Enable the Auto-Responder

Toggle the auto-responder on. Once enabled, Formgrid will automatically send a confirmation email to the email address submitted in your form every time someone fills it in.

The email field in your Webflow form must be named "email" for Formgrid to know where to send the confirmation. If your email field has a different name attribute, update it in your Webflow Designer and republish.

Step 12: Write Your Auto-Responder Email

Set your subject line and write the body of your confirmation email.

Formgrid uses Mustache templating, which lets you personalize the
confirmation email with the actual values submitted in the form.

The available variables are:

{{ _formName }}    
Name of your form

{{ _time }}        
Submission timestamp

{{ fieldName }}    
Any field by its exact name attribute

{{# fields }}      
Loop through all fields
  {{ _name }}      Field label
  {{ _value }}     Field value
{{/ fields }}      
Close the loop

For example if your Webflow form
has a field with name="name" you
can use {{ name }} in your
auto-responder to greet the
submitter by their actual name.

A simple confirmation email
template that works for any form:

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

  <h2 style="color: #1d4f3d;">
    Thanks for reaching out
  </h2>

  <p>
    Hi {{ name }}, we have received 
    your message and will get back 
    to you shortly.
  </p>

  <p style="color: #6b7280;">
    Here is a summary of what 
    you submitted:
  </p>

  {{# fields }}
  <div style="margin-bottom: 12px; 
              border-bottom: 1px solid #f3f4f6; 
              padding-bottom: 12px;">
    <p style="margin: 0; 
              font-size: 11px; 
              color: #9ca3af; 
              text-transform: uppercase; 
              letter-spacing: 0.05em;">
      {{ _name }}
    </p>
    <p style="margin: 4px 0 0; 
              font-size: 14px; 
              color: #374151;">
      {{ _value }}
    </p>
  </div>
  {{/ fields }}

  <p style="margin-top: 24px; 
            color: #6b7280; 
            font-size: 13px;">
    Submitted: {{ _time }}
  </p>

</div>

For a booking or registration form where you want a more specific
branded confirmation:

<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;">
    Your enquiry has been received
  </h2>

  <p>
    Hi {{ name }},
  </p>

  <p>
    Thank you for getting in touch. 
    We have received your enquiry and 
    someone from our team will respond 
    within 24 hours.
  </p>

  <p>
    If you have any urgent questions 
    in the meantime feel free to 
    reply directly to this email.
  </p>

  <hr style="border: none; 
             border-top: 1px solid #e5e7eb; 
             margin: 24px 0;" />

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

</div>

The variable {{ name }} must match the name attribute of your Webflow
form field exactly. If your name field has name="fullName" then use
{{ fullName }} in your template.

Step 13: Preview and Save

Click Preview to see exactly how your confirmation email will look
with sample data substituted in. When you are happy with it, click
Save.

From this point on, every submission through your Webflow form will
automatically trigger a confirmation email to the submitter. Every single time. Instantly.

Part Four: Test the Full Flow

Step 14: Submit a Real Test Entry

Visit your live Webflow site and fill in your form using a real email address you have access to. Submit the form.

Within a few seconds, you should receive
two emails:
Email 1: Your notification email
Sent to you as the form owner
Contains the submission data
Email 2: The auto-responder confirmation
Sent to the email address you submitted
Contains your branded confirmation message

Your Notification Email:

Auto-responder/Confirmation Email:

If the auto-responder does not arrive, check your spam folder first. Then confirm in your Formgrid settings that the auto-responder is toggled on and that your form has an "email" field named correctly.

What the Complete Flow Looks Like

Once everything is set up here is exactly what happens every time
someone fills in your Webflow form:
Visitor fills in your Webflow form
and clicks Submit
↓
The browser sends the data directly
to your Formgrid endpoint
↓
Formgrid receives and saves the
submission to your dashboard
↓
Email notification sent to you
and any other configured recipients
↓
Auto-responder confirmation email
sent instantly to the submitter
↓
Spam protection runs in the background
to filter out bot submissions
↓
If Google Sheets is connected, a new
row is added to your spreadsheet

Your submitter gets an instant professional confirmation. You get
a clean, organized notification. The submission is saved in your
Formgrid dashboard as a tracked lead. All of this happens automatically with no Zapier, no Make, and no
MailerSend involved.

Comparing the Two Approaches

Here is the honest comparison between the Webflow + Make + MailerSend
workaround and the Formgrid approach:

Webflow + Make + MailerSend:
Setup time: 2 to 4 hours
Monthly cost: $9 to $46 across
three services
Dependencies: three separate services
that can each break
independently
Maintenance: occasional scenario
failures to debug
Delay: slight delay between submission and confirmation email

Formgrid Premium:
Setup time: 5 to 10 minutes
Monthly cost: $12 per month total
Dependencies: one service
Maintenance: none
Delay: confirmation sent instantly
on submission

What Else Is Included in Formgrid Premium

Auto-responder emails are just one part of the Formgrid Premium plan
at $12 per month. The full plan includes:
1,000 submissions per month
File uploads up to 1GB per file
Google Sheets syncs 500 rows per month
Lead pipeline
CSV export of all submissions
Remove Formgrid branding
Up to 3 email notification recipients
Auto-responder emails to submitters
Advanced spam protection

And if you need custom-branded email templates for your notification emails or unlimited Google Sheets sync, the
Business plan at $29 per month includes
everything in Premium plus:
Custom HTML email templates
Unlimited Google Sheets sync
Webhooks and Zapier integration
15,000 submissions per month
Priority support with direct access
to the founder

Frequently Asked Questions

Does this replace my Webflow form
or modify it?

It replaces where Webflow sends the submission data. Your form still looks and works the same for your visitors. The only change is in the
form Action URL setting in your Webflow Designer. Your form design,
fields, and styling are completely unchanged.

What if my Webflow form has a
field named something other than
"email"?

Formgrid looks for a field named
"email" to send the auto-responder. If your email field has a different name attribute, update it in your
Webflow Designer to "email" and republish your site.

Will my Webflow success message
still show after submission?

Yes. Webflow shows its success message based on the form submission event in the browser. Since you are still submitting the same Webflow form, the success message behavior is unchanged.

Can I use this with multiple
Webflow forms?

Yes. Create a separate form in your Formgrid dashboard for each Webflow form you want to connect. Each one gets its own endpoint URL and its own auto-responder configuration.

What happens if someone submits
the form but enters a fake email?

The auto-responder will attempt to deliver to whatever email was entered. If the email bounces or does not exist, Formgrid handles the bounce gracefully. The submission is still saved to your dashboard, so you never lose the data.

Is Formgrid open source?

Yes. Formgrid is fully open source under the MIT license. You can
self-host it for free using Docker if you prefer to run your own
instance rather than using the managed version.

Final Thoughts

Webflow builds beautiful websites. But when it comes to sending
confirmation emails back to your form submitters, it has never offered a native solution. Webflow Logic was the closest thing to a fix, and it was discontinued in June 2025.

The workaround of connecting Webflow to Make to MailerSend works, but it is complex, expensive, and fragile. Three tools that can each fail
independently for a feature that should be a single checkbox.

Formgrid solves this with one endpoint URL change in your Webflow
Designer and a few minutes of configuration in your Formgrid
dashboard. Every submitter gets an instant professional confirmation.
Every submission is saved as a tracked lead in your dashboard. Google Sheets sync is included. No Zapier required.

If you are running a Webflow site and your form submitters are currently getting no confirmation after they submit, this setup will fix that completely in the time it takes to make a coffee.

👉 Start free at formgrid.dev

No credit card required.
Auto-responder emails are available
on Premium at $12 per month.
Upgrade when you are ready.

If you have questions about connecting your specific Webflow
form, reply in the comments or email Emails are not allowed directly.
I read and reply to every message.

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

Why Contact Form 7 Emails Look Unprofessional and How to Fix It

Fri, 10 Apr 2026 00:37:18 +0000

You installed Contact Form 7 on your WordPress site.
Someone fills out your contact form. You receive the email.

And it looks like this:

Or if you are lucky, it looks like this:

From: John Smith
Email: *Emails are not allowed*
Message: Hello there
_wpcf7: 1234
_wpcf7_version: 5.7
_wpcf7_locale: en_US
_wpcf7_unit_tag: wpcf7-f1-p2-o1
_wpcf7_container_post: 2

Raw field data. Internal WordPress variables.
No structure. No labels.
No context.

If you are an event manager receiving 20 registrations a day, or a small business owner trying to act quickly on client inquiries, this email is a nightmare to read.

This guide explains exactly why CF7 emails look the way they do and gives you two ways to fix it permanently.

Why Contact Form 7 Emails Look So Bad

Contact Form 7 sends notification emails by dumping whatever data it receives into the email body.
It does not know your form's structure.
It does not know which fields are important.
It does not know that your recipient needs to see
Contact Information, Event Details, before Payment Summary.

It just sends everything in one flat list, including internal WordPress fields that your recipient should never see.

Here are the most common problems CF7 users complain about:

Internal fields showing up in every email

CF7 includes internal WordPress variables
like _wpcf7, _wpcf7_version,
_wpcf7_unit_tag, and
_wpcf7_container_post in every
notification email. These are not your
data. They are WordPress internals.
But CF7 sends them anyway.

No section headers

All fields appear in one flat list with no grouping. Name, email, message, event selection, dietary requirements, and payment details are all running together with no separation.

No formatting on long text

Long text values appear as one unbroken paragraph with no line breaks. Reading a multi-paragraph message in a CF7 email is genuinely difficult.

Wrong field order

Fields appear in the order they were submitted, not in a logical reading order. If your form has 20 fields, the email is impossible to scan.

Generic subject line

Every email says "New message from your contact form" with no context
about who submitted or what they selected.
If you receive 50 submissions per day, every email looks identical
in your inbox.

Looks like spam

Because CF7 relies on WordPress PHP
mail for delivery and includes internal fields and raw data.
Gmail and Outlook increasingly treat CF7 notifications as suspicious.
Many CF7 emails end up in spam folders or get rejected entirely.

The problem gets worse the more fields your form has. A simple 3-field contact form is manageable.
But event registration forms, client intake forms, and job application forms can have 20 to 40 fields. When all of that arrives
as one unformatted block, the person reading it has to hunt for the
information they need every single time.

What a Professional Form Email Should Look Like

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

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

That is what you should be receiving.
Here is how to get there.

Who Does This Problem Affect Most

Event organizers

Workshop registrations, conference entries, and seminar signups.
Your coordinator needs to see attendee details in a logical order, not a random field dump. For a 200-person event, receiving unreadable registration emails is hours of unnecessary work every time.

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 and fewer mistakes.

Freelancers and consultants

Project brief forms, onboarding forms.
When a new client submits their project brief, you want it formatted like a document you can actually work from, not a wall of raw text.

Nonprofits and community organizations

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

If you are sending form submission emails to anyone who is not a developer, the default CF7 email format is not good enough.

Fix 1: Customize CF7 Email

Templates Directly

Contact Form 7 does let you customize
your email template. It is not beautiful, but it works for simple forms.

Step 1: Open your CF7 form settings

In your WordPress dashboard, go to Contact and click on your form. Click the Mail tab at the top.

Step 2: Edit the message body

By default, the message body uses the [all_fields] shortcode, which
dumps everything. Replace it with your specific field shortcodes:

From: [your-name]
Email: [your-email]
Phone: [your-phone]

Message:
[your-message]

Replace [your-name], [your-email],
[your-phone], and [your-message]
with the actual field names from your form.

Step 3: Customize the subject line

Change the subject line from the
generic default to something meaningful:

New inquiry from [your-name] 
via [_site_title]

This gives every email a subject line that shows who submitted and where it came from.

Step 4: Remove internal fields

Make sure your message body only includes fields you actually want
to see. Do not include
[_wpcf7], [_wpcf7_version], or any other internal WordPress
variables.

The limitation of this approach

CF7 email customization is plain text.
You can control which fields appear and in what order, but you cannot add section headers, styled layouts, colored backgrounds, or anything
that makes the email look genuinely professional.

For a simple contact form, this is probably enough.
For complex registration forms with 10 or more fields, you will still end up with a long flat list that is hard to scan.

Fix 2: Use Formgrid for Fully Customizable Email Templates

If you want complete control over how your notification emails look
including section headers, branded colors, grouped fields, and custom subject lines, consider switching to Formgrid as your form backend.

Formgrid is an open-source form backend and form builder.
On the Business plan at $29/month, you get full HTML email template control using 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 template variables

{{ _formName }}    
Name of your form

{{ _time }}        
Submission timestamp

{{ fieldName }}    
Any field by its exact name attribute

{{# fields }}      
Loop through all fields
  {{ _name }}      Field label
  {{ _value }}     Field value
{{/ fields }}      
Close the loop

Option A: The simple loop 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.
Clean, readable output for every submission automatically.

Option B: 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> {{ name }}</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> {{ date }}</p>
  <p><strong>Format:</strong> {{ format }}</p>

  <h3 style="color: #1d4f3d; 
             margin-top: 24px;">
    Payment
  </h3>
  <p>
    <strong>Ticket Type:</strong> 
    {{ ticketType }}
  </p>
  <p>
    <strong>Total:</strong> 
    {{ totalAmount }}
  </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 like {{ name }},
{{ workshopName }}, and
{{ totalAmount }} must match the
name attributes of your HTML form
inputs exactly:

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

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

Custom subject lines

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

<input 
  type="hidden" 
  name="_subject" 
  value="New Registration from {{ name }}"
/>

This means every submission email has
a meaningful subject line like
"New Registration from Sarah Johnson"
instead of the generic
"New form submission."

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

Step 2: Find the Custom Email

Template section

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

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.

Step 5: Preview and save

Click Preview to see exactly how your
email will look with sample data
substituted in. When you are 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.

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.

How to Use Formgrid With WordPress

Formgrid is not a WordPress plugin.
It works through a simple HTML form
or iframe embed in your WordPress
Custom HTML block.

Option A: Replace CF7 with an

HTML form

Step 1: Sign up free at
formgrid.dev.
No credit card required.

Step 2: Create a new form and copy
your endpoint URL from the Overview tab:

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

Step 3: In your WordPress page editor
add a Custom HTML block and replace
your CF7 shortcode with this:

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

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

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

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

  <input 
    type="text" 
    name="_honey" 
    style="display:none" />

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

</form>

Step 4: Publish the page and submit a test entry.

Option B: Embed the Formgrid form builder

If you do not want to write any HTML, you can build your form using Formgrid's drag-and-drop form builder and embed it in WordPress using an iframe.

Step 1: Build your form in the Formgrid form builder. Drag and drop your fields, customize labels, and click Save.

Step 2: Copy your shareable form
link from the Overview tab.

Step 3: In your WordPress page editor, add a Custom HTML block and paste this embed code:

<iframe 
  src="https://share.formgrid.dev/f/your-form-id"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;">
</iframe>

Your form is now embedded in your WordPress page, and all submissions go directly to Formgrid.

Formgrid Business Plan Includes

More Than Just Email Templates

Custom email templates are part of the Formgrid Business plan at $29/month
which also includes:

15,000 submissions per month

Auto-responder emails
Automatically send confirmation emails to your form submitters. Every person who registers gets an instant professional confirmation.

Multiple notification recipients
Send submissions to your whole team simultaneously. Everyone who needs to see registrations gets them
in their inbox.

Custom subject lines
Every email has a meaningful subject line showing who submitted and what they selected.

Google Sheets sync
Every submission appears automatically as a new row in your spreadsheet.
No Zapier. No manual copying.

Webhooks
Connect to Slack, Notion, and other tools when a submission arrives.

Priority support
Direct access to the founder for any issues.

CF7 vs Formgrid: Which One

Should You Use

You have a simple 3-field contact 
form and just need basic improvements:

Customize CF7 directly using field shortcodes. 
Takes 10 minutes.
Free.


You have a complex registration form with multiple sections, and your team needs to read submissions quickly:

Switch to Formgrid. Full HTML email template control. Section 
headers. 
Branded colors. Clean, organized notifications.
Business plan at $29/month.


You are non-technical and do not want to touch any code:

Use Formgrid's form builder via iframe. Build your form with drag 
and drop. Upgrade to Business for professional email templates.

The Real Cost of Unreadable

Form Emails

It is easy to think of messy form emails as just a minor annoyance.
But the real cost is higher than it looks.

Every time you receive an unformatted registration email and have to hunt through raw field data to find the information you need, that is time wasted.
For a small team processing 50 registrations per event, that waste
adds up to hours.

Every time you forward an unformatted submission to a colleague, and they have to decode it, that is friction that slows your whole operation down.

And every time a submission arrives looking like spam and gets filtered by Gmail before it ever reaches you. That is a lead or registration you never knew you missed.

Clean, organized notification emails are not a luxury.
They are the difference between a form that works or your business and a form that creates extra work every single day.

Frequently Asked Questions

Can I fix CF7 email formatting
without switching tools?

Yes. Go to your CF7 form settings, click the Mail tab, and replace
[all_fields] with specific field shortcodes in the order you want
them.
This removes internal fields and gives you control over the field
order. It will not give you section headers or HTML styling, but it is a free improvement that takes 10 minutes.

Does Formgrid work with any
WordPress theme?

Yes. Formgrid uses a standard HTML form or an iframe embed. Both work
with any WordPress theme, including Astra, Divi, Elementor, GeneratePress, and Kadence.

What happens to my submissions
if the email fails?

With CF7 and PHP mail, if the email fails, the submission is lost permanently.
With Formgrid, every submission is saved to your dashboard regardless of email delivery.
You can always log in and see every submission ever received.

Can I see a preview before
my template goes live?

Yes. Formgrid's template editor includes a Preview button that shows
you exactly how your email will look with sample data substituted in before you save and go live.

Do I need to know HTML to use
custom email templates?

Basic HTML knowledge helps, but is not required.
The template editor pre-populates with a clean starter template that works immediately.
You can customize colors and layout by editing simple inline CSS values.

Final Thoughts

Contact Form 7 email notifications look the way they do because CF7
was built as a simple form tool, not an email design tool. For basic
contact forms, the default output is acceptable.

But the moment your form gets complex
with multiple sections and many fields, and your recipients need to act quickly on what they receive, the default CF7 email becomes a real problem.

You have two options:

Customize CF7 directly using field shortcodes for a free improvement
that takes 10 minutes.

Or switch to Formgrid for full HTML email template control, section headers, branded colors, custom subject lines, and a submission dashboard that saves every entry regardless of email delivery.

Either way, your notification emails will stop looking like spam and start looking like professional business email communications.

Try Formgrid free at formgrid.dev

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