The new Volto Form Block, Plone Conference 2025

Talk about the new Volto Form Block.

1. NEW VOLTO FORM BLOCK
Yet another form library?
Plone Conference 2025, Jyväskylä
- Rob Gietema@robgietema

2. WHY NEW VOLTO FORM BLOCK?
volto-form-block uses custom widgets
require greater customizibility

3. STEPS TAKEN
Reuse the backend with some minor changes
Use the schema widget
Extend the schema widget / form component

4. EXAMPLE

5. FILTER FACTORIES
filterFactory: [
'label_text_field',
'label_choice_field',
'label_boolean_field',
'label_date_field',
'label_datetime_field',
'File Upload',
'label_email',
'radio_group',
'checkbox_group',
'hidden',
'static_text',
'number',
'textarea',
'time',

6. ADDITIONAL FACTORIES
additionalFactory: [
{ value: 'textarea', label: 'Textarea' },
{ value: 'radio_group', label: 'Radio Group' },
{ value: 'checkbox_group', label: 'Checkbox Group' },
{ value: 'hidden', label: 'Hidden' },
{ value: 'static_text', label: 'Static Text' },
{ value: 'number', label: 'Number' },
{ value: 'time', label: 'Time' },
],

7. FILTER FIELDS TO BE SEND
filterFactorySend: [
...config.blocks.blocksConfig.schemaForm.filterFactorySend,
'dataprotectionInfo',
],

8. SIDEBAR

9. CONDITIONAL SIDEBAR FIELDS
export const schemaFormBlockSchema = ({ intl, ...props }) => {
let data = props.data || props.formData;
let conditional_required = [];
if (data?.store !== true && data?.send !== true) {
conditional_required.push('store');
conditional_required.push('send');
}
if (data?.send_confirmation) {
conditional_required.push('confirmation_recipients');
}
return {
title: intl.formatMessage(messages.form),
fieldsets: [
{

10. PROVIDED WRAPPERS WITH
LOGIC
widgets: {
...config.widgets,
widget: {
...config.widgets.widget,
textarea: TextareaWrapper,
file: FileWrapper,
date: DatetimeWrapper,
time: TimeWrapper,
datetime: DatetimeWrapper,
email: EmailWrapper,
radio_group: RadioGroupWrapper,
checkbox_group: CheckboxGroupWrapper,
hidden: HiddenWrapper,
},
choices:SelectWrapper,

11. USE "DUMB" CUSTOM WIDGETS
innerWidgets: {
text: TextField,
textarea: TextAreaField,
file: FileSelector,
date: DatePicker,
datetime: DatePicker,
time: TimeField,
email: TextField,
radioGroup: RadioGroup,
radioGroupOption: Radio,
number: TextField,
checkbox: CheckboxField,
checkboxGroup: CheckboxGroup,
checkboxGroupOption: Checkbox,
select:Select,

12. ADD FIELD SCHEMA

13. REGISTER FIELD SCHEMA
config.registerUtility({
name: 'Rich Text',
type: 'fieldFactoryProperties',
method: (intl) => ({
maxLength: {
type: 'integer',
title: intl.formatMessage(messages.maxLength),
},
default: {
title: intl.formatMessage(messages.defaultValue),
widget: 'richtext',
type: 'string',
},
}),
});

14. INITIAL DATA
config.registerUtility({
name: 'country',
type: 'fieldFactoryInitialData',
method: (intl) => ({
type: 'string',
factory: 'country',
choices: countries[intl.locale].map((country) => [country,
id: 'country',
}),
});

15. CUSTOM BUTTONS
const ButtonWrapper = ({ primary, secondary, type, title, onCl
return (
<Button
type={type === 'submit' ? 'submit' : 'button'}
styles={secondary ? 'btn btn-secondary' : 'btn btn-prima
onPress={onClick || (() => {})}
label={title}
/>
);
};

16. CUSTOM FORM COMPONENT
component: FormComponent,

17. THAT'S ALL FOLKS!
Talk to me about Nick!
slideshare.net/robgietema/volto-form-block