1. Enter the ‘Surveys’ tab and create your questions and/or lead collector. After saving your questions you can focus on the design of the survey.

In order to upload an image into your survey you have to go to the ‘Texts‘ step and choose where you desire to upload the image:

  • into the header ( which will be available for all the questions  and for the lead collector also )
  • into the intro message that appears when the survey is opened
  • or into the thank you message that appears when the survey is ended.

 

 

2. Click on the specific icon that is used for uploading pictures

2

 

3.Select the ‘Upload’ tab and choose the image that you want to integrate into the survey

3

 

4.After uploading the picture click on ‘Source‘ in order to have access to the source code of the Header, Intro Message or Thank you message of the survey.

4

 

5.Erase the part of the code that describes the size of the image , ‘width’ and ‘height’, used in the <style> attribute.

5

 

6. The technique used for making the image responsive is based on media queries.

The following block of code has to be inserted, at the beginning, into the source code of the survey and will allow the image to scale properly on mobile devices:

<style type=”text/css”>

 

@media screen and (max-width: 480px) {

 

html body #_mktz_survey #_mktz_header img {

 

  width: 100%;

 

  display: block;

 

  margin: auto;

 

  }

 

}

 

</style>

6

 

7. After completing all these steps you can select preview in order to check how your survey will appear on different devices

 

8. Into the Preview mode you can access the ‘Inspect element’ menu of your Chrome browser in order to see how the survey will appear on certain mobile devices. To do that pres F12 or right click anywhere and Inspect element. See the picture below where is the mobile device view button.

8

 

 

Useful tip:

Sometimes the image that you desire to include into your survey won’t fit perfectly in the container of the survey. In this case the survey will have a similar appearance to the one below (Case 1).

In this situation the container of the survey needs to be adjusted in order for the picture to fit properly (Case 2).

10

 

In order to be able to make this adjustment select the ‘Design‘ tab into the survey and go to ‘Advanced CSS‘.  Then use this list of selectors corresponding to the survey to modify the width of the container.

The selected width will depend on the width of the picture (in the given example the picture has a width of 400px).

The ‘max-width’ attribute will be used so that we can keep the survey container responsive.