Create and design forms

Before displaying a form on your pages with a widget, you must first create it, design its layout, and create its content. You do this in the Forms module.

You create and configure forms on the Forms page.

1. If you have multiple sites, use the dropdown menu in the upper left of the page to select the site where you want to create forms. 
   For more information, see Multisite.
   
2. Navigate to Content » Forms.
   The Forms page opens.
   
3. On the Forms page, click Create a form.
   The Create a form page opens.
   
4. In the Type form title input field, enter the name of the form.
5. Under Web framework, select NextJS.
6. You can change the automatically generated name for developers by clicking Edit and entering the new name in the input field that appears.
   This is the name of the form that is used by developers to refer to the form in the code.
   
7. To proceed designing the form, click Create.
   

You design the layout of a form in the same way that you design a Next.js page, you do this with the help of the Section widget.

To design the layout of the form, perform the following:

1. Open a Next.js form for editing.
2. In the page editor, click Add widget here…
   The widget selector opens.
3. Click the Layout tab.
4. Click the Section widget.

For more information, see Design the layout with the Section widget.

After you have designed the layout of your form, using one or more Section widgets, you can proceed to add form widgets, such as textboxes, checkboxes, and submit buttons.

You first place the widgets on the page, afterwards, you configure them.

Place a widget in a form

You can place a form widget only inside a Section widget.
To do this, perform the following:

1. Inside a column from the Section widget, click Add widget here…
2. Select the Content tab.
3. Click the respective widget.
   The widget is placed inside the selected column of the Section widget.

Configure a widget

To configure a widget, perform the following:

1. In the page editor, hover over the widget. 
2. Click the toggle menu in the widget label. 
3. Click  (Edit).

Configure each widget by following the respective procedure in this section.