Create an Email Template

Step 1: Start AI Generation

1. Log in to your FormaMail Dashboard
2. Go to Templates → Create Template
3. Click Generate with AI

Step 2: Describe Your Template

Enter a natural language description of what you need. Be specific for better results:

Example prompts:

“Order confirmation email with company logo header, order number, list of purchased items with prices, order total, shipping address, and a track order button”

“Welcome email for new SaaS users with a friendly greeting, 3 key features with icons, and a get started button”

“Password reset email with security warning, reset link button, and note about link expiration”

Step 3: Review and Customize

1. AI generates a complete template with:
   • Professional layout and styling
   • Appropriate components
   • Pre-configured variables (e.g., {{customerName}}, {{orderNumber}})
2. Review the generated template in the designer
3. Make any adjustments:
   • Update colors to match your brand
   • Replace placeholder logo with your own
   • Modify text content
   • Add or remove sections

Step 4: Publish

1. Click Preview to test the template
2. Click Save to save your draft
3. Click Publish to make it available for sending
4. Copy the Template ID for use in your code

Step 1: Open the Template Gallery

1. Log in to your FormaMail Dashboard
2. Go to Templates → Template Gallery

Step 2: Find a Template

Browse by category:

• Transactional: Order confirmations, shipping updates, receipts
• Marketing: Newsletters, promotions, announcements
• Notifications: Alerts, reminders, account updates
• Welcome: Onboarding, welcome series

Or search for specific templates like “invoice”, “password reset”, or “newsletter”.

Step 3: Preview and Import

1. Click on a template to preview it
2. Review the included variables and structure
3. Click Import to add it to your templates

Step 4: Customize

1. The template opens in the designer
2. Update the branding:
   • Replace the logo
   • Adjust colors to match your brand
   • Update company information
3. Modify content as needed
4. Add or remove sections

Step 5: Publish

1. Click Preview to test
2. Click Save and Publish
3. Copy the Template ID

Step 1: Navigate to Templates

1. Log in to your FormaMail Dashboard
2. Click Templates in the sidebar
3. Click the Create Template button
4. Select Email Template

You’ll be taken to the template designer with a blank canvas.

Step 2: Set Template Details

Before designing, set the basic template information:

1. Click the Settings icon (gear) in the top toolbar
2. Fill in the template details:
   • Name: Order Confirmation
   • Slug: order-confirmation (auto-generated, used in API)
   • Description: Sent to customers after successful order placement
   • Subject: Order Confirmed - #{{orderNumber}}

Step 3: Add a Header Section

Let’s start with a branded header:

1. From the Component Library (left panel), drag a Container onto the canvas

2. With the container selected, set these properties in the right panel:

   • Background Color: #1a1a2e (dark blue)
   • Padding: 24px

3. Drag an Image component into the container

4. Click Select from Gallery (or enter your logo URL)

5. Set image properties:

   • Width: 150px
   • Alignment: Center
   • Alt Text: Company Logo

6. Drag a Heading component below the image

7. Set heading properties:

   • Content: Order Confirmed!
   • Level: H1
   • Text Color: #ffffff
   • Text Align: Center

Step 4: Add the Order Summary

Now add the main content area:

1. Drag a new Container below the header

2. Set container properties:

   • Background Color: #ffffff
   • Padding: 32px

3. Add a Text component with:

   • Content: Hi {{customerName}},
   • Font Size: 18px
   • Margin Bottom: 16px

4. Add another Text component:

   • Content: Thank you for your order! We're preparing your items for shipment.
   • Font Size: 16px
   • Text Color: #666666

Step 5: Add Order Details Box

Create a highlighted box for order information:

1. Drag a Container inside the content area

2. Set properties:

   • Background Color: #f8f9fa
   • Border Radius: 8px
   • Padding: 20px
   • Margin Top: 24px

3. Add a Heading component:

   • Content: Order Details
   • Level: H3
   • Margin Bottom: 16px

4. Add Text components for each detail:

Order Number: {{orderNumber}}
Order Date: {{orderDate}}
Payment Method: {{paymentMethod}}

Use the Divider component between sections for visual separation.

Step 6: Add Order Items with Loop

For dynamic order items, use a Loop component:

1. Drag a Loop component into the content area

2. Set the Data Source to {{items}}

3. Inside the loop, add a Columns component (2 columns)

4. In the left column, add:

   • Text: {{item.name}}
   • Text: Qty: {{item.quantity}} (smaller, gray text)

5. In the right column, add:

   • Text: {{item.price}}
   • Text Align: Right
   • Font Weight: Bold

Step 7: Add Order Total

Below the items loop:

1. Add a Divider component

2. Add a Columns component (2 columns)

3. Left column - Text:

   • Content: Subtotal:
   • Font Weight: Normal

4. Right column - Text:

   • Content: {{subtotal}}
   • Text Align: Right

5. Repeat for Shipping and Tax

6. Add another row for Total with:

   • Font Size: 18px
   • Font Weight: Bold
   • Content (left): Total:
   • Content (right): {{total}}

Step 8: Add Call-to-Action Button

Add a button for customers to track their order:

1. Drag a Button component below the totals
2. Set properties:
   • Text: Track Your Order
   • URL: {{trackingUrl}}
   • Background Color: #4f46e5 (indigo)
   • Text Color: #ffffff
   • Padding: 12px 32px
   • Border Radius: 6px
   • Alignment: Center
   • Margin Top: 24px

Step 9: Add Footer

Create a professional footer:

1. Drag a new Container for the footer

2. Set properties:

   • Background Color: #f8f9fa
   • Padding: 24px
   • Text Align: Center

3. Add Text component:

   • Content: Questions? Contact us at {{supportEmail}}
   • Font Size: 14px
   • Text Color: #666666

4. Add another Text:

   • Content: © {{__CURRENT_YEAR__}} {{companyName}}. All rights reserved.
   • Font Size: 12px
   • Text Color: #999999

Step 10: Review Variables

Click the Variables tab in the right panel to see all detected variables:

Step 11: Preview Your Template

Test how your template looks:

1. Click the Preview button in the toolbar
2. Switch between Desktop and Mobile views
3. Click Test Data to enter sample values
4. Verify all variables render correctly

Example test data:

{
  "customerName": "John Doe",
  "orderNumber": "ORD-12345",
  "orderDate": "December 7, 2025",
  "paymentMethod": "Visa ending in 4242",
  "items": [
    { "name": "Wireless Headphones", "quantity": 1, "price": "$99.99" },
    { "name": "Phone Case", "quantity": 2, "price": "$29.98" }
  ],
  "subtotal": "$129.97",
  "shipping": "$5.99",
  "tax": "$10.80",
  "total": "$146.76",
  "trackingUrl": "https://example.com/track/12345",
  "supportEmail": "support@example.com",
  "companyName": "Acme Electronics"
}

Step 12: Save and Publish

1. Click Save to save your draft
2. Click Publish to make the template available for sending

3. Copy your Template ID for use in your code:
   • UUID: 550e8400-e29b-41d4-a716-446655440000
   • Slug: order-confirmation