feat: Kontaktformular von Homepage auf "Was wir tun" verlegt. WIP: FAQ auf homepage.

Enthält Fix dafür, dass ohne JS nur ein Teil des Kontaktformulars ausgeblendet wird, was das Layout zerschießt.
This commit is contained in:
muli 2023-07-02 10:09:33 +02:00
parent 6b059ac55e
commit 0eeeac9ce0
9 changed files with 145 additions and 126 deletions

View File

@ -1,7 +1,7 @@
/* Unhide contact form if JS is enabled */ /* Unhide contact form if JS is enabled */
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {
const contact_form_wrapper = document.getElementsByClassName('content__contact_form_wrapper')[0]; const contact_form_wrapper = document.getElementsByClassName('contact__box')[0];
if (contact_form_wrapper) { if (contact_form_wrapper) {
contact_form_wrapper.style.setProperty('display', 'block'); contact_form_wrapper.style.setProperty('display', 'grid');
} }
}); });

View File

@ -36,7 +36,6 @@ card_image: icon_connected_servers.svg
card_text: After the project, we do not leave you out in the cold with the result, but offer you services for the operation of the completed project and the administration of the infrastructure beyond the project. card_text: After the project, we do not leave you out in the cold with the result, but offer you services for the operation of the completed project and the administration of the infrastructure beyond the project.
---- ----
image_credits: servers by IYIKON from <a href="https://thenounproject.com/browse/icons/term/servers/" target="_blank" title="servers Icons">Noun Project</a> image_credits: servers by IYIKON from <a href="https://thenounproject.com/browse/icons/term/servers/" target="_blank" title="servers Icons">Noun Project</a>
----
#### flow_icon_bubbles #### #### flow_icon_bubbles ####
icon_path: Python_logo_and_wordmark.svg icon_path: Python_logo_and_wordmark.svg
---- ----
@ -110,3 +109,20 @@ kompetenzen_body:
- Translation & Internationalisation (i18n/l10n) - Translation & Internationalisation (i18n/l10n)
--- ---
kompetenzen_heading: Expertise kompetenzen_heading: Expertise
---
contact_form_button: Send message
---
contact_form_email: Email address
---
contact_form_heading: Contact
---
contact_form_info:
Your email address will not be published.<br>
<span aria-hidden="true">Required fields are marked <span class="contact_form--required" aria-hidden="true">*</span>
---
contact_form_message: Message
---
contact_form_subheading: Contact form
---
contact_form_subject: Subject

View File

@ -109,3 +109,22 @@ kompetenzen_body:
- Übersetzung & Internationalisierung (i18n/l10n) - Übersetzung & Internationalisierung (i18n/l10n)
--- ---
kompetenzen_heading: Kompetenzen kompetenzen_heading: Kompetenzen
---
contact_form_button: Kommentar abschicken
---
contact_form_email: E-Mail-Adresse
---
contact_form_heading: Kontakt
---
contact_form_info:
Deine E-Mail-Adresse wird nicht veröffentlicht.<br>
<span aria-hidden="true">Erforderliche Felder sind gekennzeichnet <span class="contact_form--required" aria-hidden="true">*</span>
---
contact_form_message: Nachricht
---
contact_form_name: Name
---
contact_form_subheading: Kontaktformular
---
contact_form_subject: Betreff

View File

@ -39,22 +39,4 @@ content_image: map.png
content_image_alt: Map of the Federal Republic of Germany with regions in which members are active content_image_alt: Map of the Federal Republic of Germany with regions in which members are active
---- ----
content_image_src: content_image_src:
---
contact_form_button: Send message
---
contact_form_email: Email address
---
contact_form_heading: Contact
---
contact_form_info:
Your email address will not be published.<br>
<span aria-hidden="true">Required fields are marked <span class="contact_form--required" aria-hidden="true">*</span>
---
contact_form_message: Message
---
contact_form_name: Name
---
contact_form_subheading: Contact form
---
contact_form_subject: Subject

View File

@ -40,21 +40,13 @@ content_image_alt: Karte der Bundesrepublik mit Regionen in denen Member aktiv s
---- ----
content_image_src: content_image_src:
--- ---
contact_form_button: Kommentar abschicken faq:
---
contact_form_email: E-Mail-Adresse
---
contact_form_heading: Kontakt
---
contact_form_info:
Deine E-Mail-Adresse wird nicht veröffentlicht.<br> ## FAQ
<span aria-hidden="true">Erforderliche Felder sind gekennzeichnet <span class="contact_form--required" aria-hidden="true">*</span>
--- - Ich bin hauptberuflich angestellt, welche Vorteile habe ich von euch?
contact_form_message: Nachricht - Ich bin Freelancer, kann ich über euch arbeiten?
--- - Ich habe eine zündende Idee aber keine Ahnung wie/wo ich anfangen soll. Kann ich die Idee mit euch umsetzen?
contact_form_name: Name - Ich habe ein Nebeneinkommen und möchte meine Rechnungen über euch abwickeln, wie genau läuft das?
--- - Welche Daten speichert ihr?
contact_form_subheading: Kontaktformular - Welche weltlichen Güter kann ich mir über die Geno holen?
---
contact_form_subject: Betreff

View File

