Simple Input Form in the Microsoft Teams Bot

This article demonstrates how to build a simple input form in Microsoft Teams using an Adaptive Card and the Bot Framework.
The form allows users to submit data directly within Teams, making it ideal for small data-entry or feedback scenarios.

🧱 Prerequisites

Make sure you have the following installed:

• Node.js (v10 or later)
• Microsoft Bot Framework CLI
• Visual Studio Code
• Azure account (for deployment)

Install the Bot Framework CLI using:

npm install -g botbuilder-cli

⚙️ Create a New Bot Project

Run the following command to create a new bot project:

yo botbuilder

When prompted:

• Enter the bot name
• Choose JavaScript as the language
• Choose Microsoft Teams as the channel

Once created, open the project in Visual Studio Code.

🧩 Run Locally

Run the bot locally using:

npm start

To test it in Teams, you need to expose your local bot using ngrok:

ngrok http 3978

Copy the generated HTTPS URL (e.g., https://xxxx.ngrok.io) and update your bot’s messaging endpoint in the Bot Framework Portal.

💬 Creating an Adaptive Card Input Form

Inside your project, create a new folder named adaptivecards and add a file called inputform.json:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "TextBlock",
      "size": "Large",
      "weight": "Bolder",
      "text": "User Details Form"
    },
    {
      "type": "Input.Text",
      "id": "firstName",
      "placeholder": "Enter your first name",
      "label": "First Name"
    },
    {
      "type": "Input.Text",
      "id": "lastName",
      "placeholder": "Enter your last name",
      "label": "Last Name"
    },
    {
      "type": "Input.Text",
      "id": "email",
      "placeholder": "Enter your email address",
      "label": "Email"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "action": "submitForm"
      }
    }
  ]
}

💻 Handle Form Submission in the Bot

In your main bot file (e.g., bot.js), import the Adaptive Card and handle submissions:

const { TeamsActivityHandler, CardFactory } = require("botbuilder");
const formCard = require("./adaptivecards/inputform.json");

class TeamsInputFormBot extends TeamsActivityHandler {
  constructor() {
    super();

    this.onMessage(async (context, next) => {
      await context.sendActivity({
        attachments: [CardFactory.adaptiveCard(formCard)],
      });
      await next();
    });

    this.onTeamsMessagingExtensionSubmitAction(async (context, action) => {
      const data = action.data;
      const response = `Thanks, ${data.firstName} ${data.lastName}! Your email is ${data.email}.`;
      await context.sendActivity(response);
    });
  }
}

module.exports.TeamsInputFormBot = TeamsInputFormBot;

🧠 Testing in Teams

1. Deploy your bot to Azure using the command:

az webapp up --sku F1 --name your-bot-name --resource-group your-group

2. Register the bot in the Bot Framework Portal.
3. Add the bot to your Microsoft Teams channel.
4. Start a chat with the bot — it should send you the adaptive card input form.
5. Fill out the form and submit — your bot will respond instantly with your submitted details.

📂 GitHub Sample Project

✅ Summary

By combining Adaptive Cards with the Microsoft Bot Framework, you can collect structured data directly within Teams chats.
This approach is perfect for internal tools, feedback forms, or lightweight automation workflows.