C) Optionale Einstellungen:
Größere Radio-Buttons und größere Checkboxen
Dazu in WebSite X5 unter "3 Sitemap" die Seite mit dem Kontaktformular markieren und oben auf "Eigenschaften klicken, dann den Reiter "Erweitert" anklicken und bei "Benutzerdefinierter Code: Vor dem </HEAD> Tag" diesen CSS-Code einfügen:
<style>
input[type='radio'] {
transform: scale(2);
margin: 10px;
}
input[type=checkbox] {
transform: scale(2);
margin: 10px;
}
</style>
Hinweis: Bei "scale(2)" wird die Größe der Radio-Buttons bzw. der Checkboxen und bei "margin: 10px" den Abstand von den Radio-Buttons bzw. von den Checkboxen zum Text festgelegt.
D) Screenshots der Einstellungen im Objekt "Kontaktformular":
Anleitung geändert und Fehler korrigiert am 14.06.2024
1) Formular-Aufbau der Liste
Im Beispiel gibt es jetzt jeweils 3 Feldtypen pro Frage und am Ende 3 Feldtypen für Name, E-Mail und evtl. Mitteilungen.
Die Leerzeilen zwischen den Fragen sind weggefallen, da jetzt über den Fragen jeweils ein Anker und Leerzeilen platziert wurden, damit durch einen Klick auf die Dreiecke zwischen den Fragen hoch- und runtergesprungen werden kann und bei einem Ankersprung die StickyBar nicht die Frage verdeckt.
2) Eingaben im Feld "Text" und die Einstellungen am Beispiel von "Frage2"
Im Feld "Text" gibt es CSS-Code für den Texthintergrund in hellgrau, den grauen Rand und die Rundungen links und rechts sowie für die Ausrichtung und die rote Farbe des Fortschrittsbalkens rechts.
Es gibt jetzt auch Ankerlinks, um zur nächsten oder zur vorherigen Frage zu springen.
Es wurden Zeilenumbrüche hinzugefügt, um bei den Ankerlinks die Höhe der StickyBar auszugleichen.
Der sichtbare Teil mit Dreiecken als Ankerlinks, Text (z.B. "Frage 2") und Fortschrittsbalken mit %-Angaben.
Für den Fortschrittsbalken wurden die Zeichen █ und ▒ verwendet, zusammen 9 Zeichen.
a) Inhalt im Feld "Text" mit HTML- und CSS-Code
<p id="anker2">
<br><br><br><br></p><div
style="background-color: lightgray; border: 3px solid gray; border-radius:35px; float: left; width: 100%"><br>
<a href="#anker1">▲</a>
Frage 2
<a href="#anker3">▼</a><div
style="color: red; float: right">
██████▒▒▒ 67 % </div><br><br></div>
Anzeige der oberen Codes im Browser:
b) Vorschlag zur Berechnung der Zeichen beim Fortschrittsbalken
Berechnungsformel für die Anzahl der dunklen Zeichen:
Gesamte Zahl der Zeichen / Zahl der Fragen x Nummer der betreffenden Frage = Zahl der dunklen Zeichen
(Bis Komma 4 abrunden, ab Komma 5 aufrunden)
Beispiele für Anzahl der dunklen Zeichen bei insgesamt 9 Zeichen:
2 Fragen = 5 und 9 dunkle Zeichen
3 Fragen = 3, 6 und 9 dunkle Zeichen
4 Fragen = 2, 5, 7 und 9 dunkle Zeichen
5 Fragen = 2, 4, 5, 7 und 9 dunkle Zeichen (Beispiel siehe unten)
6 Fragen = 2, 3, 5, 6, 8 und 9 dunkle Zeichen
7 Fragen = 1, 3, 4, 5, 6, 8 und 9 dunkle Zeichen
8 Fragen = 1, 2, 3, 5, 6, 7, 8 und 9 dunkle Zeichen
9 Fragen = 1, 2, 3, 4, 5, 6, 7, 8 und 9 dunkle Zeichen
10 Fragen = 1, 2, 3, 4, 5, 5, 6, 7, 8 und 9 dunkle Zeichen (2 Fragen mit jeweils 5 dunklen Zeichen)
██▒▒▒▒▒▒▒ 1. Frage
████▒▒▒▒▒ 2. Frage
█████▒▒▒▒ 3. Frage
███████▒▒ 4. Frage
█████████ 5. Frage
Bei weniger als 9 dunklen Zeichen mit hellen Zeichen auffüllen.
Hinweise:
Die Beschriftung ist nur für WebSite X5 Nutzer als Hinweis auf die Funktion des Feldtyps in der Liste der Feldtypen.
Die Beschriftung erscheint nicht in der Mail. Sichtbar auf der Webseite ist nur der Text im Feld "Text" ohne den Code.
3) Einstellungen bei Beschreibung (Frauenbilder) mit den eingefügten Fotos als HTML-Code
Hier werden die Bilder als HTML-Code mit dem IMG-Tag eingefügt. Die Bilder sind nummeriert, falls sie auf schmalen Bildschirmen anders angeordnet sind.
Die Beschriftung ist nur für WebSite X5 Nutzer als Hinweis auf die Funktion des Feldtyps in der Liste der Feldtypen.
Die Beschriftung erscheint nicht in der Mail. Sichtbar auf der Webseite ist der Text im Feld "Text" und die Bilder.
4) Einstellungen bei "Einfache Auswahl" und auch bei "Mehrfachauswahl"
Hier entspricht die "Spaltenanzahl" auch der Anzahl der Listenpunkte, damit die Auswahl waagerecht angeordnet wird.
Hinweis: Diese Beschriftung hier erscheint in der Mail im Gegensatz zu den anderen Beschriftungen.
5) Einstellungen bei Beschreibung mit HTML-Code für Leerzeilen
Und hier werden mit HTML-Code Leerzeilen eingefügt, um einen Abstand zu schaffen.
