Page tree
Skip to end of metadata
Go to start of metadata

This page contains the description of the tools which can be used to make the Survey design match its requirements.

The current page contains the following topics:

Form Layout Design


On this page you can change Form/Survey colors and fonts, change a text for standard buttons or upload your own.

Form/Survey Layout page consists of two panes:

  • Categories pane is used to organize the current layout, standard and custom themes. You can find it in the left part of the screen.
  • Layout pane displays list of layout themes that reside in the selected folder and category, and controls to edit or create new survey layout.

To edit current form/survey layout, follow the steps below:

  1. Click the Layout link from the Current Layout folder.
  2. From the Layout Pane in the right click the Edit link.
  3. Apply layout Styles, Buttons and CSS.
  4. Save the changes.

Standard Themes folder contain ready-made themes that apply custom design to the survey per one click. Theme is comprised of a set of graphics and cascading style sheets (CSS) that control styles, fonts, and other elements. To apply a theme to your survey, follow these steps:

  • Select the category from Standard Themes folder.
  • Click on the magnifier icon on the theme thumbnail to preview the theme.
  • Select the theme you would like to apply and click on it. Please note, that any previous fonts, buttons and colors will be lost.

Custom Themes folder is used to store your custom design templates (themes). You can copy and customize existing themes or create new one from scratch. To categorize custom themes you can create custom categories for quick access to the appropriate design templates. To create a new category:

  1. Go to the Custom Themes folder.
  2. Click the New button from the pane menu at the top.
  3. Give name to the custom category and confirm saving.

From the Layout pane you can create new custom themes, edit and delete design templates from the Custom Themes folder:

To create new theme click the New Theme button from the Layout pane and follow the steps below:

  • Enter theme name.
  • Select category for the new theme.
  • Upload thumbnail image. Thumbnail is a small preview of the theme and is displayed in the Layout pane.
  • Click Next to save changes and proceed to the layout customizing pages.

If you edit a Custom theme which was already applied to some forms and surveys, you need to reapply this theme to these forms to reflect the changes.

To preview your survey in a test mode click the magnifier icon in the right corner of the theme thumbnail.

You can customize the layout of the Standard Themes and adapt it to your particular needs, for example: change font style, weight or color, apply new logo and others. Apply any theme to your survey from the list of ready-made themes. Then go to the Current Layout folder and click Edit link. From the Edit Layout page you can use Styles or CSS editor.

Back Takes you back to the survey Questions page.

Next Redirects you to the survey Settings page.

Edit Layout

 

  • The Edit Layout page allows you to customize forms' appearance using the available functionality
  • Click on the tab that corresponds to the form section you wish to edit

The Styles wizard is used to customize form/survey fonts and colors and does not require any particular knowledge of design editors and tools. Select form/survey element you want to customize in the left list of the wizard and apply changes to the font or alignment to this element.


Styles PageThe Form in Preview Mode

If you wish to make the answer options within all Rate different items along the scale of your choice bold and aligned to center, select Answer option text-Rate along the scale questions category, then choose the needed font style and text alignment:

If you select Instructions and headings and choose a bigger font size for them, the question text in all Section Headers will become bigger:

If you select Even answer options and choose a green background color for it, all even answer options within your form will acquire a green background and it will be easier to distinguish them:

 
  • The changes on the Styles tab may not be applied right away due to the browser caching. Try clicking Ctrl + F5 (Command + Shift + R on Mac) to refresh the page omitting cache.
  • Sometimes your custom CSS code may also overwrite the changes applied on the Styles page. In such cases, the CSS code of the form/survey needs to be reviewed.

Buttons wizard allows you to customize form/survey navigation buttons: SubmitBackNextClose and Save.

You can upload your own buttons using the Image Buttons option. Click the Upload your own buttons link to expand the upload tool.

The HTML Buttons option is used to display pure HTML buttons with your custom text.

Use this option only if you would like to be able to enter the translations for the button labels in the multilingual form/survey.


You can only upload .gif and .png files to be used as buttons.

The CSS wizard requires knowledge of CSS and allows you to edit each particular form/survey question and element. Click here to go to the CSS Guide help chapter.

  • Use this feature with caution since it may damage your layout if used incorrectly.
  • Sometimes the CSS changes may not be reflected instantly due to a browser caching. Try clicking Ctrl + F5 (Command + Shift + R on Mac) to refresh the page omitting cache.

The PreviewNextApplyFinish and Cancel buttons names correspond to their functions.

The Default button resets a custom theme applied along with any additional CSS code changes to the default layout.

Design Accessible Survey


Form.com/Key Survey application allows creating forms and surveys for people with disabilities that meet most Section 508 requirements.

These forms and surveys can be accessed and filled out using the screen reader and keyboard (including accessible keyboard).

In order to build accessible Section 508-compliant form/survey within the Form.com and Key Survey, follow these requirements:

  • It is not recommended to use questions of 'Rate Different Items' and '3D Matrix' types because they can be displayed and filled in differently using different browsers and screen readers.
  • Questions that contain radio-buttons ('Pick One or Other', 'Compare One Against Another', etc.) should be designed using <default/> tag to mark the default answer choice.
  • It is not recommended to use 'Other' option ('Pick One or Other' and 'Check All That Apply' types of question).
  • It is not recommended to use 'Access Time Saver' plugin in this type of surveys.
  • To ensure better compatibility, please use Drop down question type instead of radio buttons (Pick one or "other" and/or Rate different items along the scale of your choice)

Panel Survey Design

Panel survey is a survey that is distributed by a third party panel company. Using Logical Redirect and Quota With Redirect Plugins, as well as Import from URL and Piping features, panel surveys capture panelist ID information and store it in one or more hidden fields, determine respondent qualification, and send the respondent to the correct "landing page" at the panel company's web site.

