How to embed Qualtrics forms on your website
With University IT's willingness to archive AFS at an all time high, tools that rely on AFS may be services to avoid.
Stanford Form Builder is one such service. Because of it's reliance on AFS to host the webform, an archived AFS space will lead to a broken form. Until the university decides what to do about Form Builder's dependence on AFS, H&S IT doens't recommend Form Builder if you need a tool with longevity.
The university also provides two Form Builder alternatives at no cost: Google Forms and Qualtrics. Google forms can be created from your Stanford Google Drive account (click the + New button in the upper left and navigate to Google Form). Google forms are simple to use and embed easily on your website.
Qualtrics is much a much more robust product that can build everything from a simple form to a complex survey with branching question paths. The university's Qualtrics license, doens't have native embeding, but if you can add HTML to your website, you can embed the form with a few tricks.
Embeding a Qualtrics Form
Once you've built your Qualtrics form you need to get the anonymous link associated with the survey. At the time of writing, it's under the Distributions tab.
On your website add this iframe html:
<iframe width='100%' height='500px' src='https://your-anonymous-survey-link-here' style='border:0'></iframe>
Depending on the website platform you're using you may need to switch to HTML or Full-HTML mode.
Once you save the page, you may notice the height of the survey is taller than the space alloted. You can adjust the height to something greater than 500 pixels.
Extra Credit
You may notice that your form's background is a different color than your site. You can specify the background color in Qualtrics to match your site.
When editing your survey, click look and feel, and then background. Here you can match your site's background color with the color of your survey.
If you plan to embed your Qualtrics form on multiple sites, you can make the background transparent with some CSS.
Under look and feel, and then style, you can add the below code to the Custom CSS field:
#SurveyEngineBody {
background: transparent !important;
}
.Skin #SkinContent {
background: transparent !important;
}
.Skin .SkinInner {
background: transparent !important;
}
See University IT's page about Qualtrics to learn more about the tool