Skip to main content

Creating a form

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

A form is a collection of inputs that allow users to create and edit 'things' within the Jadu platform. Pulsar forms provide consistent styling as well as sensible defaults so that developers can quickly compose useful, accessible forms.

The Forms section lists all of the currently supported inputs, these should be placed within a suitable form element which can be created using the helper elements listed here.

Basic usage

{{ form.create() }}
...
{{
form.end({
'actions': [
form.submit({
'class': 'btn--primary',
'label': 'Primary Action'
}),
html.button({
'class': 'btn--naked',
'type': 'link',
'label': 'Cancel',
'href': '#home'
})
]
})
}}

Helper options

You can configure this helper using the common helper options, the following options are specific to this helper.

OptionTypeDescription
actionstringURL to post to, will submit to self if empty
classstringA space separated list of class names
enctypestringHow the form-data should be encoded (requires method = POST)
idstringA unique identifier, if required
namestringThe name of the form
noncestringRandom string used to prevent CSRF, adds a hidden nonce input after form
methodstringThe HTTP method to be used to submit the form
data-*stringData attributes, eg: 'data-foo': 'bar'

Enctype

The enctype attribute will be set to application/x-www-form-encoded by default unless you’re using a method other than POST.

<form method="POST" encype="application/x-www-form-urlencoded" class="form">

Using PUT

If you specify PUT as the method in Twig or React, then a hidden input will be created automatically after the form element, and the method attribute on the form element will be set to POST.

{{
form.create({
'method': 'PUT'
})
}}
...
{{ form.end() }}

CSRF protection

Supply a nonce and it will be added as a hidden input after the opening form element.

{{
form.create({
'nonce': 'D2A619A309DCE1BEF50F01F08EB764B42D9B36BF8128A8D303FD6DCF91E5FDD6'
})
}}
...
{{ form.end() }}

Form actions

You need to provide a way for the user to submit the form, and ideally a way to cancel what they’re doing and return to where they started.

The first button in the form actions will usually be the submit button and be a primary button in most cases.

Cancel

Alignment

Form actions are normally positioned so they’re inline with the form controls above them.

If the form is editing an existing ‘thing’ rather than creating something new then you may also want to provide a delete action, use the u-float-right utility class to move this to the right hand side.

Cancel

You can make the actions align to the left hand edge of a form by adding the .form__actions--flush class.

Cancel