Every form you create via the form builder has a layout, which lets you define the design of your forms. Because the form layout is a React component, there are virtually no restrictions when it comes to adding customizations. Feel free to organize the code to your liking, import custom CSS, fonts, or even additional custom React components if there's a need for it.
Be default, every form has a default layout, which can be changed via the form settings. In the form builder, click on the settings icon in the top right corner:
You should then see the following screen, and the "Layout" field at the bottom of the general settings form:
Please note that a single form layout can be used on any number of forms, but every single form can use only one layout.
Adding new form layouts
Adding new form layouts is just a matter of creating a new React component, and then registering it as a
form-layout plugin, or listing the layout component in the Page Builder theme file. Whichever method you choose, you will need to declare your form layout's title and also reference the actual React component you've created.
The following snippet of code shows how to add a new form layout via a simple plugin:
Note that the plugin is defined once, but must be registered both in your Admin and website apps. This is, respectively, because you'll want to select the form layout and see the form preview in the form builder, and because you'll want to be able to show your form on the actual website.
By default, all of the Admin and website plugins are registered in
The following table shows a list of all keys and values that the plugin must define:
|Unique plugin name.|
|Plugin type, must equal to |
|Object containing a unique |
If you're not already familiar with the concept of plugins, everything you need to know can be found right here.
Form layout React component
To get a better feeling of what's expected of a single form layout component, you can check out the default layout component that's provided with every Webiny installation, located at:
If needed, feel free to edit the file to your liking, or just create a copy and use that as a foundation for a new form layout.
Form Layout Component's Props
|Returns a single form field by given ID.|
|Returns a list of all form fields.|
|Returns default values for all form fields.|
|A components that shows Google reCAPTCHA, a simple check that prevents you from spammers and bots (only if enabled via form settings).|
|A component that shows terms of service message (only if enabled via form settings.|
|Call this callback to submit the form.|
|Contains data about the form, e.g. form name, layout, settings, and so on.|