1. Home
  2. HTML-Layout-Schablone für Survalyzer

HTML-Layout-Schablone für Survalyzer

Contents

Wenn Sie sich mit HTML und CSS auskennen, können Sie Ihre eigene Umfrage-Layout-Schablone für Survalyzer erstellen, die Ihren CI/CD-Definitionen entspricht.

Anmerkung: HTML & CSS ist kein Bestandteil Ihres Support-Vertrages. Wenn Sie hierzu Hilfe benötigen, wird Ihnen diese auf Stundenbasis in Rechnung gestellt.

Um Ihnen bei der Gestaltung einer HTML-Layout-Schablone zu helfen, haben wir dieses Tutorial zusammengestellt. Jeder Schritt wird weiter unten erklärt:

Schritt 1: Beantragen eines sFTP-Accounts zum Hochladen Ihrer Dateien auf den Survalyzer Template Server

Aus Sicherheitsgründen sind nur Schablonen erlaubt, die in unserem Server-Netzwerk gehostet werden. Dies gilt auch dann, wenn Sie Ihre eigenen Fonts benutzen möchten. Mehr dazu finden Sie weiter unten.

Um ein sFTP-Konto zu beantragen, schicken Sie bitte eine E-Mail an support@survalyzer.com mit dem Betreff „sFTP-Konto“ und teilen Sie uns Ihre Kontoinformationen mit. Der Zugriff wird nur Benutzern mit einer gültigen Lizenz erlaubt.

Schritt 2: Erstellen der HTML-Struktur

Zuerst einmal brauchen Sie einen Doctype

<!DOCTYPE html>

Weiterführende Erklärungen dazu (auf Englisch) finden Sie hier:

http://www.w3schools.com/tags/tag_doctype.asp

Als Nächstes folgt die Standard HTML-Struktur:

<html>
   <head></head>
   <body></body>
</html>

Wenn Sie eine einfache HTML-Seite als Vorlage anlegen, werden Sie feststellen, dass es keine Design-Muster gibt. Der dritte Schritt wird dabei allerdings helfen.

Schritt 3: Header-Einstellungen und zu integrierende Dateien

Der Header muss folgendes beinhalten, damit er funktioniert:

Viewport

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

Viewport muss integriert sein, damit das responsive Design funktionieren kann.

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 Text in [sub] muss durch Ihre eigene Subdomain ersetzt werden.

Für benutzerdefinierte Domain-Konten: Die gesamte Domain muss geändert werden. Anstatt also https://[sub].datacoll.net zu benutzen, nehmen Sie https://ihre-sub.ihre-domain.com.

Mit Hilfe dieser Richtlinien können Sie Ihr eigenes Stylesheet integrieren. Mit einem eigenen Stylesheet können Sie jeden beliebigen Style überschreiben.

Sie können Ihre Dateien über Ihre Umfrage-Domain + „_clients/yourfolder/“ finden

Beispiel:

https://[sub].datacoll.net/_clients/yourfolder/templatefolder/style.css

Aus Sicherheitsgründen müssen alle Dateien über https eingebunden werden.

Schritt 4: Body Struktur & Platzhalter

Sie können alle HTML-Elemente, die Sie brauchen, in die Body-Tags Ihrer HTML-Vorlage einfügen. Dadurch ist es möglich, benutzerdefinierte Header und Footer zu verwenden. Ihre Elemente können mit Ihrer eigenen CSS-Datei gestaltet werden.

Platzhalter

Platzhalter für die Umfrage (obligatorisch)

Um die Umfrage erscheinen zu lassen, müssen Sie den folgenden Platzhalter benutzen:

{survey}

Dieser muss irgendwo zwischen öffnendem und schliessendem Body Tag platziert werden und wird durch die komplette Umfrage ersetzt.

Header Platzhalter (falls gewünscht)

Der Header-Platzhalter kann an eine bestimmte Stelle innerhalb Ihrer HTML-Body-Struktur gesetzt werden:

{{survey.header}}

Er wird durch den Inhalt des Headers ersetzt, der auf der Gestalten-Seite eingefügt und definiert wurde. Er wird in einem Div-Container mit der Klasse „rsp-header“ abgelegt.

Wenn der Platzhalter für den Header in der Schablone nicht eingestellt, der Header aber aktiviert ist, wird der Header direkt über dem Inhalt der Umfrage platziert.

Footer Platzhalter (falls gewünscht)

Der Footer-Platzhalter kann an eine bestimmte Stelle innerhalb Ihrer HTML-Body-Struktur gesetzt werden:

{{survey.footer}}

Er wird durch den Inhalt des Footers ersetzt, der auf der Gestalten-Seite eingefügt und definiert wurde. Er wird in einem Div-Container mit der Klasse „rsp-footer“ abgelegt.

