feat(contact): améliorer le formulaire de contact avec des informations sur les développeurs et un QR code
This commit is contained in:
Boris Waaub
@@ -1,8 +1,16 @@
|
||||
---
|
||||
title: Contact
|
||||
title: "Nous contacter"
|
||||
layout: "simple"
|
||||
contactForm:
|
||||
title: "Formulaire de contact"
|
||||
action: "http://localhost:3001/contact"
|
||||
developers:
|
||||
title: "Échanger avec les développeurs"
|
||||
description: "Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill."
|
||||
linkLabel: "#chill-social-admin:matrix.org"
|
||||
linkUrl: "https://matrix.to/#/#chill-social-admin:matrix.org"
|
||||
qrLabel: "ou scannez le code QR :"
|
||||
qrImg: "/images/chill-admin.png"
|
||||
fields:
|
||||
- name: "sujet"
|
||||
label: "Sujet"
|
||||
@@ -33,7 +41,7 @@ faq:
|
||||
- description : "Voici une liste de questions les plus souvent posées sur CHILL."
|
||||
- faqPath: content/faq.md"
|
||||
---
|
||||
|
||||
{{< contact-form >}}
|
||||
|
||||
|
||||
{{< faq >}}
|
||||
|
||||
@@ -22,19 +22,6 @@ Les tickets concernant le code de Chill se situent par conséquent dans ce dép
|
||||
La documentation technique de Chill se trouve à l'adresse suivante: http://docs.chill.social/en/latest/
|
||||
|
||||
|
||||
<h5 class="content-subtitle bord-4 mb-2 mt-5">Échanger avec les développeurs</h5>
|
||||
|
||||
Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill.
|
||||
|
||||
Pour le rejoindre cliquez sur le lien ci-dessous,
|
||||
|
||||
[#chill-social-admin:matrix.org](https://matrix.to/#/#chill-social-admin:matrix.org)
|
||||
|
||||
ou scannez le code qr
|
||||
|
||||
<img src="/images/chill-admin.png"/>
|
||||
|
||||
|
||||
<h5 class="content-subtitle bord-1">Contribuer, devenir prestataire</h5>
|
||||
|
||||
Si vous souhaitez contribuer au code de Chill et peut-être devenir prestataire du logiciel, jetez un oeil à la page [Contributing](https://gitlab.com/Chill-Projet/chill-bundles/-/blob/master/CONTRIBUTING.md).
|
||||
|
||||
@@ -2419,6 +2419,10 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-40 {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.max-h-12 {
|
||||
max-height: 3rem;
|
||||
}
|
||||
@@ -2475,6 +2479,10 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-40 {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.\!max-w-none {
|
||||
max-width: none !important;
|
||||
}
|
||||
@@ -3302,6 +3310,10 @@ body {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.\!no-underline {
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
{{ $form := .Page.Params.contactForm }}
|
||||
|
||||
<div id="contact-result" class="max-w-lg mx-auto mb-4"></div>
|
||||
<form id="contactForm" class="max-w-lg mx-auto p-6 bg-white rounded shadow" method="POST" action="{{ $form.action | default "http://localhost:3001/contact" }}">
|
||||
|
||||
|
||||
<form id="contactForm" class="max-w-lg mx-auto p-6 bg-white rounded shadow text-center" method="POST" action="{{ $form.action | default "http://localhost:3001/contact" }}">
|
||||
<h3 class="text-2xl font-bold mb-4">{{ $form.title }}</h3>
|
||||
{{ range $form.fields }}
|
||||
<div class="mb-4">
|
||||
<label for="{{ .name }}" class="block text-gray-700 font-bold mb-2">{{ .label }}</label>
|
||||
{{ if eq .type "textarea" }}
|
||||
<textarea id="{{ .name }}" name="{{ .name }}" rows="5" {{ if .required }}required{{ end }} class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300"></textarea>
|
||||
{{ else if eq .type "select" }}
|
||||
@@ -23,38 +24,47 @@
|
||||
<label for="website">Ne pas remplir ce champ</label>
|
||||
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
|
||||
</div>
|
||||
<!-- (Plus de champ caché Formspree, tout est géré côté backend) -->
|
||||
<div class="flex justify-end mt-4">
|
||||
<button type="submit" class="px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 text-primary-400 border-primary-400 hover:border-primary-400 hover:text-primary-400 hover:scale-105">
|
||||
{{ $form.button.label | default "Envoyer" }}
|
||||
</button>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.getElementById('contactForm');
|
||||
const resultDiv = document.getElementById('contact-result');
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
resultDiv.innerHTML = '';
|
||||
const formData = new FormData(form);
|
||||
console.log('Submitting form to:', formData);
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(async response => {
|
||||
const text = await response.text();
|
||||
if (response.status === 200) {
|
||||
resultDiv.innerHTML = `<div style='background:#e6ffed;color:#228B22;padding:1em;border-radius:6px;border:1px solid #228B22;'>${text}</div>`;
|
||||
form.reset();
|
||||
} else {
|
||||
resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>${text}</div>`;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>Erreur réseau</div>`;
|
||||
});
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.getElementById('contactForm');
|
||||
const resultDiv = document.getElementById('contact-result');
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
resultDiv.innerHTML = '';
|
||||
const formData = new FormData(form);
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(async response => {
|
||||
const text = await response.text();
|
||||
if (response.status === 200) {
|
||||
resultDiv.innerHTML = `<div style='background:#e6ffed;color:#228B22;padding:1em;border-radius:6px;border:1px solid #228B22;'>${text}</div>`;
|
||||
form.reset();
|
||||
} else {
|
||||
resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>${text}</div>`;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>Erreur réseau</div>`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
</form>
|
||||
|
||||
{{ with $form.developers }}
|
||||
<div class="max-w-lg mx-auto p-6 bg-white my-8 text-center">
|
||||
<h3 class="text-2xl font-bold mb-4">{{ .title }}</h3>
|
||||
<p class="mb-2">{{ .description }}</p>
|
||||
<p class="mb-2">Pour le rejoindre cliquez sur le lien ci-dessous :</p>
|
||||
<a href="{{ .linkUrl }}" class="text-primary-500 underline font-semibold block mb-4">{{ .linkLabel }}</a>
|
||||
<p class="mb-2">{{ .qrLabel }}</p>
|
||||
<img src="{{ .qrImg }}" alt="Chill Admin QR Code" class="mx-auto w-40 h-40 rounded border" />
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user