TutorialsEdit Templates with AI

How to Edit FormaMail Templates with AI

You can use AI tools to modify existing FormaMail templates based on your requirements. Whether you need to add new components, change styling, add conditional logic, or restructure your template, AI can help.

Prerequisites

  1. An AI Chat Account: ChatGPT Plus, Claude, Gemini Advanced, or similar.
  2. Your Existing Template: Export both the Variables JSON and Template Schema from FormaMail.
  3. The FormaMail Schema Reference: Use one of these options:

For best results, provide the AI with both your existing template AND the schema reference so it understands the valid structure.


How to Export Your Current Template

Before asking AI to edit your template, you need to export both the variables and schema.

Export Variables

  1. Open your template in the Template Designer
  2. Click Manage Variables in the toolbar
  3. Switch to the Raw JSON tab
  4. Copy the entire JSON array

Export Schema

  1. Click the code icon (</>) in the toolbar to open Raw Schema Editor
  2. Copy the entire JSON schema

The Edit Prompt Template

Copy this prompt and customize it for your specific edit request:

I am providing you with an existing FormaMail template that I need to modify. Please read the FormaMail schema documentation first to understand the valid structure.

**EXISTING VARIABLES (Plain JSON Array):**
```json
[PASTE YOUR VARIABLES JSON HERE]

EXISTING TEMPLATE SCHEMA:

[PASTE YOUR SCHEMA JSON HERE]

MY EDIT REQUEST: [DESCRIBE WHAT YOU WANT TO CHANGE]

STRICT REQUIREMENTS:

  1. Variables Format:

    • Output variables as a PLAIN JSON ARRAY [...].
    • Do NOT wrap variables in an object like { "variables": [...] }.
    • Preserve ALL existing variables unless explicitly asked to remove them.
    • Add defaultValue for any NEW variables.
  2. Schema Changes:

    • Preserve existing component IDs unless they need to change.
    • Use descriptive, kebab-case IDs for new components.
    • Use rich-text for all text content (NOT the deprecated text component).
  3. Output Format:

    • Provide EXACTLY two separate JSON code blocks:
      • Block 1: The Updated Variables JSON (Plain Array)
      • Block 2: The Updated Template JSON (Schema)
    • Clearly indicate what changed with comments or explanations.

---

## Common Edit Requests

Here are prompts for common template modifications:

### Add a New Section

```text
Add a new section to my email template that displays a promotional banner.
The banner should:
- Have a colored background (#f0f9ff)
- Display a heading "Special Offer!"
- Show promotional text with a variable {{promoMessage}}
- Include a CTA button linking to {{promoUrl}}

Add Conditional Content

Add conditional logic to show a "Past Due" warning banner only when
the variable {{paymentStatus}} equals "overdue".

The banner should:
- Have a red background (#fef2f2)
- Display warning text "Payment is past due"
- Only appear when the condition is true

Add a Data Table

Add a table component to display line items from my {{items}} array variable.

The table should have columns for:
- Item Name (from item.name)
- Quantity (from item.quantity)
- Unit Price (from item.price, formatted as currency)
- Total (from item.total, formatted as currency)

Include a footer row showing the grand total from {{orderTotal}}.

Change Styling

Update the styling of my template:
- Change the header background color from #ffffff to #1e40af
- Make the header text white
- Increase the padding around the main content to 40px
- Add rounded corners (8px) to the main container

Add a Calculated Variable

Add a calculated variable called "subtotal" that:
- Sums up all item.price * item.quantity from the {{items}} array
- Uses the expression: items.reduce((sum, item) => sum + (item.price * item.quantity), 0)
- Has type "number" and isCalculated: true

Add a Loop Component

Replace the static list with a loop component that iterates over {{features}} array.
Each feature should display:
- A checkmark icon (use a green checkmark emoji or HTML entity)
- The feature text from {{feature.name}}
- A description from {{feature.description}}

Add an Image

Add a company logo image at the top of the template:
- Use the variable {{companyLogo}} for the image source
- Set width to 150px
- Center the image
- Add 20px margin below

Convert Email to PDF

Convert this email template to a PDF attachment template:
- Change from sections array to pages array
- Add appropriate page settings (A4, portrait, 20mm margins)
- Preserve all the content and styling
- Set outputFormats to ["pdf"]

Merging Changes Back to FormaMail

After the AI generates updated JSON:

Step 1: Validate Variables

  1. Open Manage Variables in the Template Designer
  2. Switch to Raw JSON tab
  3. Paste the updated variables array
  4. Click Validate to check for errors
  5. Review the changes - ensure no variables were accidentally removed
  6. Click Apply Changes

Step 2: Validate Schema

  1. Open the Raw Schema Editor (</> icon)
  2. Paste the updated schema JSON
  3. Click Validate to check for errors
  4. Review the visual preview to ensure it looks correct
  5. Click Apply Changes

Step 3: Test the Template

  1. Click Preview to see the template with sample data
  2. Test any conditional logic by changing variable values
  3. Verify loops render correctly with array data
  4. Send a test email to verify the final output

Pro Tips for Better Edits

TipExample
Be SpecificInstead of “make it look better”, say “add 16px padding and #f3f4f6 background”
Reference Component IDs”Update the component with id ‘header-text’ to use font-size 24px”
Preserve StructureAsk AI to “add to” rather than “replace” when you want incremental changes
Request ExplanationsAdd “Explain what you changed and why” to understand the modifications
Iterate IncrementallyMake one change at a time for complex templates

Troubleshooting

⚠️

Issue: AI removes existing variables or components

Solution: Explicitly state “Preserve ALL existing variables and components. Only add/modify what I requested.”

⚠️

Issue: AI changes component IDs unnecessarily

Solution: Add “Keep all existing component IDs unchanged unless the component itself needs to change.”

⚠️

Issue: Validation fails after applying changes

Solution: Check for:

  • Missing required fields (name, type for variables)
  • Invalid component types
  • Malformed JSON (missing commas, brackets)
  • Variables referenced in template but not defined
⚠️

Issue: AI uses deprecated text component

Solution: Remind the AI: “Use rich-text instead of text - the text component is deprecated.”


See Also