Embedding Forms

Embed your TinyForms on any website using a simple code snippet. Choose from 5 display modes depending on how you want the form to appear to visitors.

Embed modes

Mode	Description	Best for
Standard	Inline embed: form appears directly in the page	Contact forms, feedback, surveys placed within page content
Popup	Centered overlay with a backdrop	Lead capture, exit intent, promotional offers
Slider	Slides in from the bottom or side	Feedback widgets, support requests
Side Tab	Persistent tab on the edge of the screen	Always-available feedback, help requests
Full Page	Takes over the entire browser window	Dedicated survey pages, application forms

How embedding works

Go to your form → Share tab
Click Embed
Select your display mode
Configure options (trigger, size, colors)
Copy the generated code snippet
Paste it into your website's HTML

Code snippet

Every embed mode generates a two-part snippet:

<!-- 1. Include the TinyForms script (once per page) -->
<script src="https://embed.tinycommand.com/forms.js"></script>

<!-- 2. Initialize the form -->
<script>
  TinyForms.init({
    formId: 'frm_abc123',
    mode: 'standard',    // standard | popup | slider | side-tab | full-page
    container: '#my-form' // CSS selector (standard mode only)
  });
</script>

Common configuration options

These options are available across all embed modes:

Option	Type	Description
formId	String	Your form's unique ID
mode	String	Display mode
theme	String	`light` or `dark`
hideHeader	Boolean	Hide the form title and description
hideFooter	Boolean	Hide the "Powered by TinyCommand" footer
prefill	Object	Pre-fill field values (see Prefill)
onSubmit	Function	Callback when the form is submitted
onClose	Function	Callback when the form is closed (popup/slider/side-tab)

Event callbacks

TinyForms.init({
  formId: 'frm_abc123',
  mode: 'popup',
  onSubmit: function(data) {
    console.log('Form submitted:', data);
    // Track conversion, show thank you, etc.
  },
  onClose: function() {
    console.log('Form closed');
  }
});

WordPress, Webflow, and other platforms

WordPress

Use the TinyForms WordPress plugin or paste the embed code into a Custom HTML block.

Webflow

Add an Embed element and paste the code snippet into it.

Squarespace

Add a Code Block and paste the snippet.

React / Next.js

Use the embed script in a useEffect hook:

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://embed.tinycommand.com/forms.js';
  script.onload = () => {
    window.TinyForms.init({
      formId: 'frm_abc123',
      mode: 'standard',
      container: '#form-container'
    });
  };
  document.body.appendChild(script);
}, []);

Troubleshooting

Issue	Cause	Fix
Form not loading	Script blocked by CSP	Add `embed.tinycommand.com` to your Content-Security-Policy
Form too small	Container has no height	Set a minimum height on the container element
Popup not opening	Script loaded twice	Include the script only once per page
Styling conflicts	Your site's CSS affects the form	The form renders in an iframe; conflicts are rare but check z-index

Tip

For the best user experience, use Standard embed for forms that are part of the page content (contact forms, application forms) and Popup for forms that interrupt the user flow (newsletter signups, exit intent offers).