Creating a Typeform-Style Survey with Notion and Replit Agent

Learn how to create a custom Typeform-style survey with Replit Agent, an advanced AI-coding agent, and Notion, a popular productivity note-taking application. This step-by-step guide teaches you how to go from an initial idea to an animated, conversational survey form in minutes, regardless of skill level.

Gathering user feedback is critical to the success of any product. In today's competitive SaaS market, understanding user pain points drives future product decisions and identifies causes of customer churn. Often, teams find themselves entangled in complex survey tools like SurveyMonkey or Google Forms, both of which produce boring, static, unengaging survey forms with, often times, low completion rates. When users are less likely to respond to your survey with their feedback, your team loses out on valuable insights that could steer your product in the right direction, leaving you guessing why subscription renewals have dropped or why your NPS score (

core, a metric used to measure customer loyalty and satisfaction) is declining. This is why many product teams have turned to Typeform, a platform known for its conversational, engaging, smooth survey experiences that significantly boost completion rates.

This comprehensive guide will demonstrate how you can create a Typeform-Style survey with Notion and Replit Agent. Specifically, you will be building a survey that gathers feedback from users about a real-time solar energy management system named "Solaire." Every survey response will be stored as a record in a Notion database.

How do you prompt Replit Agent to create a Typeform-style survey?

I. Give a concise, one-sentence description of the Typeform-style survey.

In the prompt that’s provided to Replit Agent, the first sentence should explicitly state that you want to create a Typeform-style survey. Additionally, it should describe the survey’s purpose and core functionality.

For example, for a survey that collects data from users on overall product satisfaction:

**Create a beautiful Typeform-style survey that gathers feedback from users about a real-time solar energy management system named "Solaire." The results of the survey should be sent to a Notion database.**


If you have trouble coming up with a concise, one-sentence description, then you can prompt Claude AI or ChatGPT with the following:

Give a concise description for the following task:

"<DESCRIPTION>"

 with the task you want to describe concisely, and copy and paste the description into Replit Agent’s chat interface.

II. Provide a list of features the Typeform-style survey should support.

After adding a one-sentence description of the Typeform-style survey to the prompt, add a detailed list of any features that the survey should support. The more items that describe how the survey should behave, the more likely that Replit Agent will generate exactly what you’re looking for. Being specific about functionality, user interactions, and expected behaviors helps Replit Agent understand your vision and translate it into functional code.

Create a beautiful Typeform-style survey that gathers feedback from users about a real-time solar energy management system named "Solaire." The results of the survey should be sent to a Notion database.

**The survey should support the following functionality:

1. The survey presents one question at a time, with smooth, polished, fade-in/fade-out animations between questions.

2. The survey supports a variety of question formats: multiple choice questions, rating scales, checkboxes for selecting multiple options, text input for open-ended feedback, and optional e-mail address collection for follow-ups. Form validation ensures that users provide a response for every questions that's marked required, and every collected response is formatted correctly prior to being sent to a Notion database. Each response is structured according to Notion's API requirements, with multiple choice answers stored as select options, ratings as number fields, checkbox responses as multi-select properties, text inputs as rich text content blocks, and e-mail addresses as e-mail property fields.

3. A progress bar at the top shows users their overall progress towards survey completion.

4. When users submit their feedback, the responses are automatically sent to a Notion database, with each row in the Notion database represents a single user's responses.**

III. Specify technologies (e.g., languages, libraries, frameworks, tools, and APIs) to use and design principles to follow.

After adding a detailed list of features that the Typeform-style survey should support to the prompt, enrich the prompt by mentioning any specific technologies that should be used and the design principles to follow. This ensures that Replit Agent understands not just what to build, but how to build it according to your technical and design preferences. 

For example, for a survey that collects data from users on overall product satisfaction: 

Create a beautiful Typeform-style survey that gathers feedback from users about a real-time solar energy management system named "Solaire." The results of the survey should be sent to a Notion database.

The survey should support the following functionality:

1. The survey presents one question at a time, with smooth, polished, fade-in/fade-out animations between questions. **Implement animations with the Framer Motion library.**

2. The survey supports a variety of question formats: multiple choice questions, rating scales, checkboxes for selecting multiple options, text input for open-ended feedback, and optional e-mail address collection for follow-ups. Form validation ensures that users provide a response for every questions that's marked required, and every collected response is formatted correctly prior to being sent to a Notion database. Each response is structured according to Notion's API requirements, with multiple choice answers stored as select options, ratings as number fields, checkbox responses as multi-select properties, text inputs as rich text content blocks, and e-mail addresses as e-mail property fields. **Connect the survey to the Notion API by integrating the Notion SDK for JavaScript (@notionhq/client).**

3. A progress bar at the top shows users their overall progress towards survey completion.

4. When users submit their feedback, the responses are automatically sent to a Notion database, with each row in the Notion database represents a single user's responses.

