Microsoft Forms logo

Backstage Microsoft Forms Plugin

Created by ZcMander

Microsoft Forms is a simple app in Microsoft 365 that lets you create surveys, quizzes, and polls. People can respond from the web or a phone. Results update in real time, and you can export to Excel for deeper analysis. It is a fast way to collect structured input across an org.

The Microsoft Forms plugin brings those forms into Backstage. It renders a selected form inside an entity page so engineers can give input without leaving the portal. You can attach a form to a specific service or component and keep the workflow in one place. This keeps feedback close to the code and docs your team already uses in Backstage.

Common uses include service feedback, incident or postmortem input, feature requests, release or change approvals, and lightweight team surveys. Forms live in Microsoft 365, so responses follow your existing access and audit controls. The plugin is a small frontend component under the MIT license, which keeps adoption straightforward for most teams. If you want a quick way to hear from owners or consumers of a service, this helps you do it inside the catalog you already trust.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the frontend package

Copy
cd packages/app && yarn add @zcmander/backstage-plugin-msforms

Add a tab to the entity page

Open this file in your app packages/app/src/components/catalog/EntityPage.tsx

Add the imports

Copy
import { EntityLayout } from '@backstage/plugin-catalog';
import { MSFormContent, hasMSFormsAnnotation } from '@zcmander/backstage-plugin-msforms';

Add a new route inside your EntityLayout. Place it near your other tabs.

Copy
<EntityLayout.Route
  path="/feedback"
  title="Feedback"
  if={hasMSFormsAnnotation('feedback')}
>
  <MSFormContent name="feedback" />
</EntityLayout.Route>

The tab shows only for entities that have the right annotation.

Open your form in Microsoft Forms.
Choose Collect responses. Then copy the link.

Add the annotation to your entity

Add the link to your entity yaml. Use the same name that you passed to the component. In this example the name is feedback.

Copy
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: example-website
  annotations:
    forms.office.com/feedback: https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAANAARpHfVRUMlZLOU5YMlFVSE1TVU80N1hEUjQ0MFZOQS4u
spec:
  type: website
  lifecycle: experimental
  owner: guests
  system: examples

Add more forms if you need them

You can add more tabs by using another name. Add a route for each name. Then add a matching annotation.

Copy
<EntityLayout.Route
  path="/survey"
  title="Survey"
  if={hasMSFormsAnnotation('survey')}
>
  <MSFormContent name="survey" />
</EntityLayout.Route>
Copy
metadata:
  annotations:
    forms.office.com/feedback: https://forms.office.com/Pages/ResponsePage.aspx?...feedback-link...
    forms.office.com/survey: https://forms.office.com/Pages/ResponsePage.aspx?...survey-link...

Changelog

The Microsoft Forms plugin has not seen any significant changes since a year ago.

Set up Backstage in minutes with Roadie