Following sequence of actions should be implemented to set up a panel  survey(it is assumed that you have already created survey and now you want to make it panel):

1.  Set up the survey to capture panelist ID information

Insert a "Single line text with pre-format options" question with Import from URL applied to one or more fields, place this question at the beginning of the survey, and hide it.

For this example, it is assumed that the panel company you are working with has only one value for respondent identification - ID. So, click the wrench icon for the first answer field to apply Import from URL, like this:

2.  Determine Quotas and Terminate conditions

Surveys that launched through panel companies are used to gather a desired number of responses from people that fit certain demographics.

Knowing this, and having questions in the survey asking for Gender and State, it is possible to determine  Qx.Ay references for Quota and Terminate conditions:

  • Quotas:
    • Male - Q2.A1 - 50
    • Female - Q2.A2 - 50
  • Terminates:
    • Maine - Q3.A2
    • New Hampshire - Q3.A4
    • Vermont - Q3.A6

3.  Create redirect URLs

Panel companies provide "landing page" or redirect URLs for respondents to go to when they have finished with the survey. While it is not always done the same way, it is common for there to be three such pages: one for qualified completes, one for over quota respondents, and one for terminates (non-qualified respondents).

http://www.somepanelcompany.com/complete.html?id=ABC123
http://www.somepanelcompany.com/overquota.html?id=ABC123
http://www.somepanelcompany.com/terminate.html?id=ABC123

These URLs have a parameter appended to them called ID, which happens to be the same as the one created in step 1. The value ABC123 is a placeholder indicating where in the URL the actual ID will be inserted. That insertion will be done with Piping, so that the captured ID is sent back to the panel company. Assuming that "Panelist ID Information" is Q1 and knowing that it has only one answer field in it, ID has next question reference - Q1.A1. So redirect URLs become:

http://www.somepanelcompany.com/complete.html?id={Q1.A1}
http://www.somepanelcompany.com/overquota.html?id={Q1.A1}
http://www.somepanelcompany.com/terminate.html?id={Q1.A1}

4.  Add redirect URLs to the survey

Using what was determined in steps 2 and 3,the next step will include adding the needed Plugins to the survey so that respondents will be redirected to the appropriate landing page, based on quotas and their answers.

  • For over quota conditions, the Quota With Redirect plugin will be used. There will be multiple instances of this Plugin - one for each quota. This example contains two quotas, so two Quota With Redirect Plugins will be set up like so:

  • For terminate conditions, Logical Redirect plugin should be used. Some users with many terminate conditions prefer to use multiple Plugins - one for each condition or one for each question that has multiple terminate answers. This is also an option and purely a matter of preference. Our example is fairly simple, so just one plugin will be used:

Notice that each of the Plugins are set to redirect on "Next and Submit". Usually, you do not want a respondent who is over quota or does not qualify to take the whole survey before being sent to the appropriate landing page. By setting the Plugins to redirect on "Next and Submit", it can redirect the respondents upon the click of the very first Next button that appears after the quota or qualification question(s). This ensures that the respondent will be redirected from mid-survey as soon as it is determined that they are either over quota or do not qualify.

For the qualified respondents who will complete the survey, insert the appropriate URL in the Redirect Page field in the survey Settings dialog:

 

5.  Provide the panel company with the survey URL

  • Visit  survey's Launch page, and copy the Master URL. It will look something like this: https://app.keysurvey.com/f/313935/53e4/?LQID=1& 
    Adding the "Import from URL" feature to the question in step 1 causes ?LQID=1& to be automatically added to the Master URL. URL Import does not work without this parameter, so if it does not appear, go back to the question that was set up for capturing ID information and check its settings.
  • Paste this URL into a document or email that will be sent to the panel company. Then add parameter name from step 1 to the end of the URL, with a placeholder after it to indicate where the value to capture should be inserted into the URL. If multiple parameters are used, be sure to use the ampersand (&) before each one. It will then look like this: https://app.keysurvey.com/f/313935/53e4/?LQID=1&id=ABC123 

 The panel company will replace the placeholder (ABC123 in this case) with a unique value for each respondent when they distribute the survey URL.

 

 

To make pre-launch testing easier, you can temporarily use the option "Allow multiple responses", found in Settings. This always starts a new blank instance of the survey upon opening the Master Link, so it will not be necessary to delete a previous response to test again.

When the survey is ready to launch, switch to "Do not allow respondent back into survey", also found in Settings. This will prevent Completed respondents from getting back into the survey and changing their answers.

You can add a logo to the form/survey to meet your company or products design.

To add a logo to the survey follow these steps:

  1. Click the Add Logo button on the survey Questions page;
  2. Click the Select Image button to locate image file you want to upload as a logo within your Media Library;
  3. Select the image you wish to attach;
  4. Click OK button at the bottom right to upload logo.

Click Save to save changes.

Click Preview button to preview the survey with a new logo.

After the image is uploaded you can change its size, alignment, edit image description and other options:

  • Specify where you want this logo to appear by selecting an alignment.
  • Change logo size. If you are not sure what size it should be click on the lower right corner of the image and drag it to the required size. Preview the survey to see if matches your survey layout.
  • Logo Description allows you to add a short description to the Image.
  • You can add any custom text using Mouse Over option. Respondents will see it if they move their mouse over the survey logo.
  • The On click open link option allows you to redirect survey respondents to your web site or any other page in the web after clicking the logo image.

 

 

You can use only .jpg, .jpeg, .gif, .bmp, .png images in RGB colorspace.