Creating responsive email templates in Bubble requires using inline CSS since most email clients strip external stylesheets. This tutorial covers building HTML email templates with table-based responsive layouts, inserting dynamic Bubble data into templates, storing and managing templates as records in your database, and testing emails across different clients like Gmail, Outlook, and Apple Mail.
Overview: Responsive Email Templates in Bubble
This tutorial teaches you how to create professional, responsive email templates that you can send from your Bubble app. You will learn email-specific HTML techniques and how to manage templates within Bubble.
Prerequisites
- A Bubble app with email sending capability (SendGrid, Mailgun, or Bubble's built-in)
- Basic understanding of HTML (helpful but not required)
- Familiarity with Bubble Workflows and dynamic data
- A few email accounts for testing (Gmail, Outlook)
Step-by-step guide
Create an EmailTemplate Data Type for template management
Create an EmailTemplate Data Type for template management
Go to the Data tab and create a Data Type called 'EmailTemplate' with fields: 'name' (text — template identifier like 'welcome_email'), 'subject' (text), 'html_body' (text — the full HTML content), and 'is_active' (yes/no). This lets you manage multiple templates and update them without changing workflows. Create records for common templates: welcome email, password reset, order confirmation, and newsletter.
Expected result: An EmailTemplate Data Type stores your email templates as database records.
Build a responsive HTML email template
Build a responsive HTML email template
Email HTML must use tables for layout since email clients do not support modern CSS like flexbox or grid. Create your template with a wrapper table at max-width 600px centered. Use inline CSS on every element since style tags may be stripped. For responsive behavior, add a media query in a style tag that sets table widths to 100 percent at max-width 480px — Gmail supports this. Use td elements for columns and set widths as percentages. Keep the design simple: a header with your logo, a body section with text, and a footer with unsubscribe and contact links.
Pro tip: Use a tool like MJML or Maizzle to generate email-compatible HTML visually, then paste the output into your Bubble template.
Expected result: A table-based HTML email template renders correctly across major email clients.
Insert dynamic data into templates
Insert dynamic data into templates
In your EmailTemplate html_body field, use placeholder tokens like {{user_name}}, {{order_total}}, and {{action_url}}. When sending the email in your Bubble workflow, use the Find and Replace operator on the template text to replace each token with dynamic Bubble data. For example: EmailTemplate's html_body :find & replace ({{user_name}} → Current User's name) :find & replace ({{order_total}} → Order's total:formatted as currency). Chain multiple find and replace operations to fill all tokens.
Expected result: Email templates contain personalized data for each recipient when sent.
Set up the email sending workflow
Set up the email sending workflow
In the workflow where you want to send the email, first retrieve the template: Do a Search for EmailTemplate where name = 'welcome_email' and is_active = yes, first item. Then apply all dynamic replacements using find and replace as described above. Finally, use the Send Email action (or your email service plugin) with the subject from the template and the processed HTML body. If using SendGrid or another service via API Connector, set the Content-Type header to text/html.
Expected result: Emails send with the correct template, personalized content, and proper HTML rendering.
Test across email clients
Test across email clients
Send test emails to accounts on different providers: Gmail (web and mobile), Outlook (desktop and web), Apple Mail, and Yahoo Mail. Check that the layout renders correctly, images display, links work, and the responsive design stacks properly on mobile. Use a service like Litmus or Email on Acid for automated testing across 50+ clients. Common issues to check: images blocked by default, dark mode color inversions, and fonts falling back to system defaults. Fix issues by adding background colors inline and using web-safe fonts.
Expected result: Your email template displays correctly across all major email clients and mobile devices.
Complete working example
1EMAIL TEMPLATE SYSTEM SUMMARY2=====================================34DATA MODEL:5 EmailTemplate:6 name (text): template identifier7 subject (text): email subject line8 html_body (text): full HTML content9 is_active (yes/no)1011TEMPLATE STRUCTURE (HTML):12 Wrapper table: max-width 600px, centered13 All CSS inline on elements14 Header: logo image, brand colors15 Body: content with placeholders16 Footer: unsubscribe link, contact info17 Media query for mobile: width 100%1819DYNAMIC DATA TOKENS:20 {{user_name}} → Current User's name21 {{order_total}} → formatted currency22 {{action_url}} → link to app page23 {{company_name}} → app setting2425SEND WORKFLOW:26 1. Search EmailTemplate (name = X, active)27 2. html_body :find&replace tokens with data28 3. Send Email / API Connector29 Subject: template's subject30 Body: processed HTML31 Content-Type: text/html3233TESTING CHECKLIST:34 Gmail web + mobile35 Outlook desktop + web36 Apple Mail37 Yahoo Mail38 Dark mode rendering39 Images blocked view40 Mobile responsive stackingCommon mistakes when creating Responsive Email Templates in Bubble
Why it's a problem: Using external CSS stylesheets or style tags for email styling
How to avoid: Use inline CSS on every HTML element in your email template
Why it's a problem: Using div-based layouts instead of tables
How to avoid: Use HTML tables for all email layout structure with td elements for columns
Why it's a problem: Not testing in Outlook which renders email using Microsoft Word's engine
How to avoid: Always test in Outlook specifically and add Outlook-specific conditional comments for critical layout elements
Best practices
- Use tables for layout and inline CSS for all styling
- Keep email width at 600px or less for optimal display
- Use web-safe fonts with proper fallbacks
- Include alt text on all images since many clients block images by default
- Always include a plain text version alongside HTML
- Add an unsubscribe link in every marketing email
- Store templates in the database for easy updates without code changes
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to create a responsive HTML email template for order confirmation emails in my Bubble.io app. The template should work in Gmail, Outlook, and mobile. How do I structure the HTML?
Help me build an email template system. I want to store templates in my database with placeholders like {{user_name}} that get replaced with real data when sending from a workflow.
Frequently asked questions
Can Bubble send HTML emails natively?
Yes. Bubble's built-in Send Email action supports HTML in the body field. For more control, use SendGrid or Mailgun via the API Connector.
Why do my emails look different in Outlook?
Outlook uses Microsoft Word's rendering engine, which has limited CSS support. Use table-based layouts and avoid CSS properties like flexbox, grid, background images, and rounded corners.
How do I add images to email templates?
Host images on a public URL and reference them with img tags. Bubble-hosted images use CDN URLs that work in emails. Always add alt text for when images are blocked.
Can I create an email template editor in my app?
Yes. Add a rich text editor on an admin page that saves to the EmailTemplate's html_body field. This lets non-technical team members update templates.
How do I handle unsubscribes?
Add an 'email_subscribed' yes/no field to your User Data Type. Include an unsubscribe link in every email that triggers a backend workflow to set this field to no.
Can RapidDev help with email template design?
Yes. RapidDev can design and implement professional responsive email template systems for your Bubble app including template management, dynamic content, and multi-client testing.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation