In Sitecore 10.3, a new feature known as the Embeddable Forms Framework (EFF) was introduced, providing the ability to integrate Sitecore forms into any webpage, regardless of whether it is running on a Sitecore application or not. This additional flexibility gives developers the opportunity to utilize Sitecore's form functionalities across diverse platforms, thus extending Sitecore's influence beyond its own ecosystem.
The embedded form maintains its non-interfering nature, ensuring the preservation of the webpage's current functionality and styling. To incorporate an embeddable form, developers are required to reference the EFF script and subsequently add a web component tag for the Sitecore form.
Guide to Sitecore Embeddable Forms Framework (EFF)
EFF offers several benefits, including:
Versatility: EFF allows for the embedding of Sitecore forms across any webpage, irrespective of the underlying application. This versatility allows developers to utilize Sitecore forms across a broad range of platforms and websites.
Non-Intrusive: The embedded forms do not meddle with the webpage's existing functionality or styles, ensuring seamless integration of Sitecore forms without disrupting your site's design or operation.
Simplicity: EFF simplifies the process of adding an embeddable form to a webpage. All that's required is referencing the EFF script and adding a web component tag for the Sitecore form.
Customizability: EFF provides the flexibility to customize your forms as per your needs. If you need to showcase a custom form element, create a class to render this element and reference it on the webpage.
Accessibility: EFF supports ARIA attributes, making the forms accessible to a wider range of users, including those who use assistive technologies such as screen readers.
Before you can add an embeddable form to your web application, certain prerequisites need to be met. Let's review these below.
Prerequisites for Using Sitecore Embeddable Forms Framework (EFF)
The following prerequisites must be met to utilize the Sitecore Embeddable Forms Framework (EFF):
Sitecore Version: Sitecore 10.3.0 or later is required. This version hosts the Layout Service and the submission endpoint. These are responsible for dynamically constructing the requested page's layout and managing form submissions, respectively.
Sitecore Headless Services: Sitecore Headless Services 21.0.0 or later is required. These services enable the development of headless applications with Sitecore and provide the necessary APIs for interacting with Sitecore's content and functionalities in a decoupled manner.
Now, let's proceed to the steps to work with EFF.
Preparing 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:
Download the Sitecore Headless Rendering 21+ and install it on your Sitecore 10.3 instance.
You can find the official documentation of how to install Sitecore Headless Serivices
Once the installation of Headless Serivices is completed now we need to create an API key for accessing the items from Sitecore.
Login to your 10.3 Sitecore instance and navigate to /sitecore/system/Settings/Services/API Keys/ and create a new API called "embeddable-forms"
After creating the API key update the CORS Origin and Allowed Controllers as * (wildcard). This is only for testing purposes and when you're using this in Production follow this official recommendation from Sitecore.
Publish the site and check if the layout service is working. To validate it browse it using https://<cm_server>/sitecore/api/layout/render?item=/&sc_apikey=<api_item_id>. For example: https://efsc.dev.local/sitecore/api/layout/render?item={110D559F-DEA5-42EA-9C1C-8A5DF7E70EF9}&sc_apikey={F28808C9-3850-420A-B10C-C616947B8BF3} and you will get the result as below.
At this point we've successfully installed the Sitecore Headless service and created an API for accessing item using Layout Service.
Download and extract the Sitecore Embeddable Forms for Sitecore ZIP file, then copy the sitecore-embeddableforms.umd.js file to your web application directory.
Creating the Sitecore Form
On the Forms dashboard, click Create
To create a new form from scratch, click Blank form, or select a template to base your form on.
In the Form elements pane, click the element that you want to add and drag it onto the form canvas.
Add basic form fields as below. Save it and publish the form
For detailed steps for creating the Sitecore Form follow the official document of Design a form.
Now that you have created a Sitecore form, let's move on to embedding it in a webpage.
Adding an Embeddable Form to a Webpage
To add a form to a webpage:
Create a simple HTML page which contains script tag which refers to the EFF form.
<script type="text/javascript" src="https://efsc.dev.local/sitecore-embeddableforms.umd.js?sc_apikey={F28808C9-3850-420A-B10C-C616947B8BF3}"></script>Add a scef-form tag to specify the Sitecore form item:
<scef-form formid="{4A49339C-CCF5-496E-9DD0-B6EE93D961A4}"></scef-form>The sample HTML page would look like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sitecore Embeddable Forms Sample</title>
<link rel="stylesheet" href="https://efsc.dev.local/css/styles.css">
</head>
<body>
<div class="my-page-container">
<h1>Sitecore Embeddable Forms Sample</h1>
<div class="my-embeddable-form-container">
<scef-form formid="{4A49339C-CCF5-496E-9DD0-B6EE93D961A4}"></scef-form>
</div>
</div>
<script type="text/javascript" src="https://efsc.dev.local/sitecore-embeddableforms.umd.js?sc_apikey={F28808C9-3850-420A-B10C-C616947B8BF3}"></script>
</body>
</html>Place the style.css file extracted from the Sitecore Embeddable Forms under css folder.
To access the page, host the page in IIS (else you'll get CORS error) and access the page from IIS with the address you configured.
When you access the page, you'll get the form loaded on the page as below.
Limitations of Sitecore EFF
It's also important to note some xDB-exclusive features are not available in EFF, including:
Trigger Goal submit action.
Trigger Campaign Activity submit action.
Trigger Outcome submit action.
Performance Tracking.
Robot Detection.
We hope this guide has provided you with all the necessary information about the EFF and how to integrate a Sitecore form in another site. If you have any questions or comments, feel free to leave them below. We would love to hear your thoughts!