Wenn der Platzhalter für den Footer in der Vorlage nicht eingestellt, der footer aber aktiviert ist, wird der Footer direkt unter dem Inhalt der Umfrage platziert.

Platzhalter für die Sprachauswahl (falls gewünscht)

Der Platzhalter für die Sprachauswahl kann an beliebiger Stelle in Ihrer HTML-Struktur gesetzt werden:

{{survey.language_selector}}

Wenn der Platzhalter für die Sprachauswahl in der Schablone nicht eingestellt, die Sprachauswahl auf der Gestalten-Seite aber aktiviert ist, wird die Sprachauswahl gemäss den Einstellungen auf der Gestalten-Seite platziert.

Die Sprachauswahl wird durch die folgende HTML-Struktur ersetzt:

<div class="rsp-lang-selector-container">
   <select class="rsp-drop-down">
      <option label="Deutsch" value="de" selected="selected">Deutsch</option>
      <option label="English" value="en">English</option>
   </select>
</div>

Platzhalter für den Fortschrittsbalken (falls gewünscht)

Der Platzhalter für den Fortschrittsbalken kann an beliebiger Stelle in Ihrer HTML-Struktur gesetzt werden:

{{survey.progress_bar}}

Wenn der Platzhalter für den Fortschrittsbalken in der Schablone nicht eingestellt, der Fortschrittsbalken aber auf der Gestalten-Seite aktiviert ist, wird der Fortschrittsbalken gemäss den Einstellungen auf der Gestalten-Seite platziert.

Der Fortschrittsbalken wird durch die folgende HTML-Struktur ersetzt:

<div class="rsp-progress-container">
   <div class="rsp-progress">
      <div class="rsp-progress-bar" style="width: 0%;">
         <label style="width:0;color:transparent;background-color:transparent;">
            &nbsp;
         </label>
      </div>
      <label class="rsp-progress-label">0%</label>
   </div>
</div> 

Schritt 5: Design der Elemente ändern

Wenn das Seitenlayout Ihren Vorstellungen entspricht, möchten Sie danach vielleicht einige Elemente verändern. Das lässt sich ganz einfach durch das Überschreiben der bereits vorhandenen Designs erreichen.

Da Ihre CSS-Datei als letztes eingefügt wird, werden die bereits vorhandenen CSS-Definitionen überschrieben. In den folgenden Abschnitten erklären wir, wie Sie das Aussehen von Standardelementen ändern und Ihre eigene Schriftart integrieren können. Diese Liste enthält nur einige wenige Beispiele. Wenn Sie sich auskennen, werden Sie wissen, wie Sie den Rest finden können!

Auswahlknöpfe und Kontrollkästchen

/* -------------------------------------------- */
/* ----- radio / checkboxes form overlays ----- */
/* -------------------------------------------- */

.rsp-radio:not(old):not(.rsp-hide) + label:before,
.rsp-checkbox:not(old):not(.rsp-hide) + label:before
{
    background-color: #ffffff; /* Background Color */
    border-color: #000; /* Question Color */
    height: 7px;
    width: 7px;
    border-width: 1px;
}
body.rsp-notouch .rsp-checkbox:not(old):not(.rsp-hide) + label:hover:before
{
    color:#000; /* Highlight Color */
    font-size: 7px;
    border-color: #0078D7;
    content: '';
}
.rsp-checkbox:not(old):not(.rsp-hide):checked + label:before
{
    color: #000; /* Background Color */
    border-color:#000; /* Highlight Color */
    background-color:#fff; /* Highlight Color */
    font-size: 7px;
}
body.rsp-notouch .rsp-checkbox:not(old):not(.rsp-hide):checked + label:hover:before
{
    color: #0078D7; /* Background Color */
    border-color:#0078D7; /* Highlight Color */
    background-color:#fff; /* Highlight Color */
    font-size: 7px;
    content: "\f00c";
}
body.rsp-notouch .rsp-radio:not(old):not(.rsp-hide) + label:hover:before
{
    background: #fff; /* Highlight Color */
    box-shadow: inset 0px 0px 0px 2px #ffffff; /* Background Color */
    border-color: #0078D7;
}
.rsp-radio:not(old):not(.rsp-hide):checked + label:before
{
    border-color:#000; /* Highlight Color */
    background: #000; /* Background Color */
    border-width: 1px;
    box-shadow: inset 0px 0px 0px 2px #ffffff; /* Background Color */
    height: 7px;
    width: 7px;
}
body.rsp-notouch .rsp-radio:not(old):not(.rsp-hide):checked + label:hover:before
{
    border-color:#0078D7; /* Highlight Color */
    background: #0078D7; /* Background Color */
    box-shadow: inset 0px 0px 0px 2px #ffffff; /* Background Color */
}
@media (max-width: 768px) {
    .rsp-radio:not(old) + label:before,
    .rsp-checkbox:not(old) + label:before
    {
        background-color: #ffffff; /* Background Color */
        border-color: #000; /* Question Color */
        height: 7px;
        width: 7px;
        border-width: 1px;
    }
    body.rsp-notouch .rsp-checkbox:not(old) + label:hover:before
    {
        color:#000; /* Highlight Color */
        font-size: 7px;
    }
    .rsp-checkbox:not(old):checked + label:before
    {
        color: #ffffff; /* Background Color */
        border-color:#000; /* Highlight Color */
        background-color:#000; /* Highlight Color */
        font-size: 7px;
    }
    body.rsp-notouch .rsp-checkbox:not(old):checked + label:hover:before
    {
        color: #ffffff; /* Background Color */
        border-color:#000; /* Highlight Color */
        background-color:#000; /* Highlight Color */
        font-size: 7px;
    }
    body.rsp-notouch .rsp-radio:not(old) + label:hover:before
    {
        background: #000; /* Highlight Color */
        box-shadow: inset 0px 0px 0px 2px #ffffff; /* Background Color */
    }
    .rsp-radio:not(old):checked + label:before
    {
        border-color:#000; /* Highlight Color */
        background: #ffffff; /* Background Color */
        border-width: 5px;
    }
    body.rsp-notouch .rsp-radio:not(old):checked + label:hover:before
    {
        border-color:#000; /* Highlight Color */
        background: #ffffff; /* Background Color */
    }
} 

