Embedding Qualtrics Forms/Surveys in Your Drupal Site


Complexity Level: Intermediate

This is an intermediate topic. You will need to possess some basic understanding and have some experience with Drupal content editing.

Permission Level

Qualtrics can be used to create surveys as well as forms for general data collection. On some occasions, you may wish to embed the Qualtrics form or survey directly into your site instead of linking to the external URL provided by Qualtrics. This document will instruct how to achieve an embedded Qualtrics form or survey.

Step-by-Step Guide

Step 1: Create Your Survey or Form

First, create your Qualtrics survey and make sure you've activated it. Once activated, Qualtrics will provide you with an "Anonymous Survey Link." See image below:

Copy that link by highlighting it, then, on PC's, depress your <SHIFT> key and the "C" key  or, on Macs, the  <?> key and the "C" key. This will copy the text to a temporary clipboard that you can later paste.

Step 2: Create a Page to Embed Your Survey or Form

Login to your Drupal site and create a new page to hold your embedded survey or form. Just give it a title and save it. If you need assistance with logging in or creating a new page, please review these instructions:

Logging into Drupal CMS

Adding or Editing Pages

Step 3: Add Embed Code to Your Page

Once you have created a new page, go back and edit the page you created, and switch to source code view. The source code button is the last button on the right at the top of the Body of the new page. See image below:

Note about Scrolling Forms

By default, unless your form is very short, this embed code may not allow your entire form to be visible in one frame and may require the user to scroll. It is best to adjust the height variable in the embed code until the entire form is visible without a scroll bar. 


Place the following code into the source code view of the page by typing it directly or copying to your clipboard. If you choose to copy and paste this code, you will have to go back to your Qualtrics survey/form and copy your anonymous survey link again. Once you copy another block of code, your previous copy will be lost.

<iframe src="place your anonymous survey link here" name="qualtrics" scrolling="auto" frameborder="no" align="center" height="800px" width="800px"></iframe>

You are going to paste the 'Anonymous Survey Link' that you copied to your clipboard in step 1 into the code above where it says "place your anonymous survey link here".

Make sure to leave the quotation marks so that it resembles the code in the image above.  Place your cursor where you want to paste the text, then on PC's, depress your <SHIFT> key and the "V" key  or, on Macs, the  <?> key and the "V" key. You should see the 'Anonymous Survey Link' appear where your cursor was placed.

Step 4: Save and View your Page

After you have placed the embed code above in your place, make sure to save your page. Then view the page in a browser, and make sure the survey loads within your page. If you don't see the survey show up in your page, then there is something wrong with the embed code. Make sure it looks exactly like the image above, except the link in the src tag should be your anonymous survey link, and the height and width can be adjusted to suit your needs. If you have left out any quotation marks or other characters, this can be problematic. Please verify the code and resave.

Once your form is properly embedded you can view it in your browser window by visiting the page you embedded the form in. If you se a scroll bar, go back and adjust the height variable in the embed code and resave. (see below) 

You may notice that by default all of your forms have the UGA logo on it. If you are just sending the form in a link through email or providing a link to the form on a web page, where the form is not going to be embedded in a web page on your site, you may want to remove the logo. View our documentation on removing the logo




Login Assistance

To manage any part of your web site, you will have to be logged into the Drupal CMS.

If you need help logging in, please review this login help document. 


Contact the Franklin OIT Help Desk

Hours of Operation

Monday - Friday

8:00 a.m. - 5:00 p.m.

Website Information

Homepage

http://oit.franklin.uga.edu

Directory

http://oit.franklin.uga.edu/

Service Offerings

IT Services

Systems Status Information

Franklin OIT Status

http://status.franklin.uga.edu/

Receive or Discontinue Status and Service Updates from Franklin OIT

UGA/EITS Systems Status Pages

http://status.uga.edu

https://twitter.com/uga_eits

https://www.facebook.com/uga.eits

USG Systems Status Page

http://status.usg.edu