**5. Ensure the survey is fully accessible by implementing the following features:
   
   * Use semantic HTML with proper form elements (<form>, <fieldset>, <legend>, <label>).
   * Add `aria-current="step"` to the progress bar to indicate the active question.
   * Add `aria-required="true"` for mandatory form fields.
   * Add `aria-invalid` to form fields to indicate an entered value is invalid. 
   * Add `aria-describedby` to form fields to link them to corresponding error messages.
   * Form controls like radio buttons, checkboxes, selection controls, and input fields are navigable via arrow keys.
   * "Next" and "Back" buttons are keyboard focusable and can be activated via the "Enter" key.**  

**Implement the Typeform-style survey with React and TypeScript. Style the survey with Tailwind CSS.**

IV. Enter the final prompt into Replit Agent and build the initial prototype of the Typeform-style survey.

Once the prompt has been finalized, enter the prompt into Replit Agent. It will analyze your prompt and propose additional features that you might want to add to the Typeform-style survey. If you think any these features should be supported by the survey, then feel free to check the relevant features. Once the requirements have been clarified, click the “Approve plan & start” button, and Replit Agent will start building the initial prototype of the survey.

What files and directories does Replit Agent generate for a web application?

When you prompt Replit Agent to generate a web application, Replit Agent often defaults to Vite and React for the client-side, and Express.js, Drizzle ORM, and Zod for the server-side, with both written in TypeScript. At the root of the project directory, you will encounter, at a minimum, the following files and directories:

How do you prompt Replit Agent to add a Notion integration secret and database ID as environment variables?

Upon building the initial prototype of the Typeform-style survey, Replit Agent asks you to verify that the survey behaves properly. Does the survey prevent users from proceeding to the next question if the currently required question hasn’t yet been answered? Does the survey smoothly animate from the current question to the next question? In the “Preview” pane, feel free to interact with the survey. Right now, do not worry if the survey submission is sent to Notion, just focus on the survey’s user experience.

Once you have verified that the survey behaves properly, tell Replit Agent that everything works as expected.

The user experience is excellent. The animations are smooth. The survey is easy to navigate. Form validation works properly.

Replit Agent will then inform you that the backend encountered an error when sending the survey response to Notion: “Error sending to Notion: Error: Notion API key or database ID not configured.” This means the backend is already set up to send survey responses to Notion, but Replit Agent simply needs you to supply the proper Notion API credentials to send survey responses to a Notion database in your Notion workspace. Tell Replit Agent to set up the Notion integration properly so that survey responses are saved to a Notion database in your Notion workspace.

1. Set up the Notion integration properly so responses are saved to my Notion workspace.

For the backend to send survey responses to a Notion database in your Notion workspace, you must first create a custom Notion integration. A 

 connects Notion workspace data to a third-party application. In this case, the third-party application is the backend of the survey. For the Notion integration to access a Notion database, the Notion integration must explicitly be installed in the Notion workspace via the Notion web/desktop app by an owner of the Notion workspace.

When you create a custom Notion integration, you will be able to obtain an integration secret, which is a private API key that gives an application permission to access a Notion workspace. This integration secret will be the value of the Replit secret 

. Let’s first create a Notion integration and acquire its secret, and then create a Notion database and acquire its ID for the Replit secret 

To create a Notion integration, log in to your Notion account. Then, visit the Notion integrations dashboard: 

On the “New Integration” page, fill out the following pieces of information:

Click into the borderless input field with the placeholder text “Add integration name.” For the integration’s name, type in the name “Solaire Survey Integration.”

From the “Associated workspace” dropdown, select the Notion workspace you want to install the integration in. The chosen Notion workspace is where you will create the notion database that will collect the survey responses.

From the “Type” dropdown, keep the default chosen type “Internal.”

Feel free to upload a logo for the integration. It’s not required, so if you choose to not upload a logo, then the default logo for the integration will be an icon with the first letter of the integration’s name. So in this case, the default logo will be an icon with the letter “S.”

Once you have filled out the required information, click the “Save” button at the bottom of the form.

Upon successfully creating the integration, clicking the “Configure integration settings” button redirects you to the integration’s settings page.

How do I obtain a Notion integration secret (API key)?

On the integration’s settings page, you will find the internal integration secret masked by default. To reveal the integration secret, click the “Show” button in the internal integration secret field (on the right-side).

: Feel free to limit or expand the integration’s capabilities based on any additional behavior you wish to have the survey support. Since the survey’s backend is only going to add survey responses to the connected Notion database, the only capability the integration needs is “Insert content.”  

: In case your integration secret ever gets compromised, be sure to “refresh” the integration secret by clicking on the “Refresh” button. Replace all instances of the old integration secret with the new refreshed integration secret.  

Once revealed, the integration secret, prefixed with “ntn_,” can be copied to your clipboard by clicking the “Copy” button in the internal integration secret field (also on the right-side - it replaced the “Show” button).

