Email Templates

Create custom email templates using MJML to send professional, responsive emails to your users.

Access Email Configuration

Email templates are configured at the project level:

1. Open your project
2. Navigate to Settings
3. Click on the Mail tab

Email Configuration Sections

The Mail tab contains two main sections:

SMTP Configuration

Select which SMTP configuration to use for sending emails from this project.

The available SMTP configurations are those you've set up in your organization settings.

Email Content

Configure the content of emails sent from this project:

Field	Description
Email Subject	Subject line for emails sent to participants
Email Template	MJML code defining the email structure and design

MJML Email Editor

What is MJML?

MJML (Mailjet Markup Language) is a responsive email framework that makes it easy to create beautiful, mobile-friendly emails. MJML uses a simple, semantic syntax that automatically generates responsive HTML email code compatible with all major email clients.

Benefits of MJML:

• Automatic responsive design for mobile and desktop
• Compatible with all email clients (Gmail, Outlook, Apple Mail, etc.)
• Simple, readable syntax
• No need to worry about complex HTML/CSS email quirks

📚 Learn more about MJML

Editor Layout

The email template editor has a two-column layout:

• Left Column: MJML code editor where you write your template
• Right Column: Real-time preview showing how your email will look

As you type in the MJML editor, the preview updates automatically so you can see your changes instantly.

Editor Buttons

Two buttons are available at the top of the editor:

Button	Function
Template Variables	Opens a reference list of all available template variables
Reset to Default	Restores the template to the default MJML code

Template Variables

Use template variables to personalize emails with dynamic content. Variables are written with double curly braces: {{variable_name}}

Project Variables

Variable	Description	Example Value
{{project_name}}	Name of the project	"Summer Event 2024"
{{share_url}}	URL to access the project form	"https://dashboard.glambot-studio.app/p/summer-event"
{{current_year}}	Current year	"2024"

Image Variables

Variable	Description	Format
{{qr_code_image}}	QR code for the project share URL	Base64 encoded image
{{banner_image}}	Project banner image	Base64 encoded image
{{logo_image}}	Project logo image	Base64 encoded image
{{background_image}}	Project background image	Base64 encoded image

Form Field Variables

Variable	Description	Example Value
{{field_name}}	Value of the Name field	"John Doe"
{{field_email}}	Value of the Email field	"john@example.com"
{{field_[fieldname]}}	Value of any custom field (replace [fieldname] with your field name)	Custom field data

Example custom field variables:

• {{field_phone}} - Phone number field
• {{field_company}} - Company field
• {{field_guests}} - Number of guests field

Preview vs Actual Values

In the preview panel, template variables display sample data (e.g., "John Doe", "john@example.com"). When emails are actually sent, these variables are replaced with real submission data.

Example MJML Template

Here's a complete example of an MJML email template:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="{{logo_image}}" alt="Logo" width="150px" />
        <mj-text font-size="24px" font-weight="bold">
          Hello {{field_name}}!
        </mj-text>
        <mj-text font-size="16px">
          Thank you for participating in {{project_name}}.
        </mj-text>
        <mj-image src="{{qr_code_image}}" alt="QR Code" width="200px" />
        <mj-text font-size="14px" color="#666666">
          Scan this QR code to access your content.
        </mj-text>
        <mj-button href="{{share_url}}" background-color="#3B82F6">
          Visit Project Page
        </mj-button>
        <mj-text font-size="12px" color="#999999">
          © {{current_year}} All rights reserved.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

MJML Basic Components

Here are the most commonly used MJML components:

Component	Purpose	Example
<mj-text>	Text content	<mj-text>Hello!</mj-text>
<mj-button>	Call-to-action button	<mj-button href="{{share_url}}">Click Here</mj-button>
<mj-image>	Images	<mj-image src="{{logo_image}}" />
<mj-divider>	Horizontal line separator	<mj-divider />
<mj-spacer>	Vertical spacing	<mj-spacer height="20px" />
<mj-section>	Row container	<mj-section>...</mj-section>
<mj-column>	Column within section	<mj-column>...</mj-column>

📚 View all MJML components

Working with MJML

Creating Your Template

1. Start with the default template or reset to default
2. Edit the MJML code in the left panel
3. Watch the preview update in real-time on the right
4. Click Template Variables to reference available variables
5. Insert variables where you want dynamic content
6. Save your changes

Tips for MJML Templates

Structure:

• Always wrap content in <mj-section> and <mj-column> tags
• Use <mj-spacer> to add vertical spacing between elements
• Keep the layout simple for better email client compatibility

Styling:

• Use inline attributes for styling: font-size="16px", color="#333333"
• MJML handles responsive design automatically
• Test your email on different devices and clients

Variables:

• Use template variables to personalize content
• Always provide fallback content for optional fields
• Test with the preview to ensure variables display correctly

Best Practices

Design

• Mobile First: Most emails are read on mobile devices
• Clear Hierarchy: Use headings, spacing, and visual hierarchy
• Branded: Include your logo and use consistent colors
• Accessible: Use good color contrast and descriptive alt text

Content

• Clear Subject: Write a concise, engaging subject line
• Call-to-Action: Make the primary action obvious with a button
• Scannable: Use short paragraphs and bullet points
• Professional: Proofread for grammar and spelling

Deliverability

• Avoid Spam Triggers: Don't use all caps, excessive exclamation marks, or spam words
• Test Before Sending: Use the preview and test email feature
• Configure SMTP Properly: Ensure SMTP settings are correct
• Include Text: Balance images with text content

Troubleshooting

Template Not Saving

Verify:

1. MJML syntax is valid (check for unclosed tags)
2. All required fields are filled
3. You have permission to edit project settings

Preview Not Updating

Try:

1. Check for syntax errors in MJML code
2. Refresh the page
3. Clear browser cache

Variables Not Showing

Common causes:

1. Variable name typo (check spelling and capitalization)
2. Variable used outside of {{}} brackets
3. Custom field name doesn't match form field

Next Steps

• Send Emails
• Test Your Emails
• Configure SMTP
• MJML Documentation