# Integrate the form into the experience world

You can then integrate the forms you created into a world of experiences. See also <https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten>&#x20;

{% hint style="info" %}

```
Only publish an experience with a form 
if this form is completely configured 
and has the following points:
```

```
A form field must be set as email
A form field must be set as the subject
At least one form field (not an email or subject field) must be included
```

{% endhint %}

On the right you will find a new entry **“Form Manager”** and **Form Manager Links** in the block category.<br>

### Variant Form Manager

<figure><img src="https://2061240942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2bDXNnc5DRWPvagpuhf1%2Fuploads%2FHEU2S34aaOAwR96FGQ00%2Fimage.png?alt=media&#x26;token=14994fa4-2eb2-40b9-98f8-7f37e15dad6c" alt=""><figcaption></figcaption></figure>

If you select this, a preview image will be displayed below. You can then place it on the experience world or stage by dragging and dropping it.

<figure><img src="https://2061240942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2bDXNnc5DRWPvagpuhf1%2Fuploads%2FsTm2asHHR8788XsTY6aI%2Fimage.png?alt=media&#x26;token=106fe1b6-4819-4441-9faf-41bd98122e3d" alt=""><figcaption></figcaption></figure>

By clicking on the placed element, you can edit it by clicking on the gear

<figure><img src="https://2061240942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2bDXNnc5DRWPvagpuhf1%2Fuploads%2Frkeyc5IaJbclZJ17DVI2%2Fimage.png?alt=media&#x26;token=989d5633-f59e-4118-9e45-d8258c55f4eb" alt="" width="375"><figcaption></figcaption></figure>

The following window opens. Then select the form you want to create

<figure><img src="https://2061240942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2bDXNnc5DRWPvagpuhf1%2Fuploads%2FhpSxUR6tNPdO5Vfp5UIz%2Fimage.png?alt=media&#x26;token=fc86be39-32bc-4768-8d6b-9e9eb778440a" alt=""><figcaption></figcaption></figure>

### Variant Forms Manager Links

When you select this entry, a preview will appear below. You can then place them on the experience world or stage by dragging and dropping them.

<figure><img src="https://2061240942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2bDXNnc5DRWPvagpuhf1%2Fuploads%2Fa4jI3IDhMT6sbdClsDiE%2Fimage.png?alt=media&#x26;token=97c8306c-40ad-440d-9edf-a4f9795522f5" alt=""><figcaption></figcaption></figure>

By clicking on the placed element, you can edit it by clicking on the gear&#x20;

**Headline:**&#x20;

Heading to be displayed in the experience world&#x20;

**Description:**&#x20;

Description to be displayed in the experience world&#x20;

**Select the desired form:**&#x20;

Here you can select the form you want&#x20;

**Type of execution:**&#x20;

**Modal:**&#x20;

With the modal, a modal or popup window opens with the form.&#x20;

**New window / link:**&#x20;

In this variant, the link to the form is executed&#x20;

**Open in a new window:**&#x20;

If you have selected "New window" under Type of execution, you can also set that when you click on the button, the form opens in a new window or browser tab.

<figure><img src="https://2061240942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2bDXNnc5DRWPvagpuhf1%2Fuploads%2FzJxMLvLaGaHj31xK79kv%2Fimage.png?alt=media&#x26;token=611a2e1c-236b-4d42-97b0-c29eddf44182" alt=""><figcaption></figcaption></figure>

**Button type:**&#x20;

Here you can set the button style of the button.&#x20;

See <https://getbootstrap.com/docs/5.0/components/buttons/&#x20>;

**Button size:**&#x20;

Size of the button, see <https://getbootstrap.com/docs/5.0/components/buttons/> under Sizes

&#x20;**Button text (of the form)**&#x20;

Text of the button below the description&#x20;

**Vertical orientation**&#x20;

This setting determines how the elements should be placed within the CMS element.&#x20;

**Type of (form) heading:**&#x20;

Select your desired type of headline here.&#x20;

You can select the following HTML elements:

H1, H2, H3, H4, H5, H6 or various.&#x20;

See <https://getbootstrap.com/docs/5.0/content/typography/#headings>&#x20;

**Text alignment:**&#x20;

Choose whether the heading and description are displayed left-aligned, right-aligned or centered&#x20;

**Button alignment:**&#x20;

Choose whether the button is displayed left-aligned, right-aligned or centered&#x20;

**Title color:**&#x20;

Set the heading text color&#x20;

**Color of description:**&#x20;

Set the text color of the description Additional CSS class: Setting your own CSS class

<figure><img src="https://2061240942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2bDXNnc5DRWPvagpuhf1%2Fuploads%2FDcBHAGjXMtiiPnTm9m1B%2Fimage.png?alt=media&#x26;token=e0e27a70-5874-429a-9f1e-3e6120f56519" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Save the experience and clear the cache if necessary
{% endhint %}
