Zum Inhalt springen
Version 2.1 von Carolin Juler am 2026/07/23 14:26
Zeige letzte Bearbeiter
1 {{velocity}}
2 ## =============================================================
3 ## XWiki-Beispielformular: Evaluation "Gute Nachbarschaft"
4 ## Technologie: XWiki Sheet + XClass
5 ## Beispiel: Block 1 – Allgemeine Angaben + Verzweigungslogik
6 ## =============================================================
7 ## Einfügen: Neue Wiki-Seite erstellen → "Quelltext bearbeiten"
8 ## → diesen Code einfügen → Speichern
9 ## =============================================================
10
11 #set($doc = $xcontext.doc)
12
13 ## Formular verarbeiten wenn abgeschickt
14 #if($request.action == 'save')
15 #set($name_vorname = $request.name_vorname)
16 #set($projekttitel = $request.projekttitel)
17 #set($foerderzeitraum = $request.foerderzeitraum)
18 #set($strukturerhalt = $request.strukturerhalt)
19 #set($begruendung = $request.getParameterValues('begruendung'))
20 #set($sonstiges_text = $request.sonstiges_text)
21
22 ## Hier könntest du die Daten in ein XWiki-Objekt speichern
23 ## oder per E-Mail versenden. Für das Beispiel: Bestätigung anzeigen.
24 <div class="box successmessage">
25 <strong>✓ Vielen Dank!</strong> Ihre Angaben wurden erfolgreich übermittelt.
26 <ul>
27 <li><strong>Name:</strong> $name_vorname</li>
28 <li><strong>Projekttitel:</strong> $projekttitel</li>
29 <li><strong>Förderzeitraum:</strong> $foerderzeitraum</li>
30 <li><strong>Strukturerhalt:</strong> $strukturerhalt</li>
31 #if($strukturerhalt == 'nein' && $begruendung)
32 <li><strong>Begründung:</strong> $begruendung.toString()</li>
33 #end
34 </ul>
35 </div>
36 #else
37
38 ## ── CSS für das Formular ─────────────────────────────────────────────────────
39 {{html clean="false"}}
40 <style>
41 .gn-form { max-width: 720px; font-family: Arial, sans-serif; }
42 .gn-block { border: 1px solid #1F4E79; border-radius: 6px;
43 margin-bottom: 24px; padding: 20px 24px; }
44 .gn-block-title { color: #1F4E79; font-size: 1.1em; font-weight: bold;
45 margin: 0 0 16px 0; padding-bottom: 8px;
46 border-bottom: 2px solid #D6E4F0; }
47 .gn-field { margin-bottom: 14px; }
48 .gn-label { display: block; font-weight: bold; margin-bottom: 4px;
49 font-size: 0.95em; }
50 .gn-required { color: #C00000; margin-left: 2px; }
51 .gn-input { width: 100%; padding: 7px 10px; border: 1px solid #ccc;
52 border-radius: 4px; font-size: 0.95em; box-sizing: border-box; }
53 .gn-hint { font-size: 0.85em; color: #595959; margin-top: 3px; }
54 .gn-hint a { color: #1F4E79; }
55 .gn-radio-group { display: flex; gap: 24px; margin-top: 6px; }
56 .gn-radio-group label { font-weight: normal; cursor: pointer; }
57 .gn-radio-group input { margin-right: 6px; }
58 .gn-checkbox-group { margin-top: 6px; }
59 .gn-checkbox-group label { display: block; margin-bottom: 6px;
60 font-weight: normal; cursor: pointer; }
61 .gn-checkbox-group input { margin-right: 8px; }
62 .gn-hidden { display: none; }
63 .gn-submit { background: #1F4E79; color: #fff; border: none;
64 padding: 10px 28px; border-radius: 4px; font-size: 1em;
65 cursor: pointer; margin-top: 8px; }
66 .gn-submit:hover { background: #163a5c; }
67 .gn-intro { color: #333; margin-bottom: 24px; line-height: 1.5; }
68 </style>
69
70 <div class="gn-form">
71
72 <p class="gn-intro">
73 Die Abfrage dient der Qualitätssicherung sowie der Nachvollziehbarkeit
74 über den Wirkungsgrad der Landesförderung „Gute Nachbarschaft" und hat
75 zum Ziel, entstandene Strukturen sichtbar und darstellbar zu machen.
76 </p>
77
78 <form method="post" action="">
79 <input type="hidden" name="action" value="save"/>
80
81 <!-- ── Block 1: Allgemeine Angaben ─────────────────────────────────── -->
82 <div class="gn-block">
83 <div class="gn-block-title">Allgemeine Angaben zum Projekt</div>
84
85 <div class="gn-field">
86 <label class="gn-label">
87 Name der ausfüllenden Person<span class="gn-required">*</span>
88 </label>
89 <input class="gn-input" type="text" name="name_vorname"
90 placeholder="Nachname, Vorname" required/>
91 </div>
92
93 <div class="gn-field">
94 <label class="gn-label">
95 Projekttitel<span class="gn-required">*</span>
96 </label>
97 <input class="gn-input" type="text" name="projekttitel" required/>
98 <div class="gn-hint">
99 Sollten Sie den genauen Projekttitel nicht (mehr) kennen, suchen Sie
100 diesen bitte auf
101 <a href="http://www.gwa-nds.de/projekte" target="_blank">
102 www.gwa-nds.de/projekte
103 </a> heraus.
104 </div>
105 </div>
106
107 <div class="gn-field">
108 <label class="gn-label">
109 Förderzeitraum<span class="gn-required">*</span>
110 </label>
111 <input class="gn-input" type="text" name="foerderzeitraum"
112 placeholder="z. B. 01.01.2020–31.12.2023" required/>
113 </div>
114
115 <div class="gn-field">
116 <label class="gn-label">
117 Konnten durch die Förderung aufgebaute Strukturen in der
118 Gemeinwesenarbeit und im Quartiersmanagement erhalten bleiben?
119 <span class="gn-required">*</span>
120 </label>
121 <div class="gn-radio-group">
122 <label>
123 <input type="radio" name="strukturerhalt" value="ja"
124 onchange="toggleBloecke(this.value)" required/> ja
125 </label>
126 <label>
127 <input type="radio" name="strukturerhalt" value="teilweise"
128 onchange="toggleBloecke(this.value)"/> teilweise
129 </label>
130 <label>
131 <input type="radio" name="strukturerhalt" value="nein"
132 onchange="toggleBloecke(this.value)"/> nein
133 </label>
134 </div>
135 </div>
136 </div>
137
138 <!-- ── Block 2: Begründung (nur bei "nein") ────────────────────────── -->
139 <div class="gn-block gn-hidden" id="block-nein">
140 <div class="gn-block-title">
141 Wieso konnten durch die Förderung aufgebaute Strukturen in der
142 Gemeinwesenarbeit und im Quartiersmanagement nicht erhalten bleiben?
143 </div>
144 <p style="color:#555; font-size:0.9em;">
145 Bitte kreuzen Sie Zutreffendes an und erläutern Sie gegebenenfalls.
146 </p>
147 <div class="gn-checkbox-group">
148 <label><input type="checkbox" name="begruendung" value="Fehlende Finanzierung"/>
149 Fehlende Finanzierung</label>
150 <label><input type="checkbox" name="begruendung" value="Fehlende personelle Ressourcen"/>
151 Fehlende personelle Ressourcen</label>
152 <label><input type="checkbox" name="begruendung" value="Fehlende politische Unterstützung"/>
153 Fehlende politische Unterstützung</label>
154 <label><input type="checkbox" name="begruendung" value="Fehlende organisatorische Verankerung"/>
155 Fehlende organisatorische Verankerung</label>
156 <label><input type="checkbox" name="begruendung" value="Geringe Nachfrage"/>
157 Geringe Nachfrage</label>
158 <label><input type="checkbox" name="begruendung" value="Trägerentscheidung / Entscheidung der Kommune"/>
159 Trägerentscheidung / Entscheidung der Kommune</label>
160 <label>
161 <input type="checkbox" name="begruendung" value="Sonstiges"
162 onchange="toggleSonstiges(this.checked)"/>
163 Sonstiges
164 </label>
165 </div>
166 <div class="gn-field gn-hidden" id="sonstiges-feld">
167 <label class="gn-label">Sonstiges – bitte erläutern</label>
168 <textarea class="gn-input" name="sonstiges_text"
169 rows="3" maxlength="350"
170 oninput="updateCounter(this)"></textarea>
171 <div class="gn-hint">
172 <span id="sonstiges-counter">350</span> Zeichen verbleibend
173 </div>
174 </div>
175 </div>
176
177 <!-- ── Blöcke 3–5: Platzhalter (nur bei "ja" oder "teilweise") ──── -->
178 <div class="gn-hidden" id="block-ja-teilweise">
179 <div class="gn-block">
180 <div class="gn-block-title">Personalausgaben</div>
181 <p style="color:#888; font-style:italic;">
182 [Block 3–5 hier ergänzen – siehe vollständiger YAML-Code für Drupal]
183 </p>
184 </div>
185 </div>
186
187 <button class="gn-submit" type="submit">Umfrage absenden</button>
188 </form>
189 </div>
190
191 <!-- ── Verzweigungslogik (JavaScript) ──────────────────────────────────────── -->
192 <script>
193 function toggleBloecke(wert) {
194 document.getElementById('block-nein').classList.toggle('gn-hidden', wert !== 'nein');
195 document.getElementById('block-ja-teilweise').classList.toggle('gn-hidden', wert === 'nein');
196 }
197 function toggleSonstiges(checked) {
198 document.getElementById('sonstiges-feld').classList.toggle('gn-hidden', !checked);
199 }
200 function updateCounter(el) {
201 var remaining = 350 - el.value.length;
202 document.getElementById('sonstiges-counter').textContent = remaining;
203 }
204 </script>
205
206 {{/html}}
207
208 #end ## Ende if/else save
209 {{/velocity}}