forms/docs/Embedding.md

Embedding

Besides sharing and using the API for custom forms it is possible to embed forms inside external websites.

Obtaining the embedding code

For embedding a form it is required to create a public share link first and then convert it to an embeddable link.
The embedding code can be copied from the sharing sidebar or crafted manually by using the public share link:

If the public share link looks like this:
https://SERVER_DOMAIN/apps/forms/s/SHARE_HASH

The embeddable URL looks like this:
https://SERVER_DOMAIN/apps/forms/embed/SHARE_HASH

Using the copy-embedding-code button on the sharing sidebar will automatically generate ready-to-use HTML code for embedding which looks like this:

<iframe src="EMBEDDABLE_URL" width="750" height="900"></iframe>

The size parameters are based on our default forms styling.

Window message events

The embedded view provides a MessageEvent to communicate its size with its parent window. This is done as accessing the document within an iframe is not possible if not on the same domain.

Auto resizing the iframe

The emitted message on the embedded view looks like this:

{
	"type": "resize-iframe",
	"payload": {
		"width": 750,
		"height": 900
	}
}

To receive this information on your parent site:

window.addEventListener(
	'message',
	(event) => {
		if (event.origin !== 'http://your-nextcloud-server.com') {
			return
		}

		if (event.data.type !== 'resize-iframe') {
			return
		}

		const { width, height } = event.data.payload

		iframe.width = width
		iframe.height = height
	},
	false,
)

Form submitted

When the form is submitted a message event like this is emitted:

The emitted message on the embedded view looks like this:

{
	"type": "form-saved",
	"payload": {
		"id": 1234
	}
}

Custom styling

To apply custom styles on the embedded forms the Custom CSS App can be used.

The embedded form provides the app-forms-embedded class, so you can apply your styles.
For example if you want the form to be displayed without margins you can use this:

#content-vue.app-forms-embedded {
	width: 100%;
	height: 100%;
	border-radius: 0;
	margin: 0;
}

Or if you want the form to fill the screen:

#content-vue.app-forms-embedded .app-content header,
#content-vue.app-forms-embedded .app-content form {
	max-width: unset;
}