Embed your form

 
You can embed a Tally form on any webpage, and fully customize it to make it blend in seamlessly. There are 3 types of embeds available:
  • Standard: embed your form as part of your web page
  • Popup: embed your form as a popup on your web page
  • Full page: embed your form as a full-page
 

How it works

Go to the Share tab of your published form and choose your embed type.
 
notion image
 
A preview modal will open with embed options. Adjust the embed options of your choice.
notion image
Get the embed code and add it to your website. You'll find more specific instructions for every embed type below.
 
ℹ️
Changes made to your Tally form, after embedding it on your site, will automatically be updated, without having to change the embed code. When you change the embed styles (for example: hiding the form title or making the background transparent) after embedding your form, you have to copy the code again and replace it on your website.
 
 

Standard embed

Start by adjusting the embed options explained below. Then click Copy embed link or Get the code and add the link or code to your website.
notion image

Options

  • Height: Adjust the height of your form by adding the preferred height in pixels.
  • Hide form title if you don't want to display it on your website.
  • Align content to the left: embedded Tally forms will be displayed in the center of your website by default. Use this option to align the form content on the left of your screen.
  • Transparent background: remove the default white background to make your form blend into your website.
  • Customization & remove Tally branding: Tally Pro users can fully customize forms and remove the Tally branding. To customize the look & feel of your form, you need to connect your form to a custom domain, and apply custom styles. Then paste your custom domain form URL in the Customization field.
 
 

Popup

Read more about popup forms in this tutorial.
 

Full page embed

Use a full page embed if you want your form to cover the full page of your website. Start by adjusting the embed options explained below. Then click Get the code, copy and paste it in your web page's HTML.
notion image

Options

  • Transparent background: remove the default white background to make your form blend into your website.
  • Customization & remove Tally branding: Tally Pro users can fully customize forms and remove the Tally branding. To customize the look & feel of your form, you need to connect your form to a custom domain, and apply custom styles. Then paste your custom domain form URL in the Customization field.

Embedding Hidden Fields

Standard and Full page embed

When using hidden fields in a Standard and Full page embed you need to add the the parameters and corresponding values to your embed URL or code.
For example: tally.so/embed/nPdDxn?name=marie&ref=email
 
🧑‍💻
When you have dynamic URL parameters, you can automatically forward all these parameters from your website link to the Tally form by adding the code below to your webpage.
<script>
const tallyIframe = document.querySelector('iframe[src^="https://tally.so"]');
if (tallyIframe && window.location.search) {
  const searchParams = new URLSearchParams(window.location.search);
  searchParams.forEach((value, key) => {
    const appendParam =
      tallyIframe.src.indexOf('?') === -1
        ? `?${key}=${value}`
        : `&${key}=${value}`;
    tallyIframe.src += appendParam;
  });
}
</script>

Popup

When your popup form contains hidden fields, you need to add the URL query parameters to the URL of the website on which you're displaying the popup. The parameters will be automatically forwarded to the popup, and you will see them in your form submissions.
For example: acme.inc?name=marie&ref=email
 

Embed guides

 
 
Help