Style a survey

Survey123 Connect provides tools to configure the presentation of a survey, allowing it to stand out to users. You can change the survey's information presented in the gallery, the title present when you've opened the survey, and the colors and styling of the survey to make it visually distinct. You can also insert media into the survey and add HTML formatting.

Change thumbnail, title, description, and tags

The thumbnail and survey name are important to visually differentiate surveys in the Survey123 field app gallery. This is particularly important if you're creating multiple surveys for your own use or if field crews download more than one survey.

Use a thumbnail to differentiate surveys.

To change the thumbnail and other properties of a survey item, complete the following steps:

  1. Open a survey in Survey123 Connect.
  2. Click the Details tab.
  3. Click the thumbnail image to browse to an image file. For best results, use images that are 600x400 pixels in size.
  4. Optionally, provide text for the item title, summary, and description of the survey.

    Changes made here will be reflected in the survey gallery and also in the survey's form item in your ArcGIS organization once the survey is published.

Caution:

Survey123 Connect requires all image files used for thumbnails to have a lowercase file extension. Uppercase file extensions are not recognized by Survey123 Connect, and these thumbnails won't be published with the survey.

The thumbnail may not display correctly if its file name contains spaces, symbols, or special characters.

To add formatting, links, or other rich text elements to the survey description, it is recommended that you use the description editor for the form item in your ArcGIS organization. When editing any form item properties in your ArcGIS organization, you must download the survey in Survey123 Connect again to see the changes on the Details tab.

Set the survey title

The survey title appears when you open the survey from the gallery. It can provide a more detailed description of the survey. The survey title is not the same as the survey name, which is displayed in the gallery.

Create a title for the survey.

You can set the survey title by entering the value in the form_title column of the settings worksheet.

Define a title on the settings worksheet.

Alternatively, you can define your survey's title by including a note question in your survey named generated_note_form_title. This method allows you to provide translations for the title and include values from the survey response in the title using the ${question_name} syntax. For more information, see Customize form elements.

Add media to a survey

Adding media to surveys can be helpful in many ways. It's not just a matter of making surveys pleasing to the eye; images or audio in the survey can help users make determinations when filling in information. Providing images in surveys can assist with making visual identifications or estimations.

On the Media tab, you can also create drawing tools palettes for draw and annotate questions. For more information, see Draw and annotate palettes.

Add media to a note

Add an image to a survey.

To add an image to a survey, complete the following steps:

  1. Preview a survey in Survey123 Connect.
  2. On the toolbar at the bottom, open the Media tab.
  3. Click Open media folder, and add an image file.

    This file will appear on the Media tab.

  4. In the survey worksheet, add a note question and type the file name of the image in the media::image column.

    Media names are case sensitive.

The image is presented in a note in the survey.

Add media to choice lists

You can also add images and audio to the choices for select one and select multiple questions to provide more information to users about each choice.

Use images in a selection list.

To add media to the choices for select one and select multiple questions, complete the following steps:

  1. Preview a survey in Survey123 Connect.
  2. On the toolbar at the bottom, open the Media tab.
  3. Click Open media folder, and add image and audio files.

    These files will appear on the Media tab.

  4. In the choices worksheet, add a choice to the choice list and type the file name of the image for the choice in the media::image column.

    Media names are case sensitive.

  5. Type the file name of the audio file for the choice in the media::audio column.

Images and audio clips are presented alongside each choice for select one and select multiple questions that use that choice list.

Style settings

Style settings allow you to control the colors of various elements in the survey. The Style panel is located on the right of the Form tab.

Experiment with survey styles.

You can customize text and background colors for the survey header, body, input fields, and footer. Click the palette button to choose a color, or provide the hexadecimal color code or HTML color name in the field provided. The contrast button above the text color inputs provides an indication of readability. Click the button to see the contrast ratio between the text and background colors; a ratio below 4.5 is not recommended, as indicated by a red contrast button.

You can also use an image as the background of the survey. The image file you select as the background image will be copied to the media subfolder in the survey project folder.

Group, page, and repeat colors

You can set the colors for groups, pages, and repeats independently of the overall survey style by adding the backgroundColor and borderColor parameters to the body::esri:style column. Colors can be specified by standard HTML color names or hex color codes. You can provide these as a constant or as a reference to a question. Multiple parameters are separated by a space, for example:

backgroundColor=LightCyan borderColor=#483D8B

Note:

The backgroundColor and borderColor parameters are not supported in the Survey123 web app.

Grid style groups do not support borderColor.

HTML formatting

You can use HTML formatting in labels, as well as hints and the labels of choice lists. Applying formatting to this text can help draw attention to important information. Supported HTML formatting is as follows:

TagAttribute

a

href, style

img

src, width, height, border, alt, style

video¹

autoplay, controls, height, loop, muted, poster, preload, width

audio¹

autoplay, controls, loop, muted, preload

source¹

media, src, type

span

style

table

width, height, cellpadding, cellspacing, border, style

div

style, align

font

size, color, style

figure

style

figcaption

style

dd, dl, dt

style

h1, h2, h3, h4, h5, h6

style

tr

height, valign, align, style

td, th

height, width, valign, align, colspan, rowspan, nowrap, style

p

style

b, strong, i, em, u, ul, ol, li, tbody, br, hr

abbr

title

sub

style

sup

style

¹Only supported in the Survey123 web app.

Note:

Links in choice labels don't function in the Survey123 web app in the following situations:

  • When the appearance set in Survey123 Connect is minimal or autocomplete
  • When using the rank question type in Survey123 Connect
  • When using the Dropdown or Ranking question types in the Survey123 web designer

By default, a hyperlink created with HTML formatting opened in the Survey123 web app will open the destination in the same tab as the survey. To open this link in a new tab instead, add target="_blank" to the a href tag, for example:

<a href="https://www.esri.com" target="_blank">Link to Esri website</a>

Thank you screen

A thank you screen appears when data is submitted by the user in the Survey123 web app. You can edit this screen on the Options tab of the web designer and use rich text editing, including links and images.

You can add a link to the thank you screen that will reopen the survey response that was just submitted, in either edit mode or view mode. These built-in links use a dynamic globalId parameter to open the response and allow the user to edit and resubmit it or view it in a read-only state. Click the Link button in the thank you screen editor to add a link. Click the Use a survey link button to add a formatted URL for editing or viewing the survey response.

Add edit mode and view mode links to thank you screen

You can also choose to allow users to submit a new response, either by providing a link in the thank you screen that users can click to reload the survey or by reloading the survey automatically after a specified delay. The default delay is 3 seconds. The autoReload URL parameter takes precedence over the delay set in the Survey123 web designer.

For surveys designed in Survey123 Connect, you can edit this thank you screen by opening the Design page for this survey in the Survey123 website. To save these changes, click Publish and confirm. You can also customize the content for the thank you screen using a special note question in the XLSForm. For more information, see Customize form elements.