Layouts

Overview

In this section, you learn all about the Form Builder theme layouts.

Every form you create via the Form Builder app 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.

Using Layout in Forms

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:

Webiny form settings button

(click to enlarge)

You should then see the following screen, and the “Layout” field at the bottom of the general settings form:

Webiny form settings button

(click to enlarge)

Anatomy of Form Layout

Let’s take a closer look at the structure of a form layout and its component.

Plugin

The following snippet of code shows how to add a new form layout via a simple plugin:

import DefaultFormLayout from "./layouts/DefaultFormLayout";

export default [
  {
    name: "form-layout-default",
    type: "form-layout",
    layout: {
      name: "default",
      title: "Default layout",
      component: DefaultFormLayout
    }
  }
];

The following table shows a list of all keys and values that the plugin must define:

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, located at: apps/theme/formBuilder/layouts/DefaultFormLayout.tsx

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

Add a New Form Layout

You can add a new form layout in the Form Builder app in these two simple steps:

1. create a React component that contains all the logic related to the layout
2. then, register it as a form-layout plugin

Create Layout Component

Let’s start with creating a React component for our form layout. First copy over the content of the DefaultFormLayout component and make the following changes:

import { ReactComponent as OnlineIcon } from "./images/online-bro.svg";
import { css } from "emotion";

(...)

// Some code is removed for the sake of brevity
const artClass = css(`
  display: flex;
  justify-content: center;
  svg {
    width: 200px;
  }
`);
const containerClass = css(`background-color: #cadaf6; padding: 8px 16px`);

const SimpleFormLayout: FormLayoutComponent = ({
  getFields,
  getDefaultValues,
  submit,
  formData,
  ReCaptcha,
  TermsOfService
}) => {

  return (
    <div className={containerClass + " webiny-fb-form-layout-simple"}>
      {/* A simple Image */}
      <div className={artClass}>
          <OnlineIcon />
      </div>
      {/* "onSubmit" callback gets triggered once all of the fields are valid. */}
      {/* We also pass the default values for all fields via the getDefaultValues callback. */}
      <Form onSubmit={submitForm} data={getDefaultValues()}>
          {/* ... */}
      </Form>
    </div>
  );
};

export default SimpleFormLayout;

Also, make the following style changes to make our layout stand apart:

(...)

.webiny-fb-form-layout-simple .webiny-fb-form {
  background-color: #cadaf6;

  .webiny-fb-form-field {
    background-color: #cadaf6;
  }
}

Register the New Form Layout

import DefaultFormLayout from './layouts/DefaultFormLayout'import SimpleFormLayout from './layouts/SimpleFormLayout'
export default [{  name: 'form-layout-default',  type: 'form-layout',  layout: {    name: 'default',    title: 'Default layout',    component: DefaultFormLayout,  },},{  name: 'form-layout-simple',  type: 'form-layout',  layout: {    name: 'simple',    title: 'Simple layout',    component: SimpleFormLayout,  },},]

After making these changes head over to the Form Builder app and try using your newly added form layout.

Webiny form builder preview

(click to enlarge)