This will walk through the key step in converting an existing paper survey or HTML form to a survey.&nbsp;

When converting a document to a survey, one of the key processes is to break up the content into the following:

If you are building a survey with specific styling and validation, you will need knowledge of the following:

Each survey has a default reference to:&nbsp;

All images are hosted on the Epsilon CDN (Content Delivery Network). So before you begin, upload the logo to the Epsilon CDN.&nbsp;

To add a logo, drag the "Add User Defined Content" panel to the page design. Click the edit button.

This will take you into the content editor. Select the "insert image" icon and enter the CDN link to the logo. Save and center it.

If you have HTML for your logo or have specific HTML you use, you can enter the HTML directly.

This is a sample html fragment for a logo:

Static content usually refers to instructions or headings - any content which does not collect data.

You need to be careful if copying content from a document or an existing HTML page. The copy process can copy unwanted content such as script, links to style sheets, unwanted styling.&nbsp; The pitfalls are explained below:

Format the content as required, adding blank lines, setting front size, alignments etc

Copying from HTML - we recommended to edit the HTML page and isolate the content you want.&nbsp;

In this example, there are 2 headings intermingled with code.&nbsp; We just want to copy the heading html. Take care just to copy the HTML and not any of the code or any links to style sheets or script files.&nbsp;&nbsp;

When adding the content, switch to "Source code" mode and paste the HTML content. Save.

If this content has inline styles, they will be applied when the content is saved. If the content has styles in an external style sheet you can add these styles to the survey page. For example the H1 tag from our sample has an external style that changes the color to blue.

This style can be added to page properties "Advanced logic page text" as shown below

It is possible to copy just the text and not any of the html if as we did in the above sample. In this case the process is the same as copying text from word or pdf. Select the content from the rendered html page. Paste as above, save, and then format the text as desired.

The fastest way to add question is through "Bulk Add". This allows you to paste all the question text &amp; answers in one go and create a question.&nbsp;

Select the content from the HTML page or document

Paste directly to the "Bulk add questions" screen. Select question type, and click "Parse" and "Save".

Questions are formatted using a default style sheet and will looks like this for conversation mode surveys:

Basic formatting is controlled from the style tab:

But as you see - in this case the desired affect is to have the question text "1. Participant" shaded which is not the default format.

We can then format the question directly in the content editor as selecting HTML editor:

In this case, as the shaded heading is shared across most of the questions, we choose to&nbsp; use a CSS style.&nbsp;

We add the following HTML for the question by switching to "Source code" mode.

Then we add custom style to format the question text. This is added to page properties as shown below.

Mixed content is generally form fields intermixed with text. This cannot be configured as a question as it is a random mix of text and form data.&nbsp;

We start by copying the content by highlighting it in the word document.&nbsp;

Because this format is re-used in multiple sections, styling using CSS makes it easier to change and ensures consistent formatting. Paste the selected content into a simple HTML editor.&nbsp;

Wrapping bold descriptor "Coupon 1 Title:" in a div with class "offer-text-head", repeating for each line.&nbsp;

We can add input fields directly into the HTML as follows. This also uses CSS to style the fields. Setting the properties on the field:

Example of&nbsp; the coupon price which has two input fields intermingled in it.

The completed fragment will render as follows

To format the above fragment, we created the following styles which we add to page properties.

Use page rules to hide and show survey lines based on answers to question.&nbsp; For example, take the following question: 

If selected "Yes" we show next button and the rest of the questions on that page.&nbsp;

Each survey page is made up of individual lines and each line is numbered as shown below.

The page rules allow you to show lines depending on how a question is answered. In the example below, if the "Participant" question is answered "Yes", then we show lines 5,8,9,10,13

To add images to this question we design the question.

We then edit the html for the answers as shown below:

As each survey has bootstrap css included we use bootstrap to format the image after the answer.

Insert the html for the image after the answer text sand save.

Generally adding a web font is simply add the web font link on the style tab and enter the font and font family as follows. The following shows how to set Roboto web font.

Some times web Fonts are more complex especially if built for a brand and can use many files.&nbsp; In this case the easiest way to proceed to to review the brand web site and extract the font data. The key pieces to extract are as follows:

The example below is the font information extracted for our brand x from their web site.

And we can see the fontface is "brandx Next"

Take the font information and add to the survey page properties under "Advanced logic page text"

Once the font information is added you can set as the default font face for the whole survey on the style tab.

Survey build tips

Sensorpro