- Code: Copy and paste the embed code you get from a system, or place the code you need to use to manipulate your content
Embed a Form
Depending on the system that you use to create your form, you may need to embed your form using an Iframe Component or a Code Fragment.
Find below:
- Google Form – Code Fragment component
- Qualtrics Form – Iframe Component
- Wufoo Form – Code Frament component
If you use a different form service, please contact cmshelp@ou.edu and we can assist you.
Where to Find It
You can find the Code Fragment component in your trusty side panel.
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_954121136/par/image.img.png/1565014596009.png)
What It Looks Like
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_954121136/par/textimage/image.img.png/1565015330332.png)
To Edit, Etc.
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_954121136/par/textimage_1962896228/image.img.png/1565015376436.png)
When you select the component, you can:
- Edit: Edit component
- Delete: Delete a component
- Group: To select multiple components at once (to move, cut, copy)
Where to Find Code for Google Form
![Google send form](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_954121136/par/textimage_752810007/image.img.png/1504636831428.png)
Hit 'SEND' button at top of Form
![Google embed form](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_954121136/par/textimage_1268351619/image.img.png/1506006569866.png)
Then click the 'Embed form' < > icon. Pick height and width, and copy HTML.
Place in Code Fragment
Code:
<iframe src="//docs.google.com/forms/d/e/1FAIpQLScx1rPjb8J34CKexu3Ry743rsQiJRZgsB-N5EMf12bA3FwdNg/viewform?embedded=true" width="100%" height="1500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
NOTE: CHANGE WIDTH TO 100% so it appears nicely in desktop AND mobile.
NOTE: https: has been removed from the code above. Starting the URL with // makes it a relative link (visible in both http and https environments).
http: shows up on the live site (will not be visible in author)
https: shows up in author (may not be visible on live site)
Where to Find It
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry/par/textimage/image.img.png/1565015453230.png)
You can find the Iframe Component in your trusty side panel.
What It Looks Like
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry/par/textimage_1492427240/image.img.png/1565015548495.png)
- IFrame URL: The URL of the page you want to embed onto your page
URL for example below: https://ousurvey.qualtrics.com/jfe/form/SV_5dq9JWt3xfg2pCd - Scrollbar Options: If you want to allow a scrollbar, you may do so here – options Yes, No, Auto (recommend auto)
- Height: Default is 300px, may need to adjust up or down
- NOTE: Width default is 100% – perfect scaling between devices
To Edit, Etc.
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry/par/textimage_606269152/image.img.png/1565015569331.png)
When you select the component, you can:
- Edit: Edit component
- Delete: Delete a component
- Group: To select multiple components at once (to move, cut, copy)
Where to Find URL for Qualtrics Form
![Qualtrics distributions](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry/par/textimage_1630416016/image.img.png/1504637083346.png)
Hit 'Distributions' button at top of Form
![Qualtrics Link](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry/par/textimage_840727403/image.img.png/1504637141659.png)
Then click the 'Anonymous Link' on the left. Copy the URL to paste into Iframe Component.
Iframe Size
- Height: Default is 300px, may need to adjust up or down (Iframe below set to 900px height)
- NOTE: Width default is 100% – perfect scaling between devices
Where to Find It
You can find the Code Fragment component in your trusty side panel.
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_1953299399/par/image_copy.img.png/1565014596009.png)
What It Looks Like
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_1953299399/par/textimage/image.img.png/1565015689675.png)
- Code: Copy and paste the embed code you get from a system, or place the code you need to use to manipulate your content
To Edit, Etc.
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_1953299399/par/textimage_1962896228/image.img.png/1565015376436.png)
When you select the component, you can:
- Edit: Edit component
- Delete: Delete a component
- Group: To select multiple components at once (to move, cut, copy)
Where to Find Code for Wufoo Form
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_1953299399/par/textimage_1356475424/image.img.png/1565015820308.png)
Hit 'Share Form' button and select 'Embed form' from the Form Manager page.
![](/content/marcomm/cms/editing/advanced/forms/_jcr_content/contentpar/accordion/par/accordionentry_1953299399/par/textimage_1078479325/image.img.png/1565015825818.png)
Then under the 'Embed a form on your website' section, click the 'iFrame' option (confusing, I know, but our Iframe Component is for a URL, this iFrame is a piece of code). Copy HTML.
Wufoo Form
Code:
<iframe height="1552" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="//uofoklahoma.wufoo.com/embed/r1kcsnsq096ewgf/"><a href="//uofoklahoma.wufoo.com/forms/r1kcsnsq096ewgf/">Fill out my Wufoo form!</a></iframe>
NOTE: https: has been removed from the code above. Starting the URL with // makes it a relative link (visible in both http and https environments).
http: shows up on the live site (will not be visible in author)
https: shows up in author (may not be visible on live site)