Wie Sie unschwer erkennen können, müssen die Schaltflächen zweimal neu entworfen werden, weil es für zwei Bildschirmbreiten (Desktop-PC oder Tablet/Smartphone) die gleichen Definitionen gibt. Da die @media-Definitionen in der Hierarchie weiter oben stehen, müssen Sie diese auch überschreiben. Dadurch wird folgendes ermöglicht:

Auswahlknöpfe (Buttons)

/***********/
/* Buttons */
/***********/
button.rsp-btn{
    background-color: #EB138B;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 25px;
}
button.rsp-btn-back:before{
    font-family: fontAwesome;
    color: white;
    font-weight: normal;
    content: '\f060';
    padding-right: 5px;
}

button.rsp-btn-next:after{
    font-family: fontAwesome;
    color: white;
    font-weight: normal;
    content: '\f061';
    padding-left: 5px;
} 

Wie Sie sehen, teilen sich die Schaltflächen „weiter“ und „zurück“ beide eine Klasse mit der Bezeichnung „rsp-btn“, aber sie haben auch zwei verschiedene Klassen: „rsp-btn-back“ für den Zurück-Button und „rsp-btn-next“ für den Weiter-Button. Dadurch ist folgendes neues Design möglich:

Verwendung Ihrer eigenen Schriftart

Um ein vollständiges CI/CD zu erstellen, müssen Sie möglicherweise auch Ihre eigene Schriftart hochladen. Da Cross-Site-Scripting nicht erlaubt ist, müssen wir einen speziellen Pfad verwenden, um die Schriftarten zu generieren. Wenn Sie unseren FTP-Server benutzen, geschieht dies immer über den folgenden Pfad:

CH Kunden:

https://[sub].datacoll.net/_clients/[yourfolder]/fonts/FontName.eot

EU Kunden:

https://[sub].datacoll.nl/_clients/[yourfolder]/fonts/FontName.eot

Wenn Sie eine eigene Domain für Ihre Umfragen in Survalyzer haben, können Sie auch diese Domain verwenden, fügen Sie einfach Ihrem Domain-Namen diesen Teil hinzu:

/_clients/[yourfolder]/fonts/FontName.eot 

Fügen Sie Ihre Schriftart wie folgt hinzu:

