---
title: "Walkthrough: Adding an embeddable form to a webpage"
slug: "walkthrough--adding-an-embeddable-form-to-a-webpage"
abstract: "Describes how to add an embeddable form to a webpage."
---
# Walkthrough: Adding an embeddable form to a webpage
With the Embeddable Forms Framework (EFF), you can render a Sitecore form on any webpage.
This walkthrough describes how to:
- Prepare to work with EFF.
- Add an embeddable form to a webpage.
- Display a custom form element in an embeddable form.
Prepare to work with EFF
Before you can add an embeddable form to your web application, you must prepare your Sitecore instance and web application to work with the EFF.
To prepare your Sitecore instance and web application to work with the EFF:
1. [Install Sitecore Headless Services 21.0.0 zip package](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/install-headless-services-using-the-package--zip-file.html).
2. [Create an API key](https://doc.sitecore.com/xp/en/developers/104/sitecore-experience-manager/api-keys-for-the-odata-item-service.html "API keys for the OData Item Service").
3. Download and extract the [Sitecore Embeddable Forms for Sitecore ZIP file](https://dev.sitecore.net/Downloads/Sitecore_Embeddable_Forms/1x/Sitecore_Embeddable_Forms_100.aspx), then copy the `sitecore-embeddableforms.umd.js` file to your web application directory.
4. Copy the `css` folder to the root directory of your web application.
Add an embeddable form to a webpage
After you install Sitecore Headless Services, create an API key, and add the required files to your web application, you can add a Sitecore form to a webpage.
To add a form to a webpage:
1. On the webpage where you want to display the form, add a `script` tag that refers to the EFF script:
```text
```
| Parameter | Description |
| --- | --- |
| `sc_apikey` | The API key for authentication to the Layout Service and the submission endpoint. |
| `sc_site` | Optional. The URL of the Sitecore website that is hosting the Layout Service and the submission endpoint. If you do not include this parameter, the EFF assumes that this script is hosted on a Sitecore instance that contains the Layout Service and the submission endpoint. |
2. Add a `scef-form` tag to specify the Sitecore form item:
```text
```
| Attribute | Description |
| --- | --- |
| `formId` | The ID of the Sitecore form item you want to add to the page. |
The following is a sample HTML page that contains an embeddable form:
```xml
Sitecore Embeddable Forms Sample
Sitecore Embeddable Forms Sample
```
Display a custom form element in an embeddable form
> [!note]
> You only have to follow this procedure if your form contains a custom form element.
If your Sitecore form contains a [custom form element](https://doc.sitecore.com/xp/en/developers/104/sitecore-experience-manager/walkthrough--creating-a-custom-form-element.html "Walkthrough: Creating a custom form element"), you must create a class that renders the custom form element, then reference this class on the webpage that contains your embeddable form.
To display a custom form element in an embeddable form:
1. Create a class that renders your custom form element.
In the following example, the custom form element is based on the `Single-Line text` item in the */sitecore/system/Settings/Forms/Field Types/Basic* folder.
```csharp
import { css, html } from 'https://unpkg.com/lit@^2?module';
import { ifDefined } from 'https://unpkg.com/lit@^2/directives/if-defined.js?module';
export class ScefCustomLineText {
id = "YOUR-CUSTOM-FORM-ELEMENT-ITEM-ID-WITHOUT-BRACKETS";
render(
field,
themeElement,
placeholderText,
errorMessage
) {
return html`
`;
}
}
```
2. On the webpage that contains your embeddable form, add a `script` tag that refers to your class.
```xml
```
| Attribute | Description |
| --- | --- |
| `useOn` | Indicates to the EFF how to process the script. `customfield` is the only available value. |
| `guid` | The ID of the custom form element item. |
| `ctor` | The class that renders the custom form element. |
| `renderMode` | The method that renders the custom form element. |
| `src` | The URL of the class that renders the custom form element. |
The following is a sample HTML page that contains an embeddable form with a custom form element:
```xml
Sitecore Embeddable Forms Sample