Embedding Qualtrics Forms/Surveys in Your Drupal Site
- Stephanie Lynn
- Laura P Rowan
This is an intermediate topic. You will need to possess some basic understanding and have some experience with Drupal content editing.
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:
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)
Optional - Step 5: Remove the Logo
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
Related articles
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
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.
Monday - Friday 8:00 a.m. - 5:00 p.m. Homepage & Directory Service Offerings Franklin OIT Status http://status.franklin.uga.edu/ Receive or Discontinue Status and Service Updates from Franklin OIT UGA/EITS Systems Status Pages https://www.facebook.com/uga.eits USG Systems Status PageContact the Franklin OIT Help Desk
Hours of Operation
Website Information
Systems Status Information