/* ========= */
/* = Fonts = */
/* ========= */
@font-face {
    font-family: 'FontName';
    src: url('https://[sub].datacoll.nl/_clients/yourfolder/fonts/FontName.eot'); /* IE9 Compat Modes */
    src: url('https://[sub].datacoll.nl/_clients/yourfolder/fonts/FontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('https://[sub].datacoll.nl/_clients/yourfolder/fonts/FontName.woff2') format('woff2'), /* Super Modern Browsers */
    url('https://[sub].datacoll.nl/_clients/yourfolder/fonts/FontName.woff') format('woff'), /* Pretty Modern Browsers */
    url('https://[sub].datacoll.nl/_clients/yourfolder/fonts/FontName.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('https://[sub].datacoll.nl/_clients/yourfolder/fonts/FontName.svg#INGMeWeb') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

Um Ihre Schriftart zu benutzen, brauchen Sie das folgende CSS:

/* ============== */
/* = Typography = */
/* ============== */

body.rsp-body,
.rsp-question-text,
.rsp-single-container > ul > li > label,
.rsp-multiple-container > ul > li > label,
.rsp-single-container > ul > li > label .rsp-text,
.rsp-multiple-container > ul > li > label .rsp-text,
.rsp-matrix-container .rsp-table,
.rsp-matrix-container .rsp-text,
.rsp-progress-container label,
.rsp-progress .rsp-progress-label,
textarea,
.rsp-slider-container .rsp-slider-answer,
.ui-datepicker.ui-widget-content,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year  {
    font-family: "FontName", Arial, sans-serif;
} 

Hierdurch wird Ihre Schriftart durchgängig geändert. Eine neue Schriftart kann zu einigen Veränderungen bei den inneren und äusseren Abständen führen, was wiederum weitere Anpassungen erforderlich machen könnte. Das hier sollte einen Überblick darüber geben, wie Sie das Standarddesign Ihrer Umfrage in Ihr Wunschdesign ändern können.

Optionaler Schritt: Mehrsprachige Vorlagen

Für mehrsprachige Umfragen können Sie eine gemeinsame HTML-Schablone verwenden, die den Teilnehmern je nach Sprache der Umfrage unterschiedliche Inhalte (z.B. ein anderes Logo) anzeigt. Jedes Objekt einer Seite kann für jede Spracheinstellung in Ihrer Umfrage in einer anderen Version zur Verfügung stehen.

Das HTML-Element wird hierfür einen Sprachcode benötigen:

lang="it"

Sie können mit der folgenden CSS-Syntax Styling- und Designoptionen in der Vorlage definieren:

:lang(languagecode) {
   css declarations;
}

Der Selektor :lang() wird verwendet, um Elemente mit einem lang-Attribut (lang für Sprache) mit dem angegebenen Wert auszuwählen. Der Wert des Attributs lang ist in der Regel ein zweistelliger Sprachcode, wie etwa lang=“de“ (für Deutsch), oder lang=“en“ (für Englisch).

Beispiel:

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

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

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

Sie können eine Sprache (z.B. Englisch) auch in einer bestimmten Weise gestalten:

div:lang(en){
      color: red;
}

oder vielleicht wollen Sie alles ausblenden, was nicht Englisch ist, wenn Sie Englisch als die Sprache für Ihre Umfrage gewählt haben:

:lang(en) :lang(de), :lang(en) :lang(it){
      display: none;
}

Optionaler Schritt: Sprachen, die von rechts nach links geschrieben werden

Für eine Sprache, die von rechts nach links gelesen wird, wie zum Beispiel Arabisch, müssen Sie Änderungen an Ihrem Design in Betracht ziehen.

In einem solchen Fall müssen einige Styles definiert und einige Styles, die dazu gedacht sind, von links nach rechts gelesen zu werden, geändert werden.

Zunächst müssen Sie die Lese-Richtung der gesamten Umfrage definieren:

html:lang(ar) * {
    direction: rtl;
}

Als nächstes müssen Sie neue Ränder, Zwischenräume, und Gleitkomma-Zahlen definieren:

html:lang(ar) .rsp-single-container .rsp-formlabel,
html:lang(ar) .rsp-multiple-container .rsp-formlabel {
    margin-right: 30px;
    margin-left: auto;
}

html:lang(ar) .rsp-single-container > ul,
html:lang(ar) .rsp-multiple-container > ul {
    float: right;
}

html:lang(ar) .rsp-progress-container{
     padding-left: 10px;
}

@media all and (max-width:768px) {

html:lang(ar) .rsp-matrix-container td.rsp-formfield div:not(old).rsp-formlabel {
margin-right: 35px;
margin-left: auto;
text-align: right;
}

html:lang(ar) .rsp-matrix-container td.rsp-formfield .rsp-radio:not(old)+label:before,
html:lang(ar) .rsp-matrix-container td.rsp-formfield .rsp-checkbox:not(old)+label:before {
    right: 10px;
}

html:lang(ar) .rsp-single-container > ul,
html:lang(ar) .rsp-multiple-container > ul,
html:lang(ar) .rsp-single-container > ul > li,
html:lang(ar) .rsp-multiple-container > ul > li {
        padding-left:12px;
        padding-right: 0px;
    }
}

html:lang(ar) .rsp-btn-next {
    float: left;
}

html:lang(ar) .rsp-btn-back {
    float: right;
}

Mit dieser Änderung sollte die HTML-Vorlage für RTL-Sprachen funktionieren:

Updated on Dezember 5, 2019

Was this article helpful?