“ A powerful new survey tool for creating questionnaire based surveys & polls online. “

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

Overview

dreamweaver logo

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.

Click to Configure

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

Create Questionnaire
Create Questionnaire Dialog

Adding The Questions

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

Edit Default Question

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.

Customize First Question

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.

Customize Second Question

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 Plus icon within the context menu for the last question.

Add New 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.

Free Response Question

Configuring Survey Settings

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

Settings Link

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

Enable Advanced Option

Getting the Embed Code

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

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

Copy Embed Code

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.

Dreamweaver Start

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.

Dreamweaver Configure Local Site

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.

Dreamweaver Configure Remote Site

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.

Dreamweaver Edit File

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.

Dreamweaver Embed Survey

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.

Dreamweaver Upload Page

Done

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

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.

Analyze Overview

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

Analyze Totals

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.

Track Our Flight
rss_icon
RationalSurvey Twitter
Mailing List
Blog
Authorize.Net Merchant - Click to Verify