Email notifications
FormFlow sends automated email notifications through SendGrid using dynamic templates. There are 4 message categories that you should create custom templates for:
SUCCESSVALIDATIONERRORREJECTION
Each category can have its own SendGrid template with custom branding and styling.
In addition to a message_category, each message will also have a message_type, and you will want to handle different types of messages with in-template logic, as well as define a fallback condition to send a generic email in case you encounter a new type of email in the future.
Email Notification Types
Success emails
Positive confirmations as feedback to the user that all is going according to plan.
Validation emails
Information requests – something about a submission is incomplete and requires the submitting user's attention.
Rejection emails
Active rejections: something about the submisison is unsatisfactory. It is likely that the user can do something about the situation.
Error emails
Advisory email regarding processing failures. In these cases it is unlikely that the user can do something, and they should probably contact a support channel.
Setting Up SendGrid Templates
FormFlow uses SendGrid's dynamic templates to send emails. Each template uses Handlebars syntax to dynamically insert data from the payload.
Template Structure
All email payloads follow a standardized, flattened structure for SendGrid:
{
subject: string; // Email subject line
message_category: string; // SUCCESS, VALIDATION, ERROR, or REJECTION
message_type: string; // Specific type within category
submission_id: string; // Unique submission identifier
suggested_message: string; // Main message body
data: { // Optional additional data
// Category-specific fields
}
}Example: Validation Template Setup
1. Create the HTML Template in SendGrid:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validation - Missing Information</title>
</head>
<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background-color: #e8e8e8;">
<table role="presentation" style="width: 100%; border-collapse: collapse;">
<tr>
<td align="center" style="padding: 40px 20px;">
<table role="presentation" style="max-width: 700px; width: 100%; border-collapse: collapse;">
<!-- Logo -->
<tr>
<td style="padding: 0 0 30px 0;">
<img src="https://insly.com/wp-content/uploads/2024/06/Logo-with-text-4.png" alt="Insly" style="height: 40px; display: block;">
</td>
</tr>
<!-- Content Card -->
<tr>
<td style="background-color: #ffffff; border-radius: 8px; padding: 50px 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<h1 style="margin: 0 0 30px 0; color: #1a1a1a; font-size: 28px; font-weight: 600; line-height: 1.3;">
Additional information is required
</h1>
<!-- Dynamic suggested message -->
<p style="margin: 0 0 20px 0; color: #333333; font-size: 18px; line-height: 1.6;">
{{suggested_message}}
</p>
<!-- Conditional missing fields list -->
{{#if data.missing_fields}}
<p style="margin: 0 0 15px 0; color: #333333; font-size: 18px; line-height: 1.6;">
The following fields are missing or incomplete:
</p>
<ul style="margin: 0 0 20px 0; padding-left: 25px; color: #333333; font-size: 18px; line-height: 1.8;">
{{#each data.missing_fields}}
<li>{{this}}</li>
{{/each}}
</ul>
{{/if}}
<p style="margin: 25px 0 0 0; color: #333333; font-size: 18px; line-height: 1.6;">
Please provide the missing information and resubmit your documents.
</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 30px 0 0 0;">
<p style="margin: 0 0 10px 0; color: #888888; font-size: 15px; line-height: 1.6;">
This automated email was sent by FormFlow, and responses will not be read.
</p>
<p style="margin: 0; color: #888888; font-size: 15px; line-height: 1.6;">
With questions, please reach out to your customer success representative, or to
<a href="mailto:[email protected]" style="color: #888888; text-decoration: underline;">[email protected]</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>2. Understanding Handlebars Syntax:
{{variable}}- Inserts the value of a variable{{#if condition}}...{{/if}}- Conditional rendering{{#each array}}...{{/each}}- Loop through array items{{this}}- Current item in a loop
3. Key Template Variables:
All templates have access to these flattened variables:
{{subject}}- Email subject{{message_category}}- Category (SUCCESS, VALIDATION, ERROR, REJECTION){{message_type}}- Specific message type{{submission_id}}- Submission identifier{{suggested_message}}- Main message content{{data}}- Object containing category-specific fields
4. Category-Specific Data Fields:
Validation emails:
{{data.missing_fields}} - Array of missing field namesError emails:
{{data.error_messages}} - Array of error message stringsRejection emails:
{{data.rejection_reasons}} - Array of rejection reason stringsSuccess emails:
{{data.confirmation_details}} - Array of confirmation message strings5. Configure in Organization Settings:
Inside FormFlow's settings tab editor you can assign the SendGrid template IDs to their respective message categories.
Here you can see the templates object has truncated SendGrid template IDs, you should include yours in full.
{
"sendgrid": {
"api_key": "SG.xxxxx",
"from_email": "[email protected]",
"from_name": "FormFlow",
"templates": {
"validation": "d-abc123...",
"error": "d-def456...",
"rejection": "d-ghi789...",
"success": "d-jkl012...",
"fallback": "d-mno345..." // this one has to be set
}
}
}6. Testing Your Template:
Use SendGrid's template editor test feature with this sample data:
{
"subject": "Test Validation Email",
"message_category": "VALIDATION",
"message_type": "missing_fields",
"submission_id": "test_12345",
"suggested_message": "This is a test validation message.",
"data": {
"missing_fields": [
"Test Field 1",
"Test Field 2"
]
}
}Best Practices
Always provide fallback content - Use
{{#if}}blocks to handle missing data gracefullyKeep inline styles - Email clients have limited CSS support
Test across email clients - Use services like Litmus or Email on Acid
Use semantic HTML - Tables for layout (email client compatibility)
Optimize images - Host externally and use absolute URLs
Keep file size small - Some email clients truncate large emails
Last updated
Was this helpful?