{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-embeds/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Pop-up","description":"Build integrations, automate workflows, and manage forms and responses programmatically with the forms.app API.","siteUrl":"https://developers.forms.app","image":"/assets/formsapp-developer-docs.6ffba4f5ff7d394698661bcdb0ed2a8452f27acaf4e82754e5d0f4109563471c.9c1bb791.png","lang":"en-US","projectTitle":"forms.app Developer Docs","llmstxt":{"sections":[{"title":"llmtxt for forms app documents","includeFiles":["**/*"],"excludeFiles":[]}]},"jsonLd":{"@context":"https://schema.org","@type":"Organization","additionalType":"https://en.wikipedia.org/wiki/Software_as_a_service","url":"https://forms.app","name":"forms.app","logo":"https://cdn.forms.app/icons/all/brands/formsapp-logo-dark.svg","description":"forms.app is a free online form builder designed for teams. forms.app offers a modern, easy-to-use form builder and allows unlimited responses and team members.","foundingDate":"2018","sameAs":"https://linkedin.com/company/formsapp","contactPoint":{"@type":"ContactPoint","contactType":"Customer service","email":"support@forms.app","url":"https://forms.app/en/contact-us"}}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"pop-up","__idx":0},"children":["Pop-up"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A modal dialog with a dimmed overlay. Open it from a click on a trigger button, automatically on page load, after a delay, or any combination of the above."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-pop-up-button-triggered","__idx":1},"children":["Basic pop-up (button-triggered)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<button formsappId=\"69d4bd130b443bda40c8f65a\"></button>\n<script src=\"https://cdn.formsapp.io/embed.js\" type=\"text/javascript\" async defer onload=\"new formsapp('69d4bd130b443bda40c8f65a', 'popup', {'overlay':'rgba(45,45,45,0.5)','button':{'color':'#ff9e24','text':'Click here!'},'width':'800px','height':'600px','openingAnimation':{'entrance':'animate__fadeIn','exit':'animate__fadeOut'}}, 'https://eu.forms.app');\"></script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button formsappId=\"...\">"]}," element is the visible trigger; the script styles it using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["button"]}," option and opens the pop-up when it's clicked."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"auto-open-on-page-load","__idx":2},"children":["Auto-open on page load"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoOpen"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'action':'onpageload'"]}," to open the pop-up as soon as the page loads, alongside the button trigger:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<button formsappId=\"69d4bd130b443bda40c8f65a\"></button>\n<script src=\"https://cdn.formsapp.io/embed.js\" type=\"text/javascript\" async defer onload=\"new formsapp('69d4bd130b443bda40c8f65a', 'popup', {'overlay':'rgba(45,45,45,0.5)','button':{'color':'#ff9e24','text':'Click here!'},'width':'800px','height':'600px','autoOpen':{'action':'onpageload'},'openingAnimation':{'entrance':'animate__bounceIn','exit':'animate__bounceOut'}}, 'https://eu.forms.app');\"></script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"auto-open-after-a-delay","__idx":3},"children":["Auto-open after a delay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'action':'aftersettime'"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setTimeSeconds"]}," to open the pop-up automatically after visitors have spent a few seconds on the page:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<button formsappId=\"69d4bd130b443bda40c8f65a\"></button>\n<script src=\"https://cdn.formsapp.io/embed.js\" type=\"text/javascript\" async defer onload=\"new formsapp('69d4bd130b443bda40c8f65a', 'popup', {'overlay':'rgba(45,45,45,0.5)','button':{'color':'#ff9e24','text':'Click here!'},'width':'800px','height':'600px','autoOpen':{'action':'aftersettime','setTimeSeconds':0},'openingAnimation':{'entrance':'animate__zoomIn','exit':'animate__zoomOut'}}, 'https://eu.forms.app');\"></script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"without-a-trigger-button","__idx":4},"children":["Without a trigger button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Omit both the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button>"]}," element and the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["button"]}," option to show only the automatically-opened pop-up, with no manual trigger on the page:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<script src=\"https://cdn.formsapp.io/embed.js\" type=\"text/javascript\" async defer onload=\"new formsapp('69d4bd130b443bda40c8f65a', 'popup', {'overlay':'rgba(45,45,45,0.5)','width':'800px','height':'600px','autoOpen':{'action':'aftersettime','setTimeSeconds':'4'},'openingAnimation':{'entrance':'animate__fadeIn','exit':'animate__fadeOut'}}, 'https://eu.forms.app');\"></script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"options","__idx":5},"children":["Options"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["overlay"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background dim color behind the modal, as an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rgba()"]}," value."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["button.color"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["button.text"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Styling for the trigger button. Omit entirely for an auto-open-only pop-up."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Size of the modal."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoOpen.action"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'onpageload'"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'aftersettime'"]},". Omit to require a click on the trigger button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoOpen.setTimeSeconds"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Delay in seconds before opening, used with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'aftersettime'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["openingAnimation.entrance"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["openingAnimation.exit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["An ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://animate.style/"},"children":["animate.css"]}," entrance/exit pair, for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'animate__fadeIn'"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'animate__fadeOut'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'animate__bounceIn'"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'animate__bounceOut'"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'animate__zoomIn'"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'animate__zoomOut'"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"whats-next","__idx":6},"children":["What's next"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/embed-options"},"children":["Embed options"]}," for the other layouts."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/examples"},"children":["Examples"]}," for React, Next.js, Vue, and Kotlin."]}]}]},"headings":[{"value":"Pop-up","id":"pop-up","depth":1},{"value":"Basic pop-up (button-triggered)","id":"basic-pop-up-button-triggered","depth":2},{"value":"Auto-open on page load","id":"auto-open-on-page-load","depth":2},{"value":"Auto-open after a delay","id":"auto-open-after-a-delay","depth":2},{"value":"Without a trigger button","id":"without-a-trigger-button","depth":2},{"value":"Options","id":"options","depth":2},{"value":"What's next","id":"whats-next","depth":2}],"frontmatter":{"seo":{"title":"Pop-up"}},"lastModified":"2026-08-18T10:09:54.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/embeds/embed-options/popup","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}