@ -30,3 +30,37 @@ type = string
[fields.kompetenzen_body] [fields.kompetenzen_body]
label = Kompetenzen Inhalt label = Kompetenzen Inhalt
type = markdown type = markdown
# Kontakt-Formular
[fields.contact_form_heading]
label = Kontaktformular: Überschrift
type = string
[fields.contact_form_subheading]
label = Kontaktformular: Unterüberschrift
type = string
[fields.contact_form_info]
label = Kontaktformular: Einleitung
type = markdown
[fields.contact_form_subject]
label = Kontaktformular: Betreff
type = string
[fields.contact_form_message]
label = Kontaktformular: Nachricht
type = string
[fields.contact_form_name]
label = Kontaktformular: Name
type = string
[fields.contact_form_email]
label = Kontaktformular: E-Mail-Adresse
type = string
[fields.contact_form_button]
label = Kontaktformular: Buttonbeschriftung
type = string

View File

@ -35,43 +35,13 @@ label = Sub-Claim-Inhalt
description = Inhalt des Subclaims im Kopf der Seite description = Inhalt des Subclaims im Kopf der Seite
type = markdown type = markdown
[fields.faq]
label = faq
type = markdown
# Flow Block Section # Flow Block Section
[fields.section] [fields.section]
label = Sections label = Sections
type = flow type = flow
flow_blocks = flow_text_image_section flow_blocks = flow_text_image_section
# Kontakt-Formular
[fields.contact_form_heading]
label = Kontaktformular: Überschrift
type = string
[fields.contact_form_subheading]
label = Kontaktformular: Unterüberschrift
type = string
[fields.contact_form_info]
label = Kontaktformular: Einleitung
type = markdown
[fields.contact_form_subject]
label = Kontaktformular: Betreff
type = string
[fields.contact_form_message]
label = Kontaktformular: Nachricht
type = string
[fields.contact_form_name]
label = Kontaktformular: Name
type = string
[fields.contact_form_email]
label = Kontaktformular: E-Mail-Adresse
type = string
[fields.contact_form_button]
label = Kontaktformular: Buttonbeschriftung
type = string

View File

@ -29,7 +29,63 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div>
<div class="contact__box" style="display:none">
<h1>{{ this.contact_form_headig }}</h1>
<div class="contact_info__box">
<p>
<strong>WTF Kooperative eG</strong><br>
Forsmannstr. 14 b<br>
Hinterhaus, 3. OG<br>
22303 Hamburg
</p>
<p>
<strong>E-Mail:</strong><br>
office@wtf-eg.de
</p>
<p>
<strong>GnuPG Key:</strong><br>
<a href="/gnupg/1129A9F509FE1B36287202A2FE8772F9FB5D572F.asc" title="1129A9F509FE1B36287202A2FE8772F9FB5D572F">wtf_eg.asc</a>
</p>
</div>
<section class="contact_form_box">
<div class="content__box">
<div class="content__inner_box -width_constraint content__contact_form_wrapper">
<h2>{{ this.contact_form_subheading }}</h2>
<form id="contact_form" class="content__contact_form">
<p class="contact_form__note">
{{ this.contact_form_info }}
</p>
<p class="contact_form__text_input">
<label for="name">{{ this.contact_form_subject }} <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="name" class="contact_form__subject" name="subject" type="text" value="" size="30" maxlength="245" required />
</p>
<p class="contact_form__textarea">
<label for="message">{{ this.contact_form_message }} <span class="contact_form--required" aria-hidden="true">*</span></label>
<textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
</p>
<p class="contact_form__text_input">
<label for="name">{{ this.contact_form_name }} <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
</p>
<p class="contact_form__text_input">
<label for="email">{{ this.contact_form_email }} <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
</p>
<p class="contact_form__captcha">
<label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
</p>
<p class="contact_form__submit">
<input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="{{ this.contact_form_button }}" />
<p class="contact_form__feedback"></p>
</p>
</form>
</div>
</div>
</section>
</div> </div>
<div class="content__box"> <div class="content__box">

View File

@ -15,61 +15,11 @@
{{ blk }} {{ blk }}
{% endfor %} {% endfor %}
<div class="contact__box">
<h1>{{ this.contact_form_headig }}</h1>
<div class="contact_info__box">
<p>
<strong>WTF Kooperative eG</strong><br>
Forsmannstr. 14 b<br>
Hinterhaus, 3. OG<br>
22303 Hamburg
</p>
<p>
<strong>E-Mail:</strong><br>
office@wtf-eg.de
</p>
<p>
<strong>GnuPG Key:</strong><br>
<a href="/gnupg/1129A9F509FE1B36287202A2FE8772F9FB5D572F.asc" title="1129A9F509FE1B36287202A2FE8772F9FB5D572F">wtf_eg.asc</a>
</p>
</div>
<section class="contact_form_box">
<div class="content__box"> <div class="content__box">
<div class="content__inner_box -width_constraint content__contact_form_wrapper" style="display:none"> <div class="content__box">
<h2>{{ this.contact_form_subheading }}</h2> <div class="content__inner_box">
<form id="contact_form" class="content__contact_form"> {{ this.faq }}
<p class="contact_form__note">
{{ this.contact_form_info }}
</p>
<p class="contact_form__text_input">
<label for="name">{{ this.contact_form_subject }} <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="name" class="contact_form__subject" name="subject" type="text" value="" size="30" maxlength="245" required />
</p>
<p class="contact_form__textarea">
<label for="message">{{ this.contact_form_message }} <span class="contact_form--required" aria-hidden="true">*</span></label>
<textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
</p>
<p class="contact_form__text_input">
<label for="name">{{ this.contact_form_name }} <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
</p>
<p class="contact_form__text_input">
<label for="email">{{ this.contact_form_email }} <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
</p>
<p class="contact_form__captcha">
<label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
</p>
<p class="contact_form__submit">
<input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="{{ this.contact_form_button }}" />
<p class="contact_form__feedback"></p>
</p>
</form>
</div> </div>
</div> </div>
</section>
</div> </div>
{% endblock %} {% endblock %}