Embed Microsoft Forms in a WordPress Site


  1. Create or edit a page or post in which you wish to embed the form.

    Microsoft form example

  2. Get the embed code from Microsoft form:
    1. Click the Send menu in the top right.

    2. Select the Embed option under Send and collect responses.

      Embed link option icon

    3. Click Copy.

      Copy this code field

    4. Under Send and collect responses, you can select an option so that anyone who reaches the page you are setting up can respond. Otherwise, it will only be available to others on UTmail+.

      Anyone can respond option

  3. If you are using the Classic Editor, switch from the Visual tab to Text (HTML) and paste the embed code in the content at the location you want the form to display.

    Edit page

  4. If you are using the Gutenberg Editor, use a Custom HTML Block and paste the embed code. Select the new block icon, and search for HTML, if that block is not visible, then select the Custom HTML.

    Gutenberg page editor

  5. Change max-width:100vh to max-width:100% and max-height:100vh to max-height:100% in the style section of the embed code. Without this change, the scroll bar will always display even when the height value is changed to a number that can show the whole form.
  6. Adjust the height and width pixel (px) values. This will take some trial and error as it depends on how long the form is as well as the available page width. You can preview your page or post to test the height and width of the form before publishing.

    Edit page with iframe added