Umfragen‎ > ‎Gestalten‎ > ‎

Schablone erstellen


Mit einer HTML-Schablone können Sie die Gestaltung der aktuellen Umfrage beeinflussen. Dabei stehen Ihnen Gestaltungsmöglichkeiten zur Verfügung, die weit über diejenigen der Layout-Einstellungen hinausgehen, allerdings müssen Sie über HTML- und CSS-Kenntnisse verfügen, um diese Möglichkeiten ausschöpfen zu können.

Eine HTML-Schablone ist grundsätzlich eine HTML-Datei, auf die über eine URL zugegriffen werden kann und die den Platzhalter {survey} enthält. Anstelle des Platzhalters werden dann die Umfrage-Inhalte, also Fragen und Textblöcke, angezeigt.

Die Schablonen Datei sollte Grundsätzlich folgenden Aufbau haben:

Aufbau

Als erstes den Doctype:

<!DOCTYPE html>


Eine Erklärung was dies ist, erhalten Sie hier: https://wiki.selfhtml.org/wiki/HTML/Dokumentstruktur_und_Aufbau

Dann folgt der HTML-Standard Aufbau:

<html>

<head>

</head>

<body>

</body>

</html>



Header

Im Header Bereich müssen folgende Inhalte eingefügt werden:

Viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Der Viewport muss eingefügt werden, um die Seite responsive zu machen.

CSS-Dateien:

<link href="https://[sub].datacoll.net/content/elements.css" rel="stylesheet" type="text/css" />

<link href="https://[sub].datacoll.net/content/defaultvariables.css" rel="stylesheet" type="text/css" />

<link href="https://[sub].datacoll.net/content/site.css" rel="stylesheet" type="text/css" />

Der [sub] muss durch Ihre Subdomain ausgetauscht werden.

Diese Dateien müssen in dieser Reihenfolge eingeladen werden. Nur dann funktionieren alle Styles wie im Survalyzer gewohnt auch auf mobilen Endgeräten.

Danach können Sie Ihr eigenes Stylesheet einfügen und die gewünschten Styles vom Design überschreiben.

Es muss aus Sicherheitsgründen immer via https eingeladen werden.

Body

Hier müssen Sie im Wesentlichen nur {survey} einfügen um die Umfrageinhalte zu platzieren.

Alle weiteren Platzhalter finden Sie unter Umfrage Platzhalter. Umfrage Platzhalter sind sehr nützlich um Inhalte wie Kopfzeilen und Fusszeilen im Template zu platzieren.


Beispiel Template

Hier können Sie ein Beispiel Template herunterladen.

Hier können Sie das Template in Aktion sehen:

https://marketing.datacoll.net/hpknhxmoud?l=de



Gebrauch von Templates

Wie Sie Templates einfügen und verwenden können, wird unter "Gestalten" beschrieben.


Mehrsprachige Templates

In einer mehrsprachigen Umfrage kann die eingesetzte HTML-Schablone so angepasst werden, dass einzelne Inhalte (z.B. Logos mit Slogan-Text) oder bestimmte Formatierungen in Abhängigkeit von der Umfragesprache variieren. Dabei ist es möglich, für jedes Gestaltungselement getrennte Versionen für jede Sprache zu definieren.

Das HTML-Element wird dafür vom System mit einem Sprachcode-Tag versehen.

Die Definition erfolgt über CSS, wobei die grundlegende CSS-Syntax wie folgt aussieht:
:lang(Sprachcode) {

CSS Anweisungen;

}


Beispiel:


Sie haben 3 Elemente mit unterschiedlichen Inhalten, je nach Sprache:

<div lang="en">Hello, this is English</div>

<div lang="de">Hallo, dies ist Deutsch</div>

<div lang="it">Ciao, questo è italiano</div>

Dann könnten Sie nur Englisch mit der Farbe Rot versehen:

div:lang(en){

color: red;

}


Oder alle Elemente Ausblenden die nicht Englisch sind, sofern Englisch als Sprache gewählt ist:
:lang(en) :lang(de), :lang(en) :lang(it){

display: none;

}

Sprachcodes

Eine Liste mit allen Sprachcodes finden Sie hier: Sprachcodes