1. Home
  2. HTML-Template for Survalyzer

HTML-Template for Survalyzer

Contents

If you have knowledge of HTML and CSS you can create your own survey HTML Template for Survalyzer, which matches your CI/CD definitions.

NOTE: HTML & CSS is not included in your support contract. If you need help with this, hourly based charging will apply

To guide you through the creation of an HTML template, we have created this tutorial. Each step is explained below:

1st Step: Asking for sFTP Account to upload your files to the Survalyzer Template Server

For security reasons we only allow templates hosted on our server network. This is also needed if you want to use your own fonts. More about this below.

To order an sFTP Account please send an email to support@survalyzer.com with the subject “sFTP Account” giving us your account information. Only users with a valid licence will be given access.

2nd Step: Creation of HTML structure

First of all you need a Doctype

<!DOCTYPE html>

Further explanation of this can be found here:

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

Next comes the standard HTML structure:

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

If you create a basic HTML page as a template, you’ll see that there are no design patterns. However, the third step will help with this.

3rd Step: Header settings and files to include

The header must have the following content to work:

Viewport

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

Viewport must be included to enable the responsive design to work.

CSS-Files

<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" />

The [sub] has to be replaced with your own subdomain.

For Custom Domain accounts: the whole domain has to be changed. So instead of using https://[sub].datacoll.net, use https://your-sub.your-domain.com.

Using these guidelines, you can include your own stylesheet. With your own stylesheet you can overwrite any style you like.

You can find your files by using your survey domain + “_clients/yourfolder/”

Example:

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

All files must be included via https for security reasons.

4th Step: Body Structure & Placeholders

You can add any HTML elements you need within the body tags of your HTML template. This will make it possible to add custom headers and footers. Your elements can be designed with your own CSS file.

Placeholders

Survey placeholder (mandatory)

To enable the survey to appear you need to use the following placeholder:

{survey}

This needs to be placed somewhere between the body tags and will be replaced with the whole survey.

Header placeholder (optional)

The header placeholder can be set to a specific place within your HTML body structure:

{{survey.header}}

It will be replaced by the content of the header filled and defined on the design page. It will be placed in a div container with the class “rsp-header”.

If the header placeholder is not set in the template, but is activated, the header will be placed directly in front of the survey content.

Footer placeholder (optional)

The footer placeholder can be set to a specific place within your HTML body structure:

{{survey.footer}}

It will be replaced by the content of the footer filled and defined on the design page. It will be placed in a div container with the CSS class “rsp-footer”.

If the footer placeholder is not set in the template, but is activated, the footer will be placed directly after the survey content.

Language Selector placeholder (optional)

The language selector placeholder can be set wherever you wish within your HTML structure:

{{survey.language_selector}}

If the language selector placeholder is not set in the template, but is activated, the language selector will be placed by default settings on the design page.

The language selector is replaced with the following HTML structure:

Deutsch English

Progress Bar placeholder (optional)

The progress bar placeholder can be set wherever you wish within your HTML structure:

{{survey.progress_bar}}

If the progress bar placeholder is not set in the template, but is activated, the progress bar will be placed, by default, on the design page.

The progress bar is replaced with the following HTML structure:

<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>

5th Step: Redesign Elements

When the layout fits, you may wish to change some elements. To achieve this the process is very simple: overwrite existing designs.

As your CSS file is included last, it will overwrite pre-existing CSS definitions. In the following paragraphs, we explain how to change the appeareance of default elements and how to include your own font. This list only includes a few examples. If you know what you’re doing, you’ll know how to find the rest!

Radio Buttons and Check Boxes

/* -------------------------------------------- */
/* ----- 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 */
    }
} 

As you can see, the buttons have to be redesigned twice, since the same definitions exist for two screen widths (desktop pc or Tablet/Smartphone). As the @media definitions are above in the hierarchy, you’ll also need to overwrite these. This enables the following:

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;
} 

As you can see, the next and the back buttons both share a class “rsp-btn”, but they also have two different classes: “rsp-btn-back” for the back button and “rsp-btn-next” for the next button. This enables the following redesign:

Using your own Font

To reach full CI/CD you may need to also upload your own. As Cross-Site scripting is not allowed we have to use a specific path to load the fonts. When you use our FTP it is always via the following path:

CH Clients:

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

EU Clients:

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

If you have your own domain for surveys within survalyzer you can use that domain as well, just add that part after your domain:

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

Add your font like this:

/* ========= */
/* = 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;
}

To use your font, you’ll need the following 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;
} 

By applying this, you font will be universally changed. A new font can result in some changes in paddings and margins, potentially requiring further adjustment. This should give an overview of how you can change the default design to your desired survey design.

Optional Step: Multi-Language Templates

For multilingual surveys, you can use an HTML template that shows varying content (e.g. a logo) to participants, depending on the survey language. Each page object can have a different version for each language setting available in your survey.

The HTML element will need a language code for this:

lang="it"

You can define styling and design options in the template by using the following CSS syntax:

:lang(languagecode) {
   css declarations;
}

The :lang() selector is used to select elements with a lang attribute with the specified value. The lang attribute value is usually a two-letter language code, like lang=”de” (for German), or lang=”en” (for English).

Example:

Hello, this is English
Hallo, dies ist Deutsch
Ciao, questo è italiano

You may want to style one language (for example, English) in a certain way:

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

or you may want to hide everything that’s not English, if English is chosen as the language for the survey:

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

Optional Step: Right-to-Left Languages

You need to consider changes to your design for a language which is read from right to left, like Arabic.

In this case, some styles need to be defined, and some left to right styles need to be changed.

Firstly, you must define the direction of the whole survey:

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

Next, you need to define new margins, paddings and floats:

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;
}

After this change, the HTML Template should work for RTL languages:

Updated on March 31, 2021

Was this article helpful?