With the integration secret copied, navigate back to Replit and paste the integration secret as the value of the Replit secret 

To create a Notion database, first create a new Notion page. At the bottom of the Notion page, under “Get started with,” click the “Database” button.

In the template selection modal, select “Empty database” to create an empty database in the Notion page.

How do you connect a Notion integration to a Notion database?

To connect a Notion integration to a Notion database, click on the ellipsis button in the top-right corner of the Notion database’s page. In the opened menu, hover over the “Connections” option and search for the “Solaire Survey Integration” integration. Once found, click on the “Solaire Survey Integration” integration.

Upon clicking the integration, a modal will appear, warning the Notion workspace owner that the integration will have access to not only the page that contains the Notion database, but also all of its child pages. Click the “Confirm” button. 

Now the integration is connected to the Notion database. In the page’s settings menu, you can verify this by checking the page’s connections and seeing “None” replaced with “1.” 

How do you obtain a Notion database’s ID?

To obtain a Notion database’s ID, click on the “Share” button in the top-right corner of the Notion database’s page. In the share menu, click on the “Copy link” button. This copies the Notion page’s link to your clipboard. The link follows the structure: 

https://www.notion.so/<workspace>/<database-id>

With the database ID copied, navigate back to Replit and paste the integration secret as the value of the Replit secret 

To obtain a Notion database’s ID, extract it from the address bar. The link follows the structure: 

How do you add a new record to a Notion database via Notion SDK for JavaScript?

To add a new record to a Notion database via Notion SDK for JavaScript:

 file, then you will see the implementation of a 

 function that takes a survey response and calls the 

 method to send its values to the Notion database.

import { Client } from "@notionhq/client";
import type { InsertSurveyResponse } from "@shared/schema";

// Initialize Notion client
const notionClient = new Client({
  auth: process.env.NOTION_API_KEY,
});

// Default to empty string if not provided
const NOTION_DATABASE_ID = process.env.NOTION_DATABASE_ID || "";

// Function to send survey response to Notion database
export async function sendToNotion(surveyResponse: InsertSurveyResponse) {
  if (!process.env.NOTION_API_KEY || !NOTION_DATABASE_ID) {
    throw new Error("Notion API key or database ID not configured");
  }

  try {
    // Create a page in the Notion database
    const response = await notionClient.pages.create({
      parent: {
        database_id: NOTION_DATABASE_ID,
      },
      properties: {
        // Format each field according to Notion's API requirements
        "Overall Experience": surveyResponse.overallExperience 
          ? { number: surveyResponse.overallExperience } 
          : undefined,
          
        "Most Used Feature": surveyResponse.mostUsedFeature 
          ? { 
              select: { 
                name: getMostUsedFeatureName(surveyResponse.mostUsedFeature) 
              } 
            } 
          : undefined,
          
        "Desired Improvements": surveyResponse.desiredImprovements 
          ? { 
              multi_select: surveyResponse.desiredImprovements.map(improvement => ({
                name: getImprovementName(improvement)
              }))
            } 
          : undefined,
          
        "Energy Saving Feedback": surveyResponse.energySavingFeedback 
          ? { 
              rich_text: [
                {
                  text: {
                    content: surveyResponse.energySavingFeedback
                  }
                }
              ]
            } 
          : undefined,
          
        "Email": surveyResponse.email 
          ? { 
              email: surveyResponse.email 
            } 
          : undefined,
          
        "Submission Date": { 
          date: { 
            start: new Date().toISOString() 
          } 
        }
      }
    });

    return response;
  } catch (error) {
    console.error("Error sending data to Notion:", error);
    throw error;
  }
}

// Helper functions to map values to human-readable names
function getMostUsedFeatureName(value: string): string {
  const featureMap: Record<string, string> = {
    "real_time_monitoring": "Real-time energy monitoring dashboard",
    "consumption_analytics": "Energy consumption analytics",
    "cost_savings": "Cost savings calculator",
    "panel_performance": "Panel performance optimization"
  };
  
  return featureMap[value] || value;
}

function getImprovementName(value: string): string {
  const improvementMap: Record<string, string> = {
    "mobile_app": "Better mobile app experience",
    "notifications": "More customizable notifications",
    "weather_integration": "Weather forecasting integration",
    "smart_home": "Smart home device integration",
    "reporting": "More detailed reporting capabilities"
  };
  
  return improvementMap[value] || value;
}

For the survey responses to be sent to and stored successfully in the Notion database, you will need to update the Notion database with the properties mentioned in 

For the property “Most Used Feature,” you can find the options listed as values in 

For the property “Desired Improvements,” you can find the options listed as values in 

Once you have updated the Notion database with these properties, go back to Replit and submit a new survey response. Upon submitting a new survey response, you will find it added as a new record in the Notion database. 

Try creating your own Typeform-style survey with Replit Agent and Notion. Feel free to share it in the comments section of this post!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Creating a Typeform-Style Survey with Notion and Replit Agent

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript