Embed forms anywhere
Add a formssh form to your website with one line of code. Choose if the form sits inside the page, opens in a popup or slides in from the side.
Three ways to show a form
In the page
The form sits inside your page and grows with its content, so nothing is cut off.
Popup
A button on your page opens the form on top of it, which works well for contact and waitlist forms.
Slide-in
A button stays in the corner of the screen and slides the form in from the side.
Copy the code
Replace your-form with the link name from your form's Share tab. Paste the code where the form or button should appear.
Options
- data-form
- The link name of your form from the Share tab, which is required.
- data-mode
- Set this to inline, popup or slider. Inline is the default.
- data-text
- These are the words on the button for the popup and slider modes.
- data-color
- Set the button colour, for example #0e1015.
- data-floating
- Set this to true to place the popup button in the corner of the screen.
- data-position
- Choose right or left for the corner button and the slide-in panel.
In the page
<script src="https://formssh.com/embed.js" data-form="your-form" async></script>
Popup
<script src="https://formssh.com/embed.js" data-form="your-form" data-mode="popup" data-text="Contact us" async></script>
Slide-in
<script src="https://formssh.com/embed.js" data-form="your-form" data-mode="slider" data-text="Get a quote" async></script>
WordPress plugin
Install the formssh plugin to add forms without touching code. It adds a formssh block, a shortcode and a setting for a site-wide popup or slide-in button.
Download the WordPress pluginVersion 2.0.0 · WordPress 5.8 or newer
- 1Download the plugin ZIP below.
- 2In WordPress, go to Plugins, then Add New, then Upload Plugin, and choose the ZIP.
- 3Activate the plugin.
- 4In the editor, add the formssh form block and paste your form link. You can also open Settings, then formssh, to show a button on every page.
Shortcode
[formssh form="your-form"]
Shortcode with a popup button
[formssh form="your-form" mode="popup" text="Contact us"]
Guides for your website builder
Webflow
- 1Copy the embed code below.
- 2Add an Embed element where the form should go.
- 3Paste the code and save.
- 4Publish the site to see the form.
Wix
- 1Copy the embed code below.
- 2Add an Embed HTML element (Embed a Widget).
- 3Paste the code into the code field.
- 4Resize the element to fit your layout.
Squarespace
- 1Copy the embed code below.
- 2Add a Code Block where the form should sit.
- 3Paste the code and apply.
- 4Use a section with side padding for a clean edge.
Shopify
- 1Copy the embed code below.
- 2Open the page or product template in the theme editor.
- 3Add a Custom Liquid section and paste the code.
- 4The form fills the section width.
If your site builder blocks scripts
Some builders only accept an iframe. This code shows the form in the page. It keeps its height in step with the form where the builder allows a script, and stays at a fixed height where it does not.
iframe
<iframe id="formssh-embed" src="https://formssh.com/your-form?embed=1" width="100%" height="640" style="border:0;background:transparent" allowtransparency="true" title="formssh form"></iframe>
<script>window.addEventListener("message",function(e){try{var d=JSON.parse(e.data);if(d.type==="formssh:embed"){var f=document.getElementById("formssh-embed");if(f)f.style.height=d.height+"px"}}catch(x){}});</script>Email apps remove embedded forms, so newsletters should link to your form.