new: usr: add Contact page with email sending behaviour #4
All checks were successful
Deploy to Production / deploy (push) Successful in 39s
All checks were successful
Deploy to Production / deploy (push) Successful in 39s
This commit is contained in:
@@ -20,8 +20,117 @@
|
||||
|
||||
{% block body %}
|
||||
<div class="txt">
|
||||
<h2>Contact and user support</h2>
|
||||
<h3>Under construction</h3>
|
||||
<a href="mailto:langlasz@gmail.com">langlasz@gmail.com</a>
|
||||
<h2 style="text-align: center;">Contact and user support</h2>
|
||||
|
||||
{% for message in app.flashes('contact_success') %}
|
||||
<div class="auth-card auth-card--sent" style="margin: 20px auto; max-width: 600px;">
|
||||
<div class="auth-sent-icon"><i class="far fa-envelope"></i></div>
|
||||
<h3 style="color: #667eea; margin: 16px 0;">Message Sent!</h3>
|
||||
<p class="auth-sent-note">{{ message }}</p>
|
||||
<a href="{{ path('MineSeekerBundle_homepage') }}" class="auth-submit" style="text-decoration:none; margin-top:16px;">
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<p style="text-align: center; color: #666; margin-bottom: 30px;">
|
||||
Have a question, feedback, or need support? We'd love to hear from you!
|
||||
</p>
|
||||
|
||||
<div class="auth-card" style="max-width: 600px; margin: 0 auto;">
|
||||
{{ form_start(form, {attr: {class: 'auth-form'}}) }}
|
||||
|
||||
<div class="auth-field">
|
||||
<label for="{{ form.name.vars.id }}" class="auth-label">Name *</label>
|
||||
<div class="auth-input-wrap">
|
||||
<i class="fas fa-user auth-input-icon"></i>
|
||||
{{ form_widget(form.name, {
|
||||
attr: {
|
||||
class: 'auth-input' ~ (not form.name.vars.valid ? ' auth-input--error' : ''),
|
||||
placeholder: 'Your name',
|
||||
autofocus: true,
|
||||
}
|
||||
}) }}
|
||||
</div>
|
||||
{% if not form.name.vars.valid %}
|
||||
{% for error in form.name.vars.errors %}
|
||||
<p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="auth-field">
|
||||
<label for="{{ form.email.vars.id }}" class="auth-label">Email *</label>
|
||||
<div class="auth-input-wrap">
|
||||
<i class="fas fa-envelope auth-input-icon"></i>
|
||||
{{ form_widget(form.email, {
|
||||
attr: {
|
||||
class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
|
||||
placeholder: 'your.email@example.com',
|
||||
}
|
||||
}) }}
|
||||
</div>
|
||||
{% if not form.email.vars.valid %}
|
||||
{% for error in form.email.vars.errors %}
|
||||
<p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="auth-field">
|
||||
<label for="{{ form.content.vars.id }}" class="auth-label">Message *</label>
|
||||
<div class="auth-input-wrap">
|
||||
<i class="fas fa-comment-dots auth-input-icon" style="top: 16px;"></i>
|
||||
{{ form_widget(form.content, {
|
||||
attr: {
|
||||
class: 'auth-input' ~ (not form.content.vars.valid ? ' auth-input--error' : ''),
|
||||
placeholder: 'Tell us what\'s on your mind...',
|
||||
rows: 6,
|
||||
style: 'min-height: 150px; resize: vertical;'
|
||||
}
|
||||
}) }}
|
||||
</div>
|
||||
{% if not form.content.vars.valid %}
|
||||
{% for error in form.content.vars.errors %}
|
||||
<p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="auth-field">
|
||||
<label class="auth-checkbox-label" style="display: flex; align-items: flex-start; cursor: pointer; user-select: none;">
|
||||
{{ form_widget(form.consent, {
|
||||
attr: {
|
||||
class: 'auth-checkbox',
|
||||
style: 'margin-right: 10px; margin-top: 3px;'
|
||||
}
|
||||
}) }}
|
||||
<span style="flex: 1; font-size: 14px; line-height: 1.5; color: #666;">
|
||||
I have read the <a href="{{ path('MineSeekerBundle_privacy') }}" target="_blank" style="color: #667eea; text-decoration: none;">Privacy and Data Processing Policy</a> and I consent to the processing of my data. *
|
||||
</span>
|
||||
</label>
|
||||
{% if not form.consent.vars.valid %}
|
||||
{% for error in form.consent.vars.errors %}
|
||||
<p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="auth-submit">
|
||||
<i class="fas fa-paper-plane"></i> Send Message
|
||||
</button>
|
||||
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
|
||||
{{ vite_entry_script_tags('contact') }}
|
||||
<div id="contact-form-wrapper"
|
||||
data-site-key="{{ recaptcha_site_key }}"
|
||||
data-recaptcha-field-id="{{ form.recaptcha.vars.id }}">
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
98
templates/emails/contact_notification.html.twig
Normal file
98
templates/emails/contact_notification.html.twig
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>New Contact Message</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
.content {
|
||||
background: #f9f9f9;
|
||||
padding: 30px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
.field {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.field-label {
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.field-value {
|
||||
background: white;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #667eea;
|
||||
}
|
||||
.message-content {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>📬 New Contact Message</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="field">
|
||||
<div class="field-label">From</div>
|
||||
<div class="field-value">
|
||||
<strong>{{ message.name }}</strong><br>
|
||||
<a href="mailto:{{ message.email }}">{{ message.email }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-label">Message</div>
|
||||
<div class="field-value message-content">{{ message.content }}</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-label">Details</div>
|
||||
<div class="field-value">
|
||||
<strong>Submitted:</strong> {{ message.createdAt|date('Y-m-d H:i:s') }}<br>
|
||||
{% if message.ipAddress %}
|
||||
<strong>IP Address:</strong> {{ message.ipAddress }}<br>
|
||||
{% endif %}
|
||||
<strong>Consent:</strong> {% if message.consent %}✓ Given{% else %}✗ Not given{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
This message was sent via the MineSeeker contact form.<br>
|
||||
You can reply directly to this email to respond to {{ message.name }}.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user