saani
cd5ad1d753
Add a complete contact form system with the following changes: - Create ContactMessage model to store form submissions with tracking fields (is_read, is_responded) - Implement ContactMessage admin interface with custom actions, filters, and bulk operations - Add contact endpoint documentation to API root view - Update email configuration to use admin@attunehearttherapy.com as sender address This enables users to submit contact inquiries and allows administrators to track and manage these messages efficiently through the Django admin panel.
105 lines
6.5 KiB
HTML
105 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>New Contact Form Submission</title>
|
|
</head>
|
|
<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f3f4f6;">
|
|
<table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f3f4f6; padding: 40px 0;">
|
|
<tr>
|
|
<td align="center">
|
|
<table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
|
|
|
|
<tr>
|
|
<td style="background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%); padding: 40px; border-radius: 12px 12px 0 0; text-align: center;">
|
|
<h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">
|
|
🔔 New Contact Message
|
|
</h1>
|
|
<p style="margin: 10px 0 0 0; color: #fce7f3; font-size: 16px;">
|
|
Someone just reached out to you
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td style="padding: 40px;">
|
|
<table width="100%" cellpadding="0" cellspacing="0" style="margin-bottom: 30px;">
|
|
<tr>
|
|
<td colspan="2" style="padding-bottom: 20px;">
|
|
<h2 style="margin: 0; color: #111827; font-size: 20px; font-weight: 600;">
|
|
Contact Information
|
|
</h2>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 12px 0; width: 120px; color: #6b7280; font-size: 14px; font-weight: 600;">
|
|
Name:
|
|
</td>
|
|
<td style="padding: 12px 0; color: #111827; font-size: 14px;">
|
|
{{ contact_message.name }}
|
|
</td>
|
|
</tr>
|
|
<tr style="border-top: 1px solid #e5e7eb;">
|
|
<td style="padding: 12px 0; width: 120px; color: #6b7280; font-size: 14px; font-weight: 600;">
|
|
Email:
|
|
</td>
|
|
<td style="padding: 12px 0;">
|
|
<a href="mailto:{{ contact_message.email }}" style="color: #f43f5e; text-decoration: none; font-size: 14px;">
|
|
{{ contact_message.email }}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% if contact_message.phone %}
|
|
<tr style="border-top: 1px solid #e5e7eb;">
|
|
<td style="padding: 12px 0; width: 120px; color: #6b7280; font-size: 14px; font-weight: 600;">
|
|
Phone:
|
|
</td>
|
|
<td style="padding: 12px 0;">
|
|
<a href="tel:{{ contact_message.phone }}" style="color: #f43f5e; text-decoration: none; font-size: 14px;">
|
|
{{ contact_message.phone }}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr style="border-top: 1px solid #e5e7eb;">
|
|
<td style="padding: 12px 0; width: 120px; color: #6b7280; font-size: 14px; font-weight: 600;">
|
|
Received:
|
|
</td>
|
|
<td style="padding: 12px 0; color: #111827; font-size: 14px;">
|
|
{{ contact_message.created_at|date:"F d, Y" }} at {{ contact_message.created_at|time:"h:i A" }}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div style="margin-bottom: 30px;">
|
|
<h2 style="margin: 0 0 15px 0; color: #111827; font-size: 20px; font-weight: 600;">
|
|
Message
|
|
</h2>
|
|
<div style="background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px;">
|
|
<p style="margin: 0; color: #374151; font-size: 14px; line-height: 1.6; white-space: pre-wrap;">{{ contact_message.message }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 30px;">
|
|
<a href="mailto:{{ contact_message.email }}" style="display: inline-block; background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%); color: #ffffff; text-decoration: none; padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: 15px; box-shadow: 0 4px 6px rgba(244, 63, 94, 0.3);">
|
|
Reply to {{ contact_message.name }}
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td style="background-color: #f9fafb; padding: 30px; border-radius: 0 0 12px 12px; text-align: center; border-top: 1px solid #e5e7eb;">
|
|
<p style="margin: 0; color: #6b7280; font-size: 13px; line-height: 1.6;">
|
|
This is an automated notification from your contact form.<br>
|
|
Please respond to the sender as soon as possible.
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html> |