FormTemplate component allows you to fully customize the form layout. FormTemplate receives only two props:

PropDescription
formFieldsFields of the form.
schemaSchema from renderer. You can use it to extract a form title, description or whatever you need.

Minimal FormTemplate could look like this:

const FormTemplate = ({schema, formFields}) => {
const { handleSubmit } = useFormApi();
return (
<form onSubmit={handleSubmit}>
{ schema.title }
{ formFields }
<button type="submit">Submit</button>
</form>
)
}

With using useFormApi hook you can get access to all form information and functions you need. For example, you can use it to display form errors wherever you want to.

You can customize form buttons in your FormTemplate component

To display all form errors, you will need to add a component to your FormTemplate. Following example shows how to list all errors at the top of a form.

FormTemplates of the provided DDF mappers offers additional customization via using props.

import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
<FormRenderer
...
FormTemplate={(props) => <FormTemplate {props} showFormControls={false} ... />}
/>
PropTypeDescriptionDefault
buttonClassNamestringClass which will be given to the buttons wrapper.{ }
buttonOrderarray of stringsYou can specify the order of the form buttons.[ 'submit', 'reset', 'cancel' ]
cancelLabelnodeLabel for cancel button.'Cancel'
canResetboolShow/hide reset button.false
disableSubmitarray of stringsYou can specify a form attributes (see here) which will make the submit button disabled.[ ]
resetLabelnodeLabel for reset button.'Reset'
showFormControlsboolYou can disable showing form buttons. Use it with wizard component which has its own buttons.true
submitLabelnodeLabel for submit button.'Submit'