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.
<button formsappId="69d4bd130b443bda40c8f65a"></button>
<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>The <button formsappId="..."> element is the visible trigger; the script styles it using the button option and opens the pop-up when it's clicked.
Add autoOpen with 'action':'onpageload' to open the pop-up as soon as the page loads, alongside the button trigger:
<button formsappId="69d4bd130b443bda40c8f65a"></button>
<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>Use 'action':'aftersettime' with setTimeSeconds to open the pop-up automatically after visitors have spent a few seconds on the page:
<button formsappId="69d4bd130b443bda40c8f65a"></button>
<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>Omit both the <button> element and the button option to show only the automatically-opened pop-up, with no manual trigger on the page:
<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>| Option | Description |
|---|---|
overlay | Background dim color behind the modal, as an rgba() value. |
button.color / button.text | Styling for the trigger button. Omit entirely for an auto-open-only pop-up. |
width / height | Size of the modal. |
autoOpen.action | 'onpageload' or 'aftersettime'. Omit to require a click on the trigger button. |
autoOpen.setTimeSeconds | Delay in seconds before opening, used with 'aftersettime'. |
openingAnimation.entrance / openingAnimation.exit | An animate.css entrance/exit pair, for example 'animate__fadeIn' / 'animate__fadeOut', 'animate__bounceIn' / 'animate__bounceOut', or 'animate__zoomIn' / 'animate__zoomOut'. |
- Embed options for the other layouts.
- Examples for React, Next.js, Vue, and Kotlin.