Tutorial: Building A Design Template

Every element in a survey can be styled to your needs. The most basic way to style a survey is to use an existing template from your Template Library.

But if you are like us, you’ll want to tweak and build new styles on your own — and perhaps even share them with other SurveyGizmo users!

Step 1: Building a Design Template from Scratch 101

The first step in creating a new template is to build its HTML (preferably XHTML) framework. This is best done in an application such as DreamWeaver or FrontPage.

Here are some guidelines to help you out:

• Remember to use ABSOLUTE URLs for all of your images. Example: http://www.acmeco.com/images/myimage.gif
• If you are using styles, we *highly* recommend using a separate stylesheet file from the beginning.
• If you are using colors for text or backgrounds, use style classes in your CSS document to define them. This allows future users of your SurveyTemplate to make their own color choices.

Once you have designed your HTML layout, it is time to tell SurveyGizmo where to insert the survey content.

SurveyGizmo (like most template systems) has a series of merge codes and commands to help you. For example: [%%:Survey_Title%%] will merge in the title of the survey and [%%IF:Survey_Page==2%%] … [%%ENDIF%%] will show the ‘ellipsis’ content only if the current survey page is page 2.

Here is a list of the standard merge codes you can use. By the way, if a merge code is not defined on the page you are viewing, it will return a blank.

Survey Merge Codes

• [%%:Survey_Title%%] – The title of the survey you are working on

• [%%:Survey_Date%%] – The date the survey was published
• [%%:Survey_CloseDate%%] – The date the survey is scheduled to close
• [%%:Survey_CurrentLanguage%%] – The current language of the survey taker (default: English)
• [%%:Survey_Page%%] – The current page of the survey
• [%%:Survey_Pages%%] – The total number of pages in the survey (If pages are hidden they will not appear in this count until they are triggered)
• [%%:Survey_Questions%%]”’ – The total number of questions on visible pages in the survey
• [%%:Survey_QuestionsAnswered%%] – The total number of questions answered in the survey
• [%%:Survey_ProgressBar%%] – Displays a graphical progress bar
• [%%:Page_Title%%] – Displays the current page’s title
• [%%:Page_Description%%] – Displays the current page’s description
• [%%:CustomText_1:title (Default: Text)%%] … [%%:CustomText_'''99''':title (Default: Text)%%] – Text you want to be customizable.
• [%%:Error_Message%%] – Merges in any error messages associated with the current survey page

Question Codes

• [%%:Question_Block%%]”’ – Displays remaining questions for this survey page.
• [%%:Button_NextPage:Click to Next Page%%]”’ – Displays the ‘next page’ button with the text “Click to Next Page”
• [%%:Button_SaveSurvey:Click to Save%%]”’ – Displays the ’save’ button with the text “Click to Save”
• [%%:Button_BackPage:Click to Go Back%%]”’ – Displays the ‘last page’ button with the text “Click to Go Back”
• [%%:Button_Submit:Click Submit%%]”’ – Displays the ’submit survey’ button with the text “Click to Submit”
• [%%:Error_Message%%]”’ – Displays the current error message (if there is one)

CSS Merges — these are hooks that allow you to modify an instance of this style from the SurveyEditor

• [%%:CustomColor_1:title (Default: Text)%%] …. [%%:CustomColor_'''99''':title (Default: Text)%%] – Allows the end use to customize your colors
• [%%:ImageLink_1:title (Default: Text)%%] …. [%%:ImageLink_'''99''':title (Default: Text)%%] – Allows the end use to customize background & style images
• [%%:Font_1:title (Default: Text)%%] …. [%%:Font_'''99''':title (Default: Text)%%] – merges in like this: “normal 12px/16px verdana”

You can provide ‘canned’ options in the default value text like this:
[%%:Font_1: Sample (Default: bold 12px/18px verdana {normal 11px/14px arial;bold 12px/18px verdana} )%%]

Note: Use the “title” attribute to name these elements. The SurveyEditor will pick up on your titles and use them.

ControlCodes

• [%%IF:(Variable)(==,<=,>=,!=,<,>)(Value)%%] … [%%ENDIF!%%]

Note: At the moment there is no support for loops. If you see a need for them, email us!

Step 2: Adding your beautiful template into SurveyGizmo

Once you have created your template (or at least gotten far enough along to test it), you can add the template to your SurveyGizmo account in two places: The template library (where this template will become available for any of your surveys in the future) or a specific survey.

To add it to a specific survey, click the “Style Design” option from your survey’s summary page. The very top option, “Choose Your Style”, has a button called ‘New Style’. That button will open up two text areas: one for your HTML and another for your stylesheet. Simply paste them into the box from your editor, or use the upload option to grab them from your hard drive.

Once saved, you can now view your survey in its new style and modify any custom attributes you have setup.

If you need to modify the styles for specific question types (beyond the options available in the SurveyEditor) simply override their classes in your Stylesheet. Don’t forget to set the defaults for your custom fields; they start out blank.

Hey, if you come up with a great style and want to share it — please email it to us and we’ll add it to the site!