14 KiB
14 KiB
EmailJS Template Code for Pottery Website
Copy and paste these templates into your EmailJS dashboard.
Template 1: Main Order Template (ID: template_qf9hvwa)
Template Name: pottery_order_confirmation
Template ID: template_qf9hvwa (matches your script.js config)
Subject Line:
New Pottery Order #{{order_id}} - {{customer_name}}
HTML Email Body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.email-container {
max-width: 800px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.header {
background: linear-gradient(135deg, #8B4513, #D2691E);
color: white;
padding: 30px 20px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 28px;
font-weight: bold;
}
.header p {
margin: 10px 0 0 0;
font-size: 16px;
opacity: 0.9;
}
.content {
padding: 30px 20px;
}
.order-details {
background: #FAF8F5;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
border-left: 4px solid #8B4513;
}
.order-details h3 {
margin-top: 0;
color: #8B4513;
font-size: 18px;
}
.order-details p {
margin: 8px 0;
font-size: 14px;
}
.items-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.items-table th {
background: #8B4513;
color: white;
padding: 15px 10px;
text-align: left;
font-weight: bold;
font-size: 14px;
}
.items-table td {
padding: 12px 10px;
border-bottom: 1px solid #eee;
font-size: 13px;
}
.items-table tr:last-child td {
border-bottom: none;
}
.items-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.total-row {
background: #8B4513 !important;
color: white !important;
font-weight: bold;
font-size: 16px;
}
.total-row td {
border-bottom: none !important;
padding: 15px 10px !important;
}
.next-steps {
background: #e8f4f8;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #2980b9;
margin: 25px 0;
}
.next-steps h3 {
color: #2980b9;
margin-top: 0;
}
.next-steps ol {
margin: 15px 0;
padding-left: 20px;
}
.next-steps li {
margin: 8px 0;
font-size: 14px;
}
.highlight {
background: #fff3cd;
padding: 15px;
border-radius: 5px;
border-left: 4px solid #ffc107;
margin: 15px 0;
font-weight: bold;
color: #856404;
}
.footer {
background: #2C1810;
color: white;
padding: 20px;
text-align: center;
font-size: 12px;
}
.footer a {
color: #D2691E;
text-decoration: none;
}
@media (max-width: 600px) {
.content {
padding: 20px 15px;
}
.items-table th,
.items-table td {
padding: 8px 6px;
font-size: 12px;
}
.header h1 {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<h1>🏺 New Order Received</h1>
<p>Artisan Pottery Studio</p>
</div>
<div class="content">
<h2 style="color: #8B4513; margin-bottom: 20px;">Order Information</h2>
<div class="order-details">
<h3>📋 Order Summary</h3>
<p><strong>Order ID:</strong> {{order_id}}</p>
<p><strong>Order Date:</strong> {{order_date}}</p>
<p><strong>Total Amount:</strong> ${{order_total}}</p>
<p><strong>Items Count:</strong> {{items_count}} items</p>
</div>
<div class="order-details">
<h3>👤 Customer Information</h3>
<p><strong>Name:</strong> {{customer_name}}</p>
<p><strong>Email:</strong> {{customer_email}}</p>
<p><strong>Phone:</strong> {{customer_phone}}</p>
<p><strong>Preferred Contact Method:</strong> {{preferred_contact}}</p>
</div>
<div class="order-details">
<h3>📍 Shipping Address</h3>
<p style="white-space: pre-line;">{{shipping_address}}</p>
</div>
<div class="order-details">
<h3>💳 Payment Information</h3>
<p><strong>Preferred Payment Method:</strong> {{payment_preference}}</p>
</div>
{{#if order_notes}}
<div class="order-details">
<h3>📝 Special Instructions</h3>
<p style="white-space: pre-line;">{{order_notes}}</p>
</div>
{{/if}}
<h3 style="color: #8B4513; margin: 30px 0 15px 0;">🛍️ Ordered Items</h3>
<table class="items-table">
<thead>
<tr>
<th>Item Name</th>
<th>Category</th>
<th>Color</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
{{{items_table}}}
<tr class="total-row">
<td colspan="5"><strong>TOTAL</strong></td>
<td><strong>${{order_total}}</strong></td>
</tr>
</tbody>
</table>
<div class="highlight">
⚠️ This order requires payment confirmation before processing.
</div>
<div class="next-steps">
<h3>📞 Next Steps</h3>
<ol>
<li><strong>Contact customer within 24 hours</strong> at {{customer_email}} or {{customer_phone}}</li>
<li><strong>Confirm order details</strong> and answer any questions</li>
<li><strong>Arrange secure payment</strong> using customer's preferred method: {{payment_preference}}</li>
<li><strong>Confirm shipping details</strong> and delivery timeline</li>
<li><strong>Begin pottery creation</strong> and update customer on progress</li>
<li><strong>Send shipping notification</strong> when order is ready</li>
</ol>
<p><strong>💡 Customer Communication:</strong></p>
<p>A confirmation email copy has been sent to the customer at: <strong>{{customer_email}}</strong></p>
</div>
</div>
<div class="footer">
<p>🏺 <strong>Artisan Pottery Studio</strong></p>
<p>Order Management System | <a href="mailto:{{customer_email}}">Reply to Customer</a></p>
<p>Generated on {{formatted_date}} at {{formatted_time}}</p>
</div>
</div>
</body>
</html>
Template 2: Contact Form Template
Template Name: pottery_contact_form
Subject Line:
💬 New Contact Message from {{from_name}} - Pottery Studio
HTML Email Body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.header {
background: #8B4513;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
margin-bottom: 20px;
}
.message-box {
background: #FAF8F5;
padding: 20px;
border-radius: 5px;
border-left: 4px solid #8B4513;
margin: 15px 0;
}
.contact-info {
background: #e8f4f8;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
}
.footer {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>💬 New Contact Form Message</h2>
<p>Artisan Pottery Studio Website</p>
</div>
<div class="contact-info">
<h3>👤 Contact Details</h3>
<p><strong>Name:</strong> {{from_name}}</p>
<p><strong>Email:</strong> {{from_email}}</p>
<p><strong>Date Received:</strong> {{contact_date}}</p>
</div>
<div class="message-box">
<h3>📝 Message Content</h3>
<p style="white-space: pre-line; font-size: 14px; line-height: 1.6;">{{message}}</p>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; border-left: 4px solid #ffc107; margin: 20px 0;">
<p><strong>💡 To Reply:</strong> Simply reply to this email or contact {{from_name}} directly at {{from_email}}</p>
</div>
<div class="footer">
<p>🏺 This message was sent through the Artisan Pottery Studio contact form</p>
<p>Received: {{contact_date}}</p>
</div>
</div>
</body>
</html>
Template 3: Newsletter Subscription Template
Template Name: pottery_newsletter_subscription
Subject Line:
📧 New Newsletter Subscription - Pottery Studio
HTML Email Body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 500px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.header {
background: #8B4513;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
margin-bottom: 20px;
}
.info-box {
background: #FAF8F5;
padding: 20px;
border-radius: 5px;
border-left: 4px solid #8B4513;
margin: 15px 0;
text-align: center;
}
.footer {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>📧 New Newsletter Subscription</h2>
<p>Artisan Pottery Studio</p>
</div>
<div class="info-box">
<h3>📝 Subscriber Information</h3>
<p><strong>Email Address:</strong> {{subscriber_email}}</p>
<p><strong>Subscription Date:</strong> {{subscribe_date}}</p>
</div>
<div style="background: #e8f4f8; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h4>📋 Action Required:</h4>
<p>Please add <strong>{{subscriber_email}}</strong> to your newsletter mailing list.</p>
<p>Consider sending a welcome email to the new subscriber!</p>
</div>
<div class="footer">
<p>🏺 Newsletter subscription from Artisan Pottery Studio website</p>
<p>Subscribed: {{subscribe_date}}</p>
</div>
</div>
</body>
</html>
How to Use These Templates:
- Log into your EmailJS dashboard
- Go to Email Templates
- Create New Template for each one above
- Copy and paste the HTML code into the template editor
- Set the Subject Line as shown above
- Save each template and note the Template IDs
- Update your script.js if template IDs are different
Template Variables Reference:
Order Template Variables:
{{order_id}}- Unique order number{{order_date}}- Full date and time{{order_total}}- Total amount{{customer_name}}- Customer's full name{{customer_email}}- Customer's email{{customer_phone}}- Customer's phone{{preferred_contact}}- Contact preference{{shipping_address}}- Full shipping address{{payment_preference}}- Payment method choice{{order_notes}}- Special instructions{{{items_table}}}- HTML table of items (note: triple braces){{items_count}}- Number of items
Contact Template Variables:
{{from_name}}- Contact form sender name{{from_email}}- Contact form sender email{{message}}- Contact form message{{contact_date}}- When message was sent
Newsletter Template Variables:
{{subscriber_email}}- Newsletter subscriber email{{subscribe_date}}- When they subscribed
These templates will create professional, branded emails that match your pottery website's aesthetic and provide all the information you need to process orders and customer communications!