---
title: "Embedding Forms"
slug: "embedding-forms"
description: "The form builder supports both \"simple\" and \"dynamic\" embeds."
updated: 2026-08-24T14:01:49Z
published: 2026-08-24T14:01:49Z
canonical: "knowledge.technolutions.net/embedding-forms"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt
> Use this file to discover all available pages before exploring further.
# Embedding Forms
You can embed a Slate [form](/v1/docs/forms-overview) on an external webpage. Embedded forms can collect event registrations, for your request-for-information pages, as a giving form for alumni, and more.
## Embedding a Slate form on a webpage
> [!WARNING]
> đź“ť Note
>
> Only one Slate form can be embedded on a single webpage. Use separate pages or link directly to a form if you need to provide access to more than one at a time.
1. Go to **Forms**.
2. Open the form.
3. Select **Edit Form**.
4. Select **Embed Form.**
5. Three tabs available:
- **Simple Embed:** Renders the form on the page.
- **Dynamic Embed:** Passes the hosting page’s query-string parameters into the embedded form.
**QR Code:** Generates a QR code that, when scanned, opens the form. Also provides a short URL for use in social media.
6. Paste the copied HTML, QR code, or short URL on the external webpage where the form should appear.
## Simple and dynamic embedding
Simple and dynamic embed links use `script` tags to add the requested form to the host page. The embedded form can use CSS from the host page, validate fields and addresses, and submit data back to Slate. Neither embed type uses `document.write`.
Both types of embedding present `Loading...` placeholder text in the `div` that renders the form while the website awaits a response from Slate.
### Simple embed
Let’s take a look at an example simple embed code:
```xml
Loading...
```
Here, we see the `div` that renders the form (which begins as the `Loading…` placeholder text), followed by a `script` tag. The `script` asynchronously downloads and executes JavaScript from `src`, the value of which is your form’s URL plus some query string parameters. When the webpage on which the script is embedded receives the JavaScript, it replaces the `Loading…` text in the `div` with the form’s HTML.
Taking a look at the `src` value:
```plaintext
https://slate.edu/register/?id=f9673d93-4906-4da9-9d5e-253d57511266&output=embed&div=form_f9673d93-4906-4da9-9d5e-253d57511266
```
We have a series of query string parameters following the `?` at the end of the URL:
- `id`: The form’s Globally Unique Identifier (GUID) value.
- `output`: The `output` parameter, when provided value `embed`, requests the embedded-form response.
- `div`: The destination `div` on the host page.
You can add your own query string parameters to the `src` URL. When these query strings reference fields on the form, they can **pre-populate the field** with the parameter’s value.
For example, if you wanted to pre-populate the value of an Academic Interest field with `Computer Science`, you could add `sys:field:acainterest=PROGRAM-GUID` as a query string parameter, like so:
```xml
Loading...
```
Where `FORM-GUID` and `PROGRAM-GUID` are the Globally Unique Identifiers for the form and program, respectively.
This might be useful in a specific circumstance, but what if you wanted your form fields to be populated with different values depending on the URL with which the user arrives at the form? That’s where **dynamic embeds** come into play: they let you move beyond hardcoding the query string parameters in the embed code.
### Dynamic embed
Here’s an example dynamic embed code:
```xml
Loading...
```
Let’s explore the contents of the dynamic embed code’s `script` tag:
```javascript
(function () {
  const script = document.createElement('script');
  // Creates a new `script` element.
  script.async = 1;
  // Instructs the browser to download the Slate form  without blocking the rest of the webpage while the download is underway.
  // While the page waits, users see the `Loading...` placeholder.
  script.src = 'https://slate.edu/register/?id=FORM-GUID&output=embed&div=form_FORM-GUID' + ((location.search.length > 1) ? '&' + location.search.substring(1) : '');
  // Assigns the URL that the newly created script will load. See section on query string parameters below for more detail on how these lines work.
  const s = document.getElementsByTagName('script')[0];
  // This finds the first `script` element already present in the webpage and uses that element as a known insertion point for the new Slate script.
  s.parentNode.insertBefore(script, s);
  // Inserts the newly created script immediately before the first existing script.
})(); // Runs, closes the function.
```
### Query string parameters in dynamic embeds
Of particular importance for the dynamic embed is the line that builds the `src` value, which the script then requests from Slate:
```javascript
script.src = 'https://slate.edu/register/?id=FORM-GUID&output=embed&div=form_FORM-GUID' + ((location.search.length > 1) ? '&' + location.search.substring(1) : '');
```
Beside getting the form’s URL, which includes its ID and the ID of the `div` in which it is to be rendered, this is where Slate incorporates into the form’s fields any additional query string parameters passed in with the URL.
The script builds a string out of your form’s URL:
```javascript
'https://slate.edu/register/?id=FORM-GUID&output=embed&div=form_FORM-GUID'
```
Plus the result of a [ternary expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator):
```javascript
+ ((location.search.length > 1) ? '&' + location.search.substring(1) : '');
```
This expression checks for the existence of any additional text following the URL. It does this by testing the value of `location.search`, which contains the query-string portion of the current external webpage URL, including the opening question mark.
If your page has the URL:
```plaintext
https://admissions.example.edu/request-info?sys:field:program=PROGRAM-GUID
```
`location.search`'s value would be:
```plaintext
?sys:field:program=PROGRAM-GUID
```
If the `location.search.length` property has a length longer than `1`, it knows there’s something after the question mark (`?`). If that’s the case, it appends an ampersand (`&`) followed by the remaining query string from the host page’s URL (the return value of `location.search.substring(1)`). If it doesn’t find any additional text, it adds an empty string `’’` (that is, it doesn’t add anything to the URL).
This is what lets the dynamic embed code incorporate query string parameters into a form response. For example, if a user opens the page hosting the dynamically embedded form with the following query string parameter:
```plaintext
https://admissions.example.edu/request-info?sys:field:program=PROGRAM-GUID
```
The dynamic embed script sends the following request to Slate:
```plaintext
https://example.edu/register/?id=FORM-GUID&output=embed&div=form_FORM-GUID&sys:field:program=PROGRAM-GUID
```
When Slate sends back the `PROGRAM-GUID`, the field represented by the export key `sys:field:program` is populated with that value.
đź“– [Prepopulating or Prefilling Forms Using Query String Parameters](/v1/docs/prepopulating-or-prefilling-forms-using-query-string-parameters)
### CSS and embedded forms
Embedded forms and the host webpage can occasionally have conflicting CSS. If the embedded form does not appear as expected, work with whoever maintains the website to adjust the host page's CSS.
## QR codes
Slate can generate a QR code that resolves to a short URL that links to your form.
Copy the code and place it anywhere you might expect registrants to scan it with their phones. You can also copy the short URL for social media posts or anywhere character space is at a premium.