feat(form/contact): Ajoute formulaire de contact avec traductions.

This commit is contained in:
Serreau Jovann
2025-11-16 22:11:48 +01:00
parent a9feb0c2f8
commit 524d5a3041
7 changed files with 130 additions and 42 deletions

View File

@@ -15,41 +15,42 @@ class ContactType extends AbstractType
{
$builder
->add('name', TextType::class, [
'label' => 'Prénom',
// Clé de traduction pour le libellé
'label' => 'contact_form.name.label',
'attr' => [
'placeholder' => 'Votre prénom',
// Clé de traduction pour le placeholder
'placeholder' => 'contact_form.name.placeholder',
],
])
->add('surname', TextType::class, [
'label' => 'Nom de famille',
'label' => 'contact_form.surname.label',
'attr' => [
'placeholder' => 'Votre nom de famille',
'placeholder' => 'contact_form.surname.placeholder',
],
])
->add('email', EmailType::class, [
'label' => 'Adresse e-mail',
'label' => 'form_email_label',
'attr' => [
'placeholder' => 'votre.email@exemple.com',
'placeholder' => 'contact_form.email.placeholder',
],
])
// NOUVEAU : Ajout du champ 'subject'
->add('subject', TextType::class, [
'label' => 'Sujet',
'label' => 'contact_form.subject.label',
'attr' => [
'placeholder' => 'Objet de votre message',
'placeholder' => 'contact_form.subject.placeholder',
],
])
->add('tel', TextType::class, [
'label' => 'Téléphone (facultatif)',
'label' => 'contact_form.tel.label',
'required' => false,
'attr' => [
'placeholder' => 'Ex: 06 01 02 03 04',
'placeholder' => 'contact_form.tel.placeholder',
],
])
->add('message', TextareaType::class, [
'label' => 'Votre message',
'label' => 'contact_form.message.label',
'attr' => [
'placeholder' => 'Saisissez votre question ou votre demande...',
'placeholder' => 'contact_form.message.placeholder',
'rows' => 6,
],
])

View File

@@ -31,6 +31,21 @@ class SitemapSubscriber
$decoratedUrlHome->addLink($urlGenerator->generate('app_home',['lang'=>'en'], UrlGeneratorInterface::ABSOLUTE_URL), 'en');
$urlContainer->addUrl($decoratedUrlHome, 'default');
$urlMembers = new UrlConcrete($urlGenerator->generate('app_members', [], UrlGeneratorInterface::ABSOLUTE_URL));
$decoratedUrlMembers = new GoogleImageUrlDecorator($urlMembers);
$decoratedUrlMembers->addImage(new GoogleImage($this->cacheManager->resolve('assets/images/logo.jpg','webp')));
$decoratedUrlMembers = new GoogleMultilangUrlDecorator($decoratedUrlMembers);
$decoratedUrlMembers->addLink($urlGenerator->generate('app_members',['lang'=>'fr'], UrlGeneratorInterface::ABSOLUTE_URL), 'fr');
$decoratedUrlMembers->addLink($urlGenerator->generate('app_members',['lang'=>'en'], UrlGeneratorInterface::ABSOLUTE_URL), 'en');
$urlContainer->addUrl($decoratedUrlMembers, 'default');
$urlEvents = new UrlConcrete($urlGenerator->generate('app_events', [], UrlGeneratorInterface::ABSOLUTE_URL));
$urlEvents = new GoogleImageUrlDecorator($urlEvents);
$urlEvents->addImage(new GoogleImage($this->cacheManager->resolve('assets/images/logo.jpg','webp')));
$urlEvents = new GoogleMultilangUrlDecorator($urlEvents);
$urlEvents->addLink($urlGenerator->generate('app_events',['lang'=>'fr'], UrlGeneratorInterface::ABSOLUTE_URL), 'fr');
$urlEvents->addLink($urlGenerator->generate('app_events',['lang'=>'en'], UrlGeneratorInterface::ABSOLUTE_URL), 'en');
$urlContainer->addUrl($urlEvents, 'default');
$urlAbout = new UrlConcrete($urlGenerator->generate('app_about', [], UrlGeneratorInterface::ABSOLUTE_URL));
$decoratedUrlAbout = new GoogleImageUrlDecorator($urlAbout);

View File

@@ -304,7 +304,7 @@
<p class="text-xl font-medium text-gray-800 mb-4">
{{'about_call_to_action_text'|trans}}
</p>
<a href="#" class="inline-block px-8 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 transition duration-300">
<a href="{{ path('app_events') }}" class="inline-block px-8 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 transition duration-300">
{{'about_call_to_action_button'|trans}}
</a>
</section>

View File

@@ -1,6 +1,7 @@
{% extends 'base.twig' %}
{% block title %}Contactez Nous{% endblock %}
{# --- METADATA & SCHEMA --- #}
{% block title %}{{'contact_page.title'|trans}}{% endblock %}
{% block canonical_url %}<link rel="canonical" href="{{ url('app_contact') }}" />{% endblock %}
{% block breadcrumb_schema %}
@@ -12,13 +13,13 @@
{
"@type": "ListItem",
"position": 1,
"name": "Accueil",
"name": "{{ 'breadcrumb.home'|trans }}",
"item": "{{ app.request.schemeAndHttpHost }}"
},
{
"@type": "ListItem",
"position": 2,
"name": "Contactez Nous",
"name": "{{ 'contact_page.breadcrumb'|trans }}",
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
}
]
@@ -26,43 +27,47 @@
</script>
{% endblock %}
{# --- BODY --- #}
{% block body %}
<div class="container mx-auto p-4 md:p-8 pt-12">
{# --- FLASH MESSAGE BLOCK --- #}
{# --- FLASH MESSAGE BLOCK (SUCCESS) --- #}
{% for message in app.flashes('success') %}
<div class="max-w-4xl mx-auto mb-8 p-4 rounded-lg bg-green-100 border border-green-300 text-green-800 flex items-start shadow-md" role="alert">
<svg class="w-6 h-6 mr-3 mt-0.5 text-green-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<div>
<strong class="font-semibold">Message envoyé !</strong>
<strong class="font-semibold">{{ 'flash.success.strong'|trans }}</strong>
<p class="text-sm">{{ message }}</p>
</div>
</div>
{% endfor %}
{# --- FLASH MESSAGE BLOCK (ERROR) --- #}
{% for message in app.flashes('error') %}
<div class="max-w-4xl mx-auto mb-8 p-4 rounded-lg bg-green-100 border border-green-300 text-green-800 flex items-start shadow-md" role="alert">
<svg class="w-6 h-6 mr-3 mt-0.5 text-green-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
<div class="max-w-4xl mx-auto mb-8 p-4 rounded-lg bg-red-100 border border-red-300 text-red-800 flex items-start shadow-md" role="alert">
<svg class="w-6 h-6 mr-3 mt-0.5 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414 0L10 9.586l-1.293-1.293a1 1 0 10-1.414 1.414L8.586 11l-1.293 1.293a1 1 0 001.414 1.414L10 12.414l1.293 1.293a1 1 0 001.414-1.414L11.414 11l1.293-1.293a1 1 0 000-1.414z" clip-rule="evenodd"></path>
</svg>
<div>
<strong class="font-semibold">Message Erreur !</strong>
<strong class="font-semibold">{{ 'flash.error.strong'|trans }}</strong>
<p class="text-sm">{{ message }}</p>
</div>
</div>
{% endfor %}
<h1 class="text-4xl font-extrabold text-center mb-10 text-gray-800">
Contactez Nous
{{ 'contact_page.title'|trans }}
</h1>
<div class="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-10">
{# Colonne 1 : Informations de Contact (1/3 sur grand écran) #}
{# Colonne 1 : Informations de Contact #}
<div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-lg border border-gray-100 h-fit">
<h2 class="text-2xl font-bold mb-4 text-indigo-700">Restons Connectés</h2>
<h2 class="text-2xl font-bold mb-4 text-indigo-700">{{ 'contact_info.title'|trans }}</h2>
<p class="mb-6 text-gray-600 border-b pb-4">
Que ce soit pour une question technique, une opportunité de partenariat ou une simple salutation, nous sommes là pour vous.
{{ 'contact_info.subtitle'|trans }}
</p>
{# Coordonnées #}
@@ -71,9 +76,9 @@
<div>
<h3 class="font-semibold text-gray-800 flex items-center mb-1">
<svg class="w-5 h-5 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h12a2 2 0 012 2v10z"></path></svg>
E-mail
{{ 'contact_info.email'|trans }}
</h3>
{# Nouvelle adresse email #}
{# L'adresse email reste en dur car c'est une donnée de contact #}
<p class="text-indigo-600 hover:text-indigo-800 transition duration-150">
<a href="mailto:contact@e-cosplay.fr">contact@e-cosplay.fr</a>
</p>
@@ -82,9 +87,9 @@
<div>
<h3 class="font-semibold text-gray-800 flex items-center mb-1">
<svg class="w-5 h-5 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243m12.44-1.296a8 8 0 11-14.04-4.832"></path></svg>
Adresse Postale
{{ 'contact_info.address'|trans }}
</h3>
{# Nouvelle adresse postale #}
{# L'adresse postale reste en dur car c'est une donnée de contact #}
<p class="text-gray-600">
42 rue de Saint-Quentin<br>
02800 Beautor, FRANCE
@@ -95,10 +100,10 @@
<div class="pt-4 border-t mt-6 border-gray-200">
<h3 class="text-xl font-bold mb-3 text-green-700 flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 18H5a2 2 0 01-2-2v-2c0-.55.22-1.07.61-1.45l2-2.02a1 1 0 011.41 0l2.5 2.5a1 1 0 001.41 0l2-2.02a1 1 0 011.41 0l2 2.02c.39.38.61.9.61 1.45v2a2 2 0 01-2 2z"></path></svg>
Rejoindre l'association
{{ 'contact_info.join_title'|trans }}
</h3>
<p class="text-gray-600">
Vous souhaitez nous rejoindre ou obtenir plus d'informations sur les modalités d'adhésion ? Veuillez nous écrire directement à :
{{ 'contact_info.join_text'|trans }}
</p>
<p class="mt-2 font-bold text-indigo-600">
<a href="mailto:contact@e-cosplay.fr">contact@e-cosplay.fr</a>
@@ -108,34 +113,34 @@
</div>
{# Colonne 2 : Formulaire de Contact (2/3 sur grand écran) #}
{# Colonne 2 : Formulaire de Contact #}
<div class="lg:col-span-2 bg-white p-8 rounded-xl shadow-lg border border-gray-100">
<h2 class="text-2xl font-bold mb-6 text-gray-800">Envoyez-nous un Message</h2>
<h2 class="text-2xl font-bold mb-6 text-gray-800">{{ 'form.title'|trans }}</h2>
{{ form_start(form, {'attr': {'class': 'space-y-5'}}) }}
{# Ligne 1 : Nom et Prénom #}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{{ form_row(form.name) }}
{{ form_row(form.surname) }}
{{ form_row(form.name, {'label': 'contact_form.name.label'|trans}) }}
{{ form_row(form.surname, {'label': 'contact_form.surname.label'|trans}) }}
</div>
{# Ligne 2 : Email et Sujet #}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{{ form_row(form.email, {'label': 'Votre adresse e-mail'}) }}
{{ form_row(form.subject) }}
{{ form_row(form.email, {'label': 'form_email_label'|trans}) }}
{{ form_row(form.subject, {'label': 'contact_form.subject.label'|trans}) }}
</div>
{# Ligne 3 : Téléphone (optionnel) #}
{{ form_row(form.tel) }}
{{ form_row(form.tel, {'label': 'contact_form.tel.label'|trans}) }}
{# Ligne 4 : Message #}
{{ form_row(form.message) }}
{{ form_row(form.message, {'label': 'contact_form.message.label'|trans}) }}
<div class="pt-4">
<button type="submit" class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition duration-150 ease-in-out shadow-lg transform hover:scale-[1.01]">
<svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h12a2 2 0 012 2v10z"></path></svg>
Envoyer le message
{{ 'form.submit_button'|trans }}
</button>
</div>

View File

@@ -27,6 +27,7 @@
{# ---------- LABEL ---------- #}
{% block form_label %}
{% if label is not same as(false) %}
<label for="{{ id }}" class="block text-sm font-medium text-gray-700">
{{ label|trans({}, translation_domain) }}

View File

@@ -412,3 +412,38 @@ hosting_link: "Hosting"
rgpd_policy_link: "GDPR Policy"
cgu_link: "Terms of Use"
cgv_link: "Terms of Sale"
# TITRES DE PAGE ET BREADCRUMBS
contact_page.title: "Contact Us"
contact_page.breadcrumb: "Contact Us"
breadcrumb.home: "Home"
# MESSAGES FLASH
flash.success.strong: "Message Sent!"
flash.error.strong: "Error Message!"
# INFORMATIONS DE CONTACT (LEFT COLUMN)
contact_info.title: "Let's Connect"
contact_info.subtitle: "Whether it's for a technical question, a partnership opportunity, or just to say hello, we are here for you."
contact_info.email: "Email"
contact_info.address: "Mailing Address"
contact_info.join_title: "Join the Association"
contact_info.join_text: "Would you like to join us or get more information about membership? Please write to us directly at:"
# FORMULAIRE (RIGHT COLUMN)
form.title: "Send us a Message"
form.submit_button: "Send Message"
# FORM KEYS (from your first request)
contact_form.name.label: "First Name"
contact_form.name.placeholder: "Your first name"
contact_form.surname.label: "Last Name"
contact_form.surname.placeholder: "Your last name"
form_email_label: "Email address"
contact_form.email.placeholder: "your.email@example.com"
contact_form.subject.label: "Subject"
contact_form.subject.placeholder: "Subject of your message"
contact_form.tel.label: "Phone (optional)"
contact_form.tel.placeholder: "Ex: 555-123-4567"
contact_form.message.label: "Your message"
contact_form.message.placeholder: "Type your question or request..."

View File

@@ -409,3 +409,34 @@ hosting_link: "Hébergement"
rgpd_policy_link: "Politique RGPD"
cgu_link: "CGU"
cgv_link: "CGV"
# --- Formulaire de Contact (Keys) ---
# TITRES DE PAGE ET BREADCRUMBS
contact_page.title: "Contactez Nous"
contact_page.breadcrumb: "Contactez Nous"
breadcrumb.home: "Accueil"
# MESSAGES FLASH
flash.success.strong: "Message envoyé !"
flash.error.strong: "Message Erreur !"
# INFORMATIONS DE CONTACT (COLONNE DE GAUCHE)
contact_info.title: "Restons Connectés"
contact_info.subtitle: "Que ce soit pour une question technique, une opportunité de partenariat ou une simple salutation, nous sommes là pour vous."
contact_info.email: "E-mail"
contact_info.address: "Adresse Postale"
contact_info.join_title: "Rejoindre l'association"
contact_info.join_text: "Vous souhaitez nous rejoindre ou obtenir plus d'informations sur les modalités d'adhésion ? Veuillez nous écrire directement à :"
# FORMULAIRE (COLONNE DE DROITE)
form.title: "Envoyez-nous un Message"
form.submit_button: "Envoyer le message"
# CLÉS DU FORMULAIRE (celles de votre premier message)
contact_form.name.label: "Prénom"
contact_form.surname.label: "Nom de famille"
contact_form.subject.label: "Sujet"
contact_form.tel.label: "Téléphone (facultatif)"
contact_form.message.label: "Votre message"
form_email_label: "Adresse e-mail"