Form widget

Overview

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.

Place the widget on the page

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.

Widget settings

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 DotNetCore8 (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 Add (Select form) and select a form from you’re the Forms module.

The form must be a Next.js form.

Choose what to do after the user submits the 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 Add (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.

Advanced widget settings

To open the advanced settings, in the upper-right corner of the Form widget page, click DotNetCore11 (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.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?