Form widget

The Next.js Form widget enables you to display Next.js forms on your website.

PREREQUISITES: You must have first created at least one Next.js form. For more information, see Create and design forms.

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 FORM widget.
   The widget is placed inside the selected column of the Section widget.

To open the widget settings, perform the following:

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

In the Select pages section you can do the following:

Select the form to display

To do this, under Select a form, click  (Select form) and select a form from you’re the Forms module.

The form must be a Next.js form.

After the user clicks the Submit button, you can choose one of the following actions:

• As set in the form
  The user will be redirected or a message will be displayed, depending on what you have configured for this form in the Forms module.
  For more information, see Configure the form properties.
• Custom message
  A textbox appears, where you define the success message that appears when a user submits the form.
• Custom redirect to a page
  After submitting the form the system redirects the user to another page of the website.
  Click  (Select page) and select a page from your website.

Configure the widget margins

In Display settings, under Margins, you can choose the margins between the text and the column where it is placed.
Choose from the predefined values of none, small, medium, or large.

Save your changes.

To open the advanced settings, in the upper-right corner of the Form widget page, click  (Advanced settings).

1. In Label, you can enter a specific name for this widget.
   This name will be displayed in:
   • The page editor as a label for the widget
   • In the treeview with the page structure in the right pane of the page editor.
2. In CSS class, you can enter individual CSS class for the Form widget.
3. Save your changes.