Topics

All topics

Create a web form with a form response editor

This is a tutorial for creating a web form for editing form responses on the frontend.

1. Create the form
  1. In Sitefinity CMS backend, click Content » Forms » Create a form.
  2. In Title field, enter My test form and click Create and go to add content.
  3. Drop three Textbox widgets on the form.
    For each widget, click its Edit button and perform the following:
    1. Set the label of the first widget to Editable Textbox and save your changes.
    2. Set the label of the second widget to Hidden textbox and click the Advanced button.
      In HiddenModes field, enter update. This will hide the textbox when the form is rendered in update mode.
      Save your changes.
    3. Set the label of the third widget to Readonly textbox and click the Advanced button.
      In ReadOnlyModes field, enter update. This will make the textbox read-only when the form is rendered in update mode.
    4. Save your changes.
  4. Publish the form.

2. Display the form on a page
  1. In Sitefinity CMS backend, click Pages »Create a page.
  2. In Name field, enter Form Page and click Create and go to add content.
  3. Drop the Form widget on the page and click Select a form.
  4. In the dialog that opens, select My test form and click Done Selecting.
  5. Publish the page.

3. Create the FormsEntryEditor web form

To keep this example simple, this web-form contains a simple GridView which lists the form's responses, each is presented with an "edit" button, which opens the form's page to edit the values of the editable fields.

In Visual Studio, add a new web form user control to your website and name it FormsEntryEditor.

Edit the markup file

EXAMPLE: For more information about the markup of the widget, see FormsEntryEditor.aspx in Sitefinity documentation-samples on GitHub.:

Edit the code-behind file

EXAMPLE: For more information about the markup of the widget, see FormsEntryEditor.aspx.cs in Sitefinity documentation-samples on GitHub.:

NOTE: Note the following:
  • The form is retrieved by its name.
    If your form is not found, make sure you locate it properly.
  • The grid is bound to 4 dynamic fields.
    The first is the Query field, which is generated for each record, and hidden when the grid's rows are created.
  • The ID of each form field is retrieved by its Name for developers.
    It may vary on your system.
    To get the ID of each field, edit the textbox in the form editor and expand the Advanced: Name for developers.

Result:
  • In addition to the dynamic columns created by the binding in the code-behind file, the grid has one static column. This column contains the edit button.
  • The button holds the generated query for each record in its data-query attribute.
  • When the button is clicked, the page redirects to the page which holds the form, and appends the relevant query.

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?

Next article

Extend the forms TextField