Integration Tutorial: How to Embed a Survey on Your Site with Dreamweaver CS4

Overview

Adobe Dreamweaver CS4 is a great entry-level tool for those looking to quickly assemble a web site or update some content using a visual style WYSIWYG editor. In this tutorial, we'll show you step by step how to get a professional survey running on your website using Dreamweaver & RationalSurvey.

Our basic survey will ask visitors the following questions:

• How would you rate this article on a scale of 1 to 5? (1,2,3,4,5)
• Which of the following topics do you prefer the most? (Technology, Politics, Cooking, Weather)
• How would you improve the content on the site?

Creating The Survey

Before we get started, make sure you have a RationalSurvey account. If not, you can get one for free by registering here: http://www.rationalsurvey.com/register/free.

Now that you have an account, login & click the "Configure" button/link in the top navigation.

From the questionnaire builder, click the "Create" questionnaire button and enter "Sample Survey" into the title field of the pop-up dialog, then click "Create".

Adding The Questions

Hover over the first default question and double click anywhere over the highlighted background or click the edit icon within the context menu to bring up the edit question dialog.

Now lets customize our first question.

Enter the question text into the "Question" field, the answers into the "Answers" field, & click "Update" to save your changes.

Do the same for the second, the only difference being that you need to enable the "Allow Multiple Responses" option for the multiple choice question since we're asking the visitor to choose 1 or more answer choices.

Now for the third, we may need to create a new question if there are not enough sample questions in the newly created questionnaire.

To do so, just click the icon within the context menu for the last question.

This will bring up the add question dialog. Now select "Free Response" in the "Select Type" drop down. Enter in the question text, set "Field Type" to "Textarea", and "Field Size" to "Small". Then click "Create" to add the question.

Configuring Survey Settings

Now click the "Settings" crumb link or click "Next" below the questionnaire to get to the settings page.

From the settings page, open the "Advanced" tab and enable the "Reset on Completion" option. Then don't forget to click "Save".

Getting the Embed Code

Within the distribute sidebar (lower right), click the embed quick link to open the embed dialog.

If you have trouble with this step, you can also grab a copy of the embed from the Distribute page's embed tab.

Once opened, if not already highlighted, click inside the text field and copy the embed code to your computer's clipboard ( usually ctrl+c for windows ).

Dreamweaver Setup

Now start Dreamweaver and wait for it to load. When it finishes loading, click "New Site" from the "Site" drop-down menu.

Within the advanced tab, select the "Local Info" category and enter in a site name and select a folder that will contain your local site files.

Then select the "Remote Info" category, choose "FTP" from the access field drop down, and enter in your ftp account settings. Note: The settings are usually provided by your hosting provider, web master, or system administrator.

After clicking "Ok", Dreamweaver should automatically connect to the server and synchronize with the remote site by downloading any or all content that is missing from the directory specified in the previous "Local Info" step. At this point, select the file/page in which you would like to display the survey and open it from the "Files" window.

Embedding Survey

Once the desired page is open, click the "Split" tab to display the page in split code & design view. Select the place where you would like to add the survey by clicking within the Design view, then clicking & pasting the survey embed into the Code view. Make sure the embed code doesn't appear as physical text within the Design view and then save your page.

Now right click on the modified file and select "put" from the context menu. If it asks you whether or not you want to overwrite the file, choose yes.

Done

Navigate to your web page and now you & your visitors will be able to see & use your brand new feedback survey.

View Feedback Data

To checkout your response data just log into your RationalSurvey account and click the "3. Analytics" link in the top navigation.

Then click the "Totals" link in the crumb trail to get a detailed question by question analysis.

Conclusion

Embedding a survey on your site with RationalSurvey & Dreamweaver is really simple, straightforward, and saves time and money by replacing the need to code a custom survey while giving you plenty of control in an easy to use "Copy + Paste" solution.