Formbricks Open source Forms & Surveys Logo


Modal Surveys

A modal is a window popping up in the middle of the screen (pop-up). The rest of the user interface is usually greyed out.

No UI provided

As of now, we do not provide modal UI. We explain how you can fill a modal of your frontend framework with the Best Practice content.



The Best Practices come with a default pop-over in the script. We assume that you have already installed one of the Best Practices and configured it. If not, please proceed here:


  1. To inject the Best Practice in your Modal window, you have to make sure to have set the containerID in the config object:
config: {
  hqUrl: "",
  formId: "cldipcgat0000mn0g31a8pdse",
  containerId: "formbricks-survey", // needs to be set
  1. All you have to do then is to set the id of the inner div of your Modal accordingly:
<div id="formbricks-survey"></div>
  1. If you have several Best Practices embedded, you have to make sure to use unique id's.

Full Example

Here is a full example file for React.js, TailwindCSS and HeadlessUI:

import { Dialog, Transition } from "@headlessui/react";
import { Fragment, useEffect, useState } from "react";

export default function Demo() {
  const [initialized, setInitialized] = useState(false);
  useEffect(() => {
    window.formbricks = {
      config: {
        hqUrl: process.env.NEXT_PUBLIC_FORMBRICKS_URL,
        formId: process.env.NEXT_PUBLIC_FORMBRICKS_FORM_ID,
        divId: "formbricks-container",
        contact: {
          name: "Matti",
          position: "Co-Founder",
          imgUrl: "",
    // @ts-ignore
    import("@formbricks/feedback").then(() => setInitialized(true));
  }, []);

  useEffect(() => {
    if (initialized) {
  }, [initialized]);

  return (
    <Transition.Root show={true} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={() => {}}>
          enter="ease-out duration-300"
          leave="ease-in duration-200"
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />

        <div className="fixed inset-0 z-10 overflow-y-auto">
          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
              enter="ease-out duration-300"
              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enterTo="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm">
                <div id="formbricks-container" />

That's it ๐ŸŽ‰

Youโ€™re Best Practice loads whenever the modal is opened. When the content of the Best Practice did not load correctly, the Modal will not open.

Need help?

Join our Discord and ask away. We're happy to help where we can!

Join Discord
In-app Slide-out