Home ▻ T4 Training▻Training▻Training Examples▻Embedded MS Form

Embedded MS Form

Online Forms

T4 is not good at creating online forms.
So it's recommended to us MS Forms to create a form and link to it, or embed it in your page.

Below is an example feedback form:

How do I Embed an MS Form into my webpage?

Create your Form using MS Forms first. Once your form is ready, click on Collect Responses.

Link to my form

Click on the Copy link in the top right of the pop up box that appears and use the Link options in the WYSIWYG editor ribbon. This is a link to the same form outlined below. CMS Online Training Feedback Survey

Embed my form

Click on the Embed icon </> to get your Embed code, it will look something like this:

<iframe width="640px" height="480px" src="https://forms.cloud.microsoft/Pages/ResponsePage.aspx?id=hrHjE0bEq0qcbZq5u3aBbL1RWSKscmtPpI-KTKRGVUZUOFdaVFBRTVpRTjRYOEZNSVQ1SU9YSjNIMC4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>

Change the width to "100%", change the height to "auto". By default there is no title in the embed code above, you will need to add a title to your embed code to aid in accessibility of your page, we have added this information - title="CMS Online Training Feedback Survey". Adding these amendments to the embed code above will look like this (changes have been bolded):

<iframe width="100%" height="auto" title="CMS Online Training Feedback Survey"  src="https://forms.cloud.microsoft/Pages/ResponsePage.aspx?id=hrHjE0bEq0qcbZq5u3aBbL1RWSKscmtPpI-KTKRGVUZUOFdaVFBRTVpRTjRYOEZNSVQ1SU9YSjNIMC4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>

  1. Go to the section you want to embed your from into
  2. Click on the +Add content button
    Add Content button to add content to section h27
  3. Choose 'Embedded video' content type
  4. Give the content a Name
  5. In the Embed Code field, paste in your edited Embed code
  6. You can leave the Aspect Ratio at the default option.
  7. Click Save changes to put your content on pending
    Save changes button. No option to save and approve or save as draft..
    Or else,
    Click on the small arrow beside Save changes and choose Save and approve
    T4's Save and approve option, selected

 

See how this content type looks in different page types:
With Rightbar, Without Rightbar, Widescreen, and Ultra-Wide (sub-site) / Ultra-Wide (top-level) pages
or else
Normal, Widescreen, and Ultra-Wide (Sub-Site) / Ultra-Wide (Top-Level) Landing pages

Note: You change a page's width (and other options) using its section's 'Page Customisation Keywords' field - see my interactive demonstration for full information.