Limbo

`UmbracoForms`

A nuxt3 layer for building a form based on the schema coming from umbraco forms API version.

copy folder to frontend folder.

in nuxt.config.js

...
extends: ['./umbracoforms'],
...
runtimeConfig: {
	formApiKey: '',
	public: {
		apiDomain: '', // is most likely already present
	}
	...
}
...

Get formApiKey from backend, should be set via .env as NUXT_FORM_API_KEY

The layer exposes the component. Minimum values needed to run the umbraco form.

<UmbracoForms
	:post-endpoint="..."
	:definitions-endpoint="..."
>
</UmbracoForms>

Prop	Description
postEndpoint	A string relative url where the form entry will be sent. (required)
definitionsEndpoint	A string relative url where the form definitions object can be found. (required)

Slot name	Description
formIsLoading	Can be used to insert a loading animation or similar. Is shown on post and before the definitions are loaded. Props: none.
formHeader	Header area. Overwrites title Slot. Props: previousLabel, nextLabel, submitLabel, changePage(next, previous, int), currentPage, pageCount, name, formErrors
title	Title area. Props: name
pageHeader	Header area for the individual page. Props: caption
legend	Overwrites the default form group legend Props: caption
errorBox	Shown if form has showValidationSummary setting. Props: formErrors
formFooter	Footer area. Overwrites default next, previous and submit buttons. Props: previousLabel, nextLabel, submitLabel, changePage(next, previous, int), currentPage, pageCount, name, formErrors

All field slots have the following props available:

Prop name	Description
id	required on field
modelValue	model value of field
required	if field is required
indicator	The text used to indicate a required/optional field
fieldName	name of field. Usage `:name="fieldName"`
field	full field information
setModelValue(event)	sets value correctly internally. Input needs to have the included id set correctly. `setModelValue` assumes that the set id is the supplied field id prefixed by `uf-`, for example `uf-582207f9-81c6-4aca-a210-a0fbde9c20c5`. The prefix is because element ids are not allowed to start with a number.
setModelValueForId(id, value)	sets value correctly internally for the id of your choice. Here the id is just the field-id directly.
errors	field specific errors
showIndicator	if required indicator should be shown
showLabel	Boolean
pattern	validation pattern
placeholder	String
onInvalid(event)	sets browser error message to be the error message set in field.

The follow field slots are available.

Slot name	Description
text	normal text input, if set it overwrites other default values if their slots are not used. eg. If email slot is not specified but text is, the default email input will be overwritten by text slot input. This is done so you do not have to specify every single slot in most use cases.
week	week input, if not specified it will overwritten in this order: date, text, default input
date	Date input. Shows browsers datepicker if not specified
datetimeLocal	datetimeLocal input. if not specified it will overwritten in this order: date, default input
email	Email input. Overwritten in this order: text, default input
tel	tel input. Overwritten in this order: text, default input
number	number input. Overwritten in this order: text, default input
time	time input. Overwritten in this order: text, default input
url	url input. Overwritten in this order: text, default input
textArea	Textarea
password	password input. Overwritten in this order: text, default input
checkbox	Single checkbox
radioList	single choice radio list
checkboxList	multiple choice checkbox list
dataConsent	data consent
select	select dropdown.
file	file input, set files to hidden file input if a different handling than default is wanted
richText	richText html from backend
titleDescription	title and description from backend for section

All slots overwrite error area, so that will need to be handled in custom slots.