Create and design forms

Overview

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.

Create the form

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.

Create the layout

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.

Create the content

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 DotNetCore8 (Edit).

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

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?