Article sections

    Insert the Image

    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.

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

    Edit the Source Code

    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.

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

    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>

    Preview the Survey

    7. After completing all these steps you can preview the survey by going to the “Appearance” tab and click on the Desktop, Mobile or Tablet buttons in order to check how your survey will appear on these devices.

    8. If you want to preview the survey, then open in another tab in your browser the Survey and click on Preview.

    9. 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 press F12 or right-click anywhere and then click “Inspect element”. See the picture below where is the mobile device view button.

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

    In order to be able to make this adjustment select the ‘Appearance‘ 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 450px).

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

    Finally, look at the Preview of the survey from the “Appearance” tab to see the changes.