Creating a form
- 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
- Twig
- React
- HTML
{{ form.create() }}
...
{{
form.end({
'actions': [
form.submit({
'class': 'btn--primary',
'label': 'Primary Action'
}),
html.button({
'class': 'btn--naked',
'type': 'link',
'label': 'Cancel',
'href': '#home'
})
]
})
}}
<Form>
...
<FormActions>
<Button type="submit" className="btn--primary">Primary Action</Button>
<Button type="link" href="/path/to/cancel" className="btn--naked">Cancel</Button>
</FormActions>
</Form>
<form method="POST" enctype="application/x-www-form-urlencoded" class="form">
...
<div class="form__actions">
<button type="submit" class="btn btn--primary">Primary Action</button>
<a href="#home" class="btn btn--naked">Cancel</a>
</div>
</form>
Helper options
You can configure this helper using the common helper options, the following options are specific to this helper.
Option | Type | Description |
---|---|---|
action | string | URL to post to, will submit to self if empty |
class | string | A space separated list of class names |
enctype | string | How the form-data should be encoded (requires method = POST) |
id | string | A unique identifier, if required |
name | string | The name of the form |
nonce | string | Random string used to prevent CSRF, adds a hidden nonce input after form |
method | string | The HTTP method to be used to submit the form |
data-* | string | Data 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
.
- Twig
- React
- HTML
{{
form.create({
'method': 'PUT'
})
}}
...
{{ form.end() }}
<Form method="PUT">
...
</Form>
<form method="POST" enctype="application/x-www-form-urlencoded" class="form">
<input name="_method" value="PUT" type="hidden" />
...
</form>
CSRF protection
Supply a nonce
and it will be added as a hidden input after the opening form element.
- Twig
- React
- HTML
{{
form.create({
'nonce': 'D2A619A309DCE1BEF50F01F08EB764B42D9B36BF8128A8D303FD6DCF91E5FDD6'
})
}}
...
{{ form.end() }}
<Form nonce="D2A619A309DCE1BEF50F01F08EB764B42D9B36BF8128A8D303FD6DCF91E5FDD6">
...
</Form>
<form method="POST" enctype="application/x-www-form-urlencoded" class="form">
<input name="nonce" value="D2A619A309DCE1BEF50F01F08EB764B42D9B36BF8128A8D303FD6DCF91E5FDD6" type="hidden" />
...
</form>
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.
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.
You can make the actions align to the left hand edge of a form by adding the .form__actions--flush
class.