diff --git a/13/umbraco-forms/developer/configuration/README.md b/13/umbraco-forms/developer/configuration/README.md index ff3afc71e46..f7b1cd11540 100644 --- a/13/umbraco-forms/developer/configuration/README.md +++ b/13/umbraco-forms/developer/configuration/README.md @@ -57,7 +57,12 @@ For illustration purposes, the following structure represents the full set of op "AutocompleteAttribute": "", "DaysToRetainSubmittedRecordsFor": 0, "DaysToRetainApprovedRecordsFor": 0, - "DaysToRetainRejectedRecordsFor": 0 + "DaysToRetainRejectedRecordsFor": 0, + "ShowPagingOnMultiPageForms": "None", + "PagingDetailsFormat": "Page {0} of {1}", + "PageCaptionFormat": "Page {0}", + "ShowSummaryPageOnMultiPageForms": false, + "SummaryLabel": "Summary of Entry" }, "RemoveProvidedEmailTemplate": false, "RemoveProvidedFormTemplates": false, @@ -88,7 +93,8 @@ For illustration purposes, the following structure represents the full set of op "UseSemanticFieldsetRendering": false, "DisableClientSideValidationDependencyCheck": false, "DisableRelationTracking": false, - "TrackRenderedFormsStorageMethod": "TempData" + "TrackRenderedFormsStorageMethod": "TempData", + "EnableMultiPageFormSettings": false }, "Security": { "DisallowedFileUploadExtensions": "config,exe,dll,asp,aspx", @@ -104,7 +110,9 @@ For illustration purposes, the following structure represents the full set of op }, "FieldTypes": { "DatePicker": { - "DatePickerYearRange": 10 + "DatePickerYearRange": 10, + "DatePickerFormat": "LL", + "DatePickerFormatForValidation": "" }, "Recaptcha2": { "PublicKey": "", @@ -305,6 +313,26 @@ Applies as per `DaysToRetainSubmittedRecordsFor` but for records in the 'approve Applies as per `DaysToRetainSubmittedRecordsFor` but for records in the 'rejected' state. +### ShowPagingOnMultiPageForms + +Defines whether and where paging details are displayed for multi-page forms. + +### PagingDetailsFormat + +Defines the paging details format for multi-page forms. + +### PageCaptionFormat + +Defines the page caption format for multi-page forms. + +### ShowSummaryPageOnMultiPageForms + +Defines whether summary pages are on by default for multi-page forms. + +### SummaryLabel + +Defines the default summary label for multi-page forms. + ## Package options configuration ### IgnoreWorkFlowsOnEdit @@ -420,6 +448,14 @@ To switch to this storage mechanism change the value of this setting from the de We expect `HttpContextItems` to be the default option from Forms 14 onwards. +## EnableMultiPageFormSettings + +This setting determines whether [multi-page form settings](../../editor/creating-a-form/form-settings.md#multi-page-forms) are available to editors. + +By default the value is `false`. This ensures that, in an upgrade scenario, before the feature is used the necessary styling and/or theme updates can be prepared. + +To make the feature available to editors set the value to `true`. + ## Security configuration ### DisallowedFileUploadExtensions @@ -484,6 +520,14 @@ For more information, see the [Headless/AJAX Forms](../ajaxforms.md) article. This setting is used to configure the Date Picker form field range of years that is available in the date picker. By default this is a small range of 10 years. +#### DatePickerFormat + +A custom date format can be provided in [momentjs format](https://momentjscom.readthedocs.io/en/latest/moment/01-parsing/03-string-format/) if you want to override the default. + +#### DatePickerFormatForValidation + +If a custom date format is provided it will be used on the client-side. A matching string in [C# date format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) should be provided, so that server-side validation will match the expected format of the entry. + ### reCAPTCHA v2 field type configuration #### PublicKey & PrivateKey diff --git a/13/umbraco-forms/developer/configuration/type-details.md b/13/umbraco-forms/developer/configuration/type-details.md index 723648393c3..3ea7f40e003 100644 --- a/13/umbraco-forms/developer/configuration/type-details.md +++ b/13/umbraco-forms/developer/configuration/type-details.md @@ -52,6 +52,8 @@ The intention is to be able to make available details such as IDs, aliases and p **Settings:** * `Placeholder` +* `ShowLabel` +* `AriaLabel` @@ -502,6 +504,7 @@ The intention is to be able to make available details such as IDs, aliases and p * `UseCurrentPage` * `DocType` * `ValueField` +* `CaptionField` * `ListGrandChildren` * `OrderBy` diff --git a/13/umbraco-forms/developer/extending/adding-a-fieldtype.md b/13/umbraco-forms/developer/extending/adding-a-fieldtype.md index 04b710c8d27..844487fb7c7 100644 --- a/13/umbraco-forms/developer/extending/adding-a-fieldtype.md +++ b/13/umbraco-forms/developer/extending/adding-a-fieldtype.md @@ -106,6 +106,16 @@ If working with Umbraco 9 or earlier versions, you'll find the `Views\Partials\F For Umbraco 10 and above, we've moved to [distributing the theme as part of a Razor Class Library](../../upgrading/version-specific.md#views-and-client-side-files) so the folder won't exist. However, you can create it for your custom field type. If you would like to reference the partial views of the default theme, you can download them as mentioned in the [Themes](../themes.md) article. +### Read-only partial view + +When rendering a multi-page form, editors have the option to display a summary page where the entries can be viewed before submitting. + +To support this, a read-only view of the field is necessary. + +For most fields, nothing is required here, as the default read-only display defined in the built-in `ReadOnly.cshtml` file suffices. + +However, if you want to provide a custom read-only display for your field, you can do so by creating a second partial view. This should be named with a `.ReadOnly` suffix. For this example, you would create `FieldType.Slider.ReadOnly.cshtml`. + ## Umbraco backoffice view The final step involves building the HTML view which will be rendered in Umbraco as an example of how our end result will look: diff --git a/13/umbraco-forms/developer/security.md b/13/umbraco-forms/developer/security.md index bae23477dcc..d8d3855c914 100644 --- a/13/umbraco-forms/developer/security.md +++ b/13/umbraco-forms/developer/security.md @@ -13,6 +13,7 @@ Within the _Form Security_ tree, each user with a backoffice account is listed. * _Manage forms_ - user can create and edit form definitions * _View entries_ - user can view the submitted entries * _Edit entries_ - user can edit the submitted entries +* _Delete entries_ - user can delete the submitted entries * _Manage datasources_ - user can create and edit datasource definitions * _Manage prevalue sources_ - user can create and edit prevalue source definitions diff --git a/13/umbraco-forms/developer/themes.md b/13/umbraco-forms/developer/themes.md index 6f4caf62e8f..a94283d8954 100644 --- a/13/umbraco-forms/developer/themes.md +++ b/13/umbraco-forms/developer/themes.md @@ -41,6 +41,78 @@ Umbraco Forms conditional JavaScript logic depends on some CSS classes currently If adding or amending client-side scripts, you need to copy the `Script.cshtml` file from the `default` themes folder. In your copy, amend the `.js` references to reference your own script files. +### Shipping Themes in a Razor Class Library + +Umbraco Forms provides it's built-in themes as part of a Razor Class Library for ease of distribution. This can be useful for custom themes, particularly those used in multiple solutions or released as an Umbraco package. + +From Forms 13.3 it is possible to do this for custom themes. + +1. Create a new Razor Class Library project to hold the theme. +2. Create the necessary Partial Views for your theme within `Views\Partials\Forms\Themes\`. +3. Provide the names of the files in your theme via an implementation of `ITheme`. + * For example, if only overriding a single file, your class would look like the code snippet below: + +```csharp +using Umbraco.Forms.Core.Interfaces; + +public class MyCustomTheme : ITheme +{ + private const string FilePathFormat = "{0}/{1}/{2}.cshtml"; + + public virtual string Name => "my-custom-theme"; + + public virtual IEnumerable Files => + [ + string.Format(FilePathFormat, Core.Constants.System.ThemesPath, Name, "FieldTypes/FieldType.Textfield"), + ]; +} +``` + +4. Register the themes you want to use via a composer: + +```csharp +public class MyComposer : IComposer +{ + public void Compose(IUmbracoBuilder builder) + { + builder.Themes() + .Add(); + } +} +``` + +Your theme will now be available in the Theme Picker and the partial view files will be used when rendering forms. + +#### Email Templates + +Email templates provided for the send email workflow can be provided in a Razor Class Library similar to the Theme files. + +The partial view will be created in `Views\Partials\Forms\Emails`. + +It's made available via an implementation of `IEmailTemplate`: + +```csharp +using Umbraco.Forms.Core.Interfaces; + +public class MyCustomEmailTemplate : IEmailTemplate +{ + public virtual string FileName => "My-Custom-Email-Template.cshtml"; +} +``` + +And registered with: + +```csharp +public class MyComposer : IComposer +{ + public void Compose(IUmbracoBuilder builder) + { + builder.EmailTemplates() + .Add(); + } +} +``` + ## Using a Theme To use a theme with a Form use the "Insert Form" macro where you will be presented with the options of the form you wish to insert along with an option to pick a theme. This displays the list of theme folders found at `Views/Partials/Forms/Themes`. diff --git a/13/umbraco-forms/editor/creating-a-form/fieldtypes/date.md b/13/umbraco-forms/editor/creating-a-form/fieldtypes/date.md index 45f523966fb..8f53ace41b3 100644 --- a/13/umbraco-forms/editor/creating-a-form/fieldtypes/date.md +++ b/13/umbraco-forms/editor/creating-a-form/fieldtypes/date.md @@ -4,7 +4,7 @@ The date picker uses a front-end library called [Pikaday](https://github.com/dbu ![Date picker on frontend](images/date-picker.png) -Pikaday date picker can be localised based on the page the Form is rendered on. +Pikaday date picker can be localized based on the page the Form is rendered on. The date picker displays the picked date in the required locale. Using JavaScript, a hidden field is updated with a standard date format to send to the server for storing record submissions. This avoids the locale mixing up the dates. @@ -12,20 +12,7 @@ To achieve localized date, a Razor partial view is included at `/Views/Partials/ The **DatePicker.cshtml** includes the `moment-with-locales.min.js` library to help with the date locale formatting and the appropriate changes to Pikaday to support the locales. If you wish to use a different DatePicker component, edit the **DatePicker.cshtml** file as per your needs. -## Configure the Year range +## Configure the date picker -The Date picker has a configuration setting to control the number of years shown in the picker. The default value is 10 years. +The Date picker has [configuration settings](../../../developer/configuration/README.md#date-picker-field-type-configuration) to control the number of years shown in the picker and the date format. -You can configure the settings in the `appSettings.json` file: - -```json - "Forms": { - "FieldTypes": { - "DatePicker": { - "DatePickerYearRange": 10 - } - } - } -``` - -Update `DatePickerYearRange` to a higher number (for example: 100) to increase the numbers of years available in the Date picker. diff --git a/13/umbraco-forms/editor/creating-a-form/form-settings.md b/13/umbraco-forms/editor/creating-a-form/form-settings.md index 912820fcda1..11b62c35322 100644 --- a/13/umbraco-forms/editor/creating-a-form/form-settings.md +++ b/13/umbraco-forms/editor/creating-a-form/form-settings.md @@ -57,6 +57,24 @@ The autocomplete setting for the overall form can be changed from the default of

Form Settings Autocomplete

+### Multi-page forms + +The settings available in this section allow you to customize how multi-page forms are presented to site visitors. + +

Multi-Page Form Settings

+ +| Option | Description | +| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| **Paging display** | Select whether paging information is displayed at the top and/or bottom of the form. | +| **Paging display format** | Provide a format string for the paging details. By default `Page {0} of {1}` is used which will be replaced as, for example, `Page 1 of 4`. | +| **Page caption format** | Provide a format string for rendering the page captions. By default `Page {0}` is used which will be replaced as, for example, `Page 1`. If a caption for the page has been provided, it will be used instead. | +| **Show summary page** | Select whether a summary page is displayed at the end of multi-page forms, where a user can review their entry before submitting. | +| **Summary heading** | Provide the heading for the summary page. | + +{% hint style="info" %} +These options will only be available if [the feature is configured for display](../../developer/configuration/README.md#enablemultipageformsettings). +{% endhint %} + ### Moderation Enabling this feature allows the moderator to manage the approval status of a form. This can be used in a number of scenarios. For example, if the form submission will be publicly shown, you can control which are published. diff --git a/13/umbraco-forms/editor/creating-a-form/images/multi-page-forms.png b/13/umbraco-forms/editor/creating-a-form/images/multi-page-forms.png new file mode 100644 index 00000000000..83c3a49d10c Binary files /dev/null and b/13/umbraco-forms/editor/creating-a-form/images/multi-page-forms.png differ diff --git a/13/umbraco-forms/release-notes.md b/13/umbraco-forms/release-notes.md index 967ea98aaea..5fc40b291cd 100644 --- a/13/umbraco-forms/release-notes.md +++ b/13/umbraco-forms/release-notes.md @@ -17,6 +17,36 @@ If you are upgrading to a new major version, you can find information about the This section contains the release notes for Umbraco Forms 13 including all changes for this version. +#### [**13.3.0-rc1**](https://github.com/umbraco/Umbraco.Forms.Issues/issues?q=is%3Aissue+is%3Aclosed+label%3Arelease%2F13.3.0) **(October 25th 2024)** + +##### Multi-step forms + +The 13.3 release of Forms contains features that can improve the user experience of completing multi-page forms. + +We have added the option for [editors to choose to display paging details on the forms](./editor/creating-a-form/form-settings.md#multi-page-forms). This will allow those completing forms to get a better understanding of progress as well as see details of the pages still to be completed. [#281](https://github.com/umbraco/Umbraco.Forms.Issues/issues/281) [#648](https://github.com/umbraco/Umbraco.Forms.Issues/issues/648). + +These options are enabled and configured by editors in the Forms settings section on a per-form basis. We also provide a [configuration-based toggle for the feature as a whole](./developer/configuration/README.md#enablemultipageformsettings). In this way, editors can be given access to use the feature only once the styling or theme is prepared. + +##### Ship themes in Razor Class Libraries + +Forms ships it's themes and email templates as part of a razor class library for ease of distribution. With this release we make that feature [available to your own custom themes and templates](./developer/themes.md#shipping-themes-in-a-razor-class-library) (or those created by package developers) [#795](https://github.com/umbraco/Umbraco.Forms.Issues/issues/795). + +##### Date picker field type + +We have made a couple of updates to the Date Picker field type. The format for the field can now be provided in configuration [#1276](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1276). And you can now override and localize the aria-label provided for assistive technologies such as screen readers [https://github.com/umbraco/Umbraco.Forms.Issues/issues/1082](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1082). + +##### Finer grained entries permissions + +To allow finer control over editor permissions, we have introduced a "delete entries" setting for users and user groups. Thus you can now give editors explicit permissions to view, edit, or delete entries [#1303](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1303). + +##### Other + +Other bug fixes included in the release: + +* Fix issue with single checkbox triggering a condition on a field on a subsequent page [#1304](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1304). +* Improve cross-platform check when exporting to Excel. +* Fixed issue where sensitive data flag on a field could not be set for new fields added to a form [#1309](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1309). + #### [**13.2.5**](https://github.com/umbraco/Umbraco.Forms.Issues/issues?q=is%3Aissue+is%3Aclosed+label%3Arelease%2F13.2.5) **(October 3rd 2024)** * Handled "chunked" authentication cookie in protection of file uploads saved in the media file system [#11](https://github.com/umbraco/Umbraco.Forms.Issues/issues/11#issuecomment-2376788751). diff --git a/14/umbraco-forms/SUMMARY.md b/14/umbraco-forms/SUMMARY.md index 0667960b549..ec400c6ca2f 100644 --- a/14/umbraco-forms/SUMMARY.md +++ b/14/umbraco-forms/SUMMARY.md @@ -34,6 +34,7 @@ ## Developer +* [Property Editors](developer/property-editors.md) * [Preparing Your Frontend](developer/prepping-frontend.md) * [Rendering Forms](developer/rendering-forms.md) * [Rendering Forms Scripts](developer/rendering-scripts.md) diff --git a/14/umbraco-forms/developer/configuration/README.md b/14/umbraco-forms/developer/configuration/README.md index 643a99d8315..e4a973279ba 100644 --- a/14/umbraco-forms/developer/configuration/README.md +++ b/14/umbraco-forms/developer/configuration/README.md @@ -57,7 +57,12 @@ For illustration purposes, the following structure represents the full set of op "AutocompleteAttribute": "", "DaysToRetainSubmittedRecordsFor": 0, "DaysToRetainApprovedRecordsFor": 0, - "DaysToRetainRejectedRecordsFor": 0 + "DaysToRetainRejectedRecordsFor": 0, + "ShowPagingOnMultiPageForms": "None", + "PagingDetailsFormat": "Page {0} of {1}", + "PageCaptionFormat": "Page {0}", + "ShowSummaryPageOnMultiPageForms": false, + "SummaryLabel": "Summary of Entry" }, "RemoveProvidedEmailTemplate": false, "RemoveProvidedFormTemplates": false, @@ -88,7 +93,8 @@ For illustration purposes, the following structure represents the full set of op "UseSemanticFieldsetRendering": false, "DisableClientSideValidationDependencyCheck": false, "DisableRelationTracking": false, - "TrackRenderedFormsStorageMethod": "HttpContextItems" + "TrackRenderedFormsStorageMethod": "HttpContextItems", + "EnableMultiPageFormSettings": false }, "Security": { "DisallowedFileUploadExtensions": "config,exe,dll,asp,aspx", @@ -104,7 +110,9 @@ For illustration purposes, the following structure represents the full set of op }, "FieldTypes": { "DatePicker": { - "DatePickerYearRange": 10 + "DatePickerYearRange": 10, + "DatePickerFormat": "LL", + "DatePickerFormatForValidation": "" }, "Recaptcha2": { "PublicKey": "", @@ -305,6 +313,26 @@ Applies as per `DaysToRetainSubmittedRecordsFor` but for records in the 'approve Applies as per `DaysToRetainSubmittedRecordsFor` but for records in the 'rejected' state. +### ShowPagingOnMultiPageForms + +Defines whether and where paging details are displayed for multi-page forms. + +### PagingDetailsFormat + +Defines the paging details format for multi-page forms. + +### PageCaptionFormat + +Defines the page caption format for multi-page forms. + +### ShowSummaryPageOnMultiPageForms + +Defines whether summary pages are on by default for multi-page forms. + +### SummaryLabel + +Defines the default summary label for multi-page forms. + ## Package options configuration ### IgnoreWorkFlowsOnEdit @@ -417,6 +445,14 @@ By default, `HttpContext.Items` is used as the storage mechanism for this tracki You can optionally revert to the legacy behavior of using `TempData` by changing this setting from the default of `HttpContextItems` to `TempData`. +## EnableMultiPageFormSettings + +This setting determines whether [multi-page form settings](../../editor/creating-a-form/form-settings.md#multi-page-forms) are available to editors. + +By default the value is `false`. This ensures that, in an upgrade scenario, before the feature is used the necessary styling and/or theme updates can be prepared. + +To make the feature available to editors set the value to `true`. + ## Security configuration ### DisallowedFileUploadExtensions @@ -481,6 +517,14 @@ For more information, see the [Headless/AJAX Forms](../ajaxforms.md) article. This setting is used to configure the Date Picker form field range of years that is available in the date picker. By default this is a small range of 10 years. +#### DatePickerFormat + +A custom date format can be provided in [momentjs format](https://momentjscom.readthedocs.io/en/latest/moment/01-parsing/03-string-format/) if you want to override the default. + +#### DatePickerFormatForValidation + +If a custom date format is provided it will be used on the client-side. A matching string in [C# date format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) should be provided, so that server-side validation will match the expected format of the entry. + ### reCAPTCHA v2 field type configuration #### PublicKey & PrivateKey diff --git a/14/umbraco-forms/developer/configuration/type-details.md b/14/umbraco-forms/developer/configuration/type-details.md index 723648393c3..3ea7f40e003 100644 --- a/14/umbraco-forms/developer/configuration/type-details.md +++ b/14/umbraco-forms/developer/configuration/type-details.md @@ -52,6 +52,8 @@ The intention is to be able to make available details such as IDs, aliases and p **Settings:** * `Placeholder` +* `ShowLabel` +* `AriaLabel` @@ -502,6 +504,7 @@ The intention is to be able to make available details such as IDs, aliases and p * `UseCurrentPage` * `DocType` * `ValueField` +* `CaptionField` * `ListGrandChildren` * `OrderBy` diff --git a/14/umbraco-forms/developer/extending/adding-a-fieldtype.md b/14/umbraco-forms/developer/extending/adding-a-fieldtype.md index eb82c021682..4d09dc48899 100644 --- a/14/umbraco-forms/developer/extending/adding-a-fieldtype.md +++ b/14/umbraco-forms/developer/extending/adding-a-fieldtype.md @@ -125,6 +125,16 @@ If working with Umbraco 9 or earlier versions, you'll find the `Views\Partials\F For Umbraco 10 and above, we've moved to [distributing the theme as part of a Razor Class Library](../../upgrading/version-specific.md#views-and-client-side-files) so the folder won't exist. However, you can create it for your custom field type. If you would like to reference the partial views of the default theme, you can download them as mentioned in the [Themes](../themes.md) article. +### Read-only partial view + +When rendering a multi-page form, editors have the option to display a summary page where the entries can be viewed before submitting. + +To support this, a read-only view of the field is necessary. + +For most fields, nothing is required here, as the default read-only display defined in the built-in `ReadOnly.cshtml` file suffices. + +However, if you want to provide a custom read-only display for your field, you can do so by creating a second partial view. This should be named with a `.ReadOnly` suffix. For this example, you would create `FieldType.Slider.ReadOnly.cshtml`. + ## Field Settings Field settings will be managed in the backoffice by editors who will create forms using the custom field type. These settings can be added to the C# class as properties with a `Setting` attribute: diff --git a/14/umbraco-forms/developer/extending/setting-types.md b/14/umbraco-forms/developer/extending/setting-types.md index 1fc97022da6..fe1d84c4ba4 100644 --- a/14/umbraco-forms/developer/extending/setting-types.md +++ b/14/umbraco-forms/developer/extending/setting-types.md @@ -37,8 +37,9 @@ Some are defined with the Umbraco CMS and some ship with the Forms package. | Umb.PropertyEditorUi.Toggle | CMS | Uses a single checkbox for entry | | | Umb.PropertyEditorUi.UploadField | CMS | Used for selection of a file | The "Text file" prevalue source | | Forms.PropertyEditorUi.DataTypePicker | Forms | Uses a datatype picker | The "Umbraco prevalues" prevalue source | -| Forms.PropertyEditorUi.DocumentTypePicker | Forms | Uses a document picker | The "Umbraco nodes" prevalue source | -| Forms.PropertyEditorUi.DocumentMapper | Forms | Used for selection of a documenttype | The "Save as Umbraco node" workflow | +| Forms.PropertyEditorUi.DocumentTypePicker | Forms | Uses a Document Type picker | The "Umbraco nodes" prevalue source | +| Forms.PropertyEditorUi.DocumentTypeFieldPicker | Forms | Uses to select fields from a Document Type | The "Umbraco nodes" prevalue source | +| Forms.PropertyEditorUi.DocumentMapper | Forms | Used for mapping of fields from a Document Type | The "Save as Umbraco node" workflow | | Forms.PropertyEditorUi.EmailTemplatePicker | Forms | Used for selection of an email template | The "Send email with Razor template" workflow | | Forms.PropertyEditorUi.FieldMapper | Forms | Used to map fields from a form to required aliases | The "Send to URL" workflow | | Forms.PropertyEditorUi.Password | Forms | Uses password text box for entry | | diff --git a/14/umbraco-forms/developer/images/form-picker-config.png b/14/umbraco-forms/developer/images/form-picker-config.png new file mode 100644 index 00000000000..d7c600b894e Binary files /dev/null and b/14/umbraco-forms/developer/images/form-picker-config.png differ diff --git a/14/umbraco-forms/developer/images/form-pickers.png b/14/umbraco-forms/developer/images/form-pickers.png new file mode 100644 index 00000000000..037e25fabe0 Binary files /dev/null and b/14/umbraco-forms/developer/images/form-pickers.png differ diff --git a/14/umbraco-forms/developer/property-editors.md b/14/umbraco-forms/developer/property-editors.md new file mode 100644 index 00000000000..5789e0b4a17 --- /dev/null +++ b/14/umbraco-forms/developer/property-editors.md @@ -0,0 +1,39 @@ +# Property Editors + +When forms are created, editors will want to add them to pages in Umbraco. To do this they need a Document Type with a property that uses a Data Type based on a Form Picker property editor. + +Umbraco Forms provides three variations of a form picker. + +

Form Pickers

+ +Most commonly used is **Form Picker (single)**. This will allow the editor to select a single form for display on page. + +Rarely but feasibly, you will have a requirement to present multiple forms on a page. Should this be appropriate, you can use **Form Picker (multiple)**. + +{% hint style="info" %} +Internally this is used for presenting the list of "Allowed forms" you can select when setting up a form picker datatype. +{% endhint %} + +Finally you can provide further flexibility for the editor to select not only a form, but also the theme and redirect as well. For this you will use the **Form Details Picker**. + +## Configuring the Data Type + +Each property editor allows you to restrict the forms that can be chosen with the Data Type. You do this by setting either or both of the list of "Allowed folders" or "Allowed forms". + +

Form Picker DataType Configuration

+ +The "Form Details Picker" also allows you to select whether a theme or redirect selection is available. + +## Property Value Conversion + +The type of a property based on the Form Picker presented in a Razor class library is as follows: + +| Option | Description | +| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| **Form Picker (single)** | Single GUID representing the form's identifier. | +| **Form Picker (multiple)** | Collection of GUIDs representing the form identifiers. | +| **Form Details Picker** | Instance of the `Umbraco.Forms.Core.PropertyEditors.Models.FormDetails` object, which has properties for the form, theme and redirect. | + +## Content Delivery API Expansion + +Each reference to a form supports expansion via the Umbraco Content Delivery API, as described in the [Working with the CMS Content Delivery API](./ajaxforms.md#working-with-the-cms-content-delivery-api) article. diff --git a/14/umbraco-forms/developer/security.md b/14/umbraco-forms/developer/security.md index c7648747f57..df6ea219a39 100644 --- a/14/umbraco-forms/developer/security.md +++ b/14/umbraco-forms/developer/security.md @@ -13,6 +13,7 @@ Within the _Forms_ > _Security_ tree, each user with a backoffice account is lis * Manage Forms - user can create and edit form definitions * View Entries - user can view the submitted entries * Edit Entries - user can edit the submitted entries +* Delete entries - user can delete the submitted entries * Manage Workflows - user can create and edit workflow items * Manage Datasources - user can create and edit datasource definitions * Manage Prevalue Sources - user can create and edit prevalue source definitions diff --git a/14/umbraco-forms/developer/themes.md b/14/umbraco-forms/developer/themes.md index 130c00e5ebe..c13c783146a 100644 --- a/14/umbraco-forms/developer/themes.md +++ b/14/umbraco-forms/developer/themes.md @@ -42,6 +42,78 @@ Umbraco Forms conditional JavaScript logic depends on some CSS classes currently If adding or amending client-side scripts, you need to copy the `Script.cshtml` file from the `default` themes folder. In your copy, amend the `.js` references to reference your own script files. +### Shipping Themes in a Razor Class Library + +Umbraco Forms provides it's built-in themes as part of a Razor Class Library for ease of distribution. This can be useful for custom themes, particularly those used in multiple solutions or released as an Umbraco package. + +From Forms 14.2 it is possible to do this for custom themes. + +1. Create a new Razor Class Library project to hold the theme. +2. Create the necessary Partial Views for your theme within `Views\Partials\Forms\Themes\`. +3. Provide the names of the files in your theme via an implementation of `ITheme`. + * For example, if only overriding a single file, your class would look like the code snippet below: + +```csharp +using Umbraco.Forms.Core.Interfaces; + +public class MyCustomTheme : ITheme +{ + private const string FilePathFormat = "{0}/{1}/{2}.cshtml"; + + public virtual string Name => "my-custom-theme"; + + public virtual IEnumerable Files => + [ + string.Format(FilePathFormat, Core.Constants.System.ThemesPath, Name, "FieldTypes/FieldType.Textfield"), + ]; +} +``` + +4. Register the themes you want to use via a composer: + +```csharp +public class MyComposer : IComposer +{ + public void Compose(IUmbracoBuilder builder) + { + builder.Themes() + .Add(); + } +} +``` + +Your theme will now be available in the Theme Picker and the partial view files will be used when rendering forms. + +#### Email Templates + +Email templates provided for the send email workflow can be provided in a Razor Class Library similar to the Themes files. + +The partial view will be created in `Views\Partials\Forms\Emails`. + +It's made available via an implementation of `IEmailTemplate`: + +```csharp +using Umbraco.Forms.Core.Interfaces; + +public class MyCustomEmailTemplate : IEmailTemplate +{ + public virtual string FileName => "My-Custom-Email-Template.cshtml"; +} +``` + +And registered with: + +```csharp +public class MyComposer : IComposer +{ + public void Compose(IUmbracoBuilder builder) + { + builder.EmailTemplates() + .Add(); + } +} +``` + ## Using a Theme When rendering a form in a view file, you can specify which theme to use with the form. diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/date.md b/14/umbraco-forms/editor/creating-a-form/fieldtypes/date.md index 4bcd31c31dc..73f841dc893 100644 --- a/14/umbraco-forms/editor/creating-a-form/fieldtypes/date.md +++ b/14/umbraco-forms/editor/creating-a-form/fieldtypes/date.md @@ -4,7 +4,7 @@ The date picker uses a front-end library called [Pikaday](https://github.com/dbu ![Date picker on frontend](images/date-v14.png) -Pikaday date picker can be localised based on the page the Form is rendered on. +Pikaday date picker can be localized based on the page the Form is rendered on. The date picker displays the picked date in the required locale. Using JavaScript, a hidden field is updated with a standard date format to send to the server for storing record submissions. This avoids the locale mixing up the dates. @@ -12,20 +12,7 @@ To achieve localized date, a Razor partial view is included at `/Views/Partials/ The **DatePicker.cshtml** includes the `moment-with-locales.min.js` library to help with the date locale formatting and the appropriate changes to Pikaday to support the locales. If you wish to use a different DatePicker component, edit the **DatePicker.cshtml** file as per your needs. -## Configure the Year range +## Configure the date picker -The Date picker has a configuration setting to control the number of years shown in the picker. The default value is 10 years. +The Date picker has [configuration settings](../../../developer/configuration/README.md#date-picker-field-type-configuration) to control the number of years shown in the picker and the date format. -You can configure the settings in the `appSettings.json` file: - -```json - "Forms": { - "FieldTypes": { - "DatePicker": { - "DatePickerYearRange": 10 - } - } - } -``` - -Update `DatePickerYearRange` to a higher number (for example: 100) to increase the numbers of years available in the Date picker. diff --git a/14/umbraco-forms/editor/creating-a-form/form-settings.md b/14/umbraco-forms/editor/creating-a-form/form-settings.md index 00860f33ad8..2139b30efed 100644 --- a/14/umbraco-forms/editor/creating-a-form/form-settings.md +++ b/14/umbraco-forms/editor/creating-a-form/form-settings.md @@ -57,6 +57,24 @@ The autocomplete setting for the overall form can be changed from the default of ![Form Settings Autocomplete](images/FormSettingsAutocomplete-V14.png) +### Multi-page forms + +The settings available in this section allow you to customize how multi-page forms are presented to site visitors. + +

Multi-Page Form Settings

+ +| Option | Description | +| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| **Paging display** | Select whether paging information is displayed at the top and/or bottom of the form. | +| **Paging display format** | Provide a format string for the paging details. By default `Page {0} of {1}` is used which will be replaced as, for example, `Page 1 of 4`. | +| **Page caption format** | Provide a format string for rendering the page captions. By default `Page {0}` is used which will be replaced as, for example, `Page 1`. If a caption for the page has been provided, it will be used instead. | +| **Show summary page** | Select whether a summary page is displayed at the end of multi-page forms, where a user can review their entry before submitting. | +| **Summary heading** | Provide the heading for the summary page. | + +{% hint style="info" %} +These options will only be available if [the feature is configured for display](../../developer/configuration/README.md#enablemultipageformsettings). +{% endhint %} + ### Moderation Enabling this feature allows the moderator to manage the approval status of a form. This can be used in a number of scenarios. For example, if the form submission will be publicly shown, you can control which are published. diff --git a/14/umbraco-forms/release-notes.md b/14/umbraco-forms/release-notes.md index 4b378849f82..a0dcde5e368 100644 --- a/14/umbraco-forms/release-notes.md +++ b/14/umbraco-forms/release-notes.md @@ -18,6 +18,52 @@ If you are upgrading to a new major version, you can find information about the This section contains the release notes for Umbraco Forms 14 including all changes for this version. +#### [**14.2.0-rc1**](https://github.com/umbraco/Umbraco.Forms.Issues/issues?q=is%3Aissue+is%3Aclosed+label%3Arelease%2F14.2.0) **October 25th 2024** + +##### Multi-step forms + +The 14.2 release of Forms contains features that can improve the user experience of completing multi-page forms. + +We have added the option for [editors to choose to display paging details on the forms](./editor/creating-a-form/form-settings.md#multi-page-forms). This will allow those completing forms to get a better understanding of progress as well as see details of the pages still to be completed. [#281](https://github.com/umbraco/Umbraco.Forms.Issues/issues/281) [#648](https://github.com/umbraco/Umbraco.Forms.Issues/issues/648). + +These options are enabled and configured by editors in the Forms settings section on a per-form basis. We also provide a [configuration-based toggle for the feature as a whole](./developer/configuration/README.md#enablemultipageformsettings). In this way, editors can be given access to use the feature only once the styling or theme is prepared. + +##### Form picker enhancements + +Another improvement if found in the [form picker property editors](./developer/property-editors.md). We now support restriction of which forms can be selected by folder rather than only by individual forms. + +A second "form details picker" is also available, allowing editors the option of selecting the form, theme and redirect via a single property editor. + +##### Ship themes in Razor Class Libraries + +Forms ships it's themes and email templates as part of a razor class library for ease of distribution. With this release we make that feature [available to your own custom themes and templates](./developer/themes.md#shipping-themes-in-a-razor-class-library) (or those created by package developers) [#795](https://github.com/umbraco/Umbraco.Forms.Issues/issues/795). + +##### Date picker field type + +We've also made a couple of updates to the date picker field type. The format for the field can now be provided in configuration [#1276](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1276). And you can now override and localize the aria label provided for assistive technologies such as screen readers [https://github.com/umbraco/Umbraco.Forms.Issues/issues/1082](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1082). + +##### Umbraco documents prevalue source type + +When creating a prevalue source based on Umbraco documents, you can now select custom properties for the value or caption. Previously you had a choice of the content item's `Id`, `Key` or `Name`. We've extended this to allow the selection of any properties defined on the selected Document Type [#1195](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1195). + +##### Finer grained entries permissions + +To allow finer control over editor permissions, we have introduced a "delete entries" setting for users and user groups. Thus you can now give editors explicit permissions to view, edit, or delete entries [#1303](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1303). + +##### Backoffice localization + +Finally thanks to a kind contribution from [Erik-Jan Westendorp](https://github.com/erikjanwestendorp) the backoffice is now translated into Dutch [#1264](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1264). + +##### Other + +Other bug fixes included in the release: + +* Reverted entry list to display most recent first. +* Fixed issue with display of prevalue captions in the entry list. +* Fixed issue on restoring values of checkbox and radio lists when navigating backward on multi-page forms. +* Fix issue with single checkbox triggering a condition on a field on a subsequent page [#1304](https://github.com/umbraco/Umbraco.Forms.Issues/issues/1304). +* Improve cross-platform check when exporting to Excel. + #### [**14.1.5**](https://github.com/umbraco/Umbraco.Forms.Issues/issues?q=is%3Aissue+is%3Aclosed+label%3Arelease%2F14.1.5) **(October 3rd 2024)** * Handled "chunked" authentication cookie in protection of file uploads saved in the media file system [#11](https://github.com/umbraco/Umbraco.Forms.Issues/issues/11#issuecomment-2376788751). diff --git a/15/umbraco-forms/SUMMARY.md b/15/umbraco-forms/SUMMARY.md index 8ebc2710844..bc49db69108 100644 --- a/15/umbraco-forms/SUMMARY.md +++ b/15/umbraco-forms/SUMMARY.md @@ -20,6 +20,7 @@ ## Developer +* [Property Editors](developer/property-editors.md) * [Preparing Your Frontend](developer/prepping-frontend.md) * [Configuration](developer/configuration/README.md) diff --git a/15/umbraco-forms/developer/configuration/README.md b/15/umbraco-forms/developer/configuration/README.md index 13075430999..16cb6685fc8 100644 --- a/15/umbraco-forms/developer/configuration/README.md +++ b/15/umbraco-forms/developer/configuration/README.md @@ -57,7 +57,12 @@ For illustration purposes, the following structure represents the full set of op "AutocompleteAttribute": "", "DaysToRetainSubmittedRecordsFor": 0, "DaysToRetainApprovedRecordsFor": 0, - "DaysToRetainRejectedRecordsFor": 0 + "DaysToRetainRejectedRecordsFor": 0, + "ShowPagingOnMultiPageForms": "None", + "PagingDetailsFormat": "Page {0} of {1}", + "PageCaptionFormat": "Page {0}", + "ShowSummaryPageOnMultiPageForms": false, + "SummaryLabel": "Summary of Entry" }, "RemoveProvidedFormTemplates": false, "FormElementHtmlIdPrefix": "", @@ -87,7 +92,8 @@ For illustration purposes, the following structure represents the full set of op "UseSemanticFieldsetRendering": false, "DisableClientSideValidationDependencyCheck": false, "DisableRelationTracking": false, - "TrackRenderedFormsStorageMethod": "HttpContextItems" + "TrackRenderedFormsStorageMethod": "HttpContextItems", + "EnableMultiPageFormSettings": true }, "Security": { "DisallowedFileUploadExtensions": "config,exe,dll,asp,aspx", @@ -103,7 +109,9 @@ For illustration purposes, the following structure represents the full set of op }, "FieldTypes": { "DatePicker": { - "DatePickerYearRange": 10 + "DatePickerYearRange": 10, + "DatePickerFormat": "LL", + "DatePickerFormatForValidation": "" }, "Recaptcha2": { "PublicKey": "", @@ -300,6 +308,26 @@ Applies as per `DaysToRetainSubmittedRecordsFor` but for records in the 'approve Applies as per `DaysToRetainSubmittedRecordsFor` but for records in the 'rejected' state. +### ShowPagingOnMultiPageForms + +Defines whether and where paging details are displayed for multi-page forms. + +### PagingDetailsFormat + +Defines the paging details format for multi-page forms. + +### PageCaptionFormat + +Defines the page caption format for multi-page forms. + +### ShowSummaryPageOnMultiPageForms + +Defines whether summary pages are on by default for multi-page forms. + +### SummaryLabel + +Defines the default summary label for multi-page forms. + ## Package options configuration ### IgnoreWorkFlowsOnEdit @@ -412,6 +440,12 @@ By default, `HttpContext.Items` is used as the storage mechanism for this tracki You can optionally revert to the legacy behavior of using `TempData` by changing this setting from the default of `HttpContextItems` to `TempData`. +## EnableMultiPageFormSettings + +This setting determines whether [multi-page form settings](../../editor/creating-a-form/form-settings.md#multi-page-forms) are available to editors. + +By default the value is `true`. To disable the feature, set the value to `false`. + ## Security configuration ### DisallowedFileUploadExtensions @@ -476,6 +510,14 @@ For more information, see the [Headless/AJAX Forms](../ajaxforms.md) article. This setting is used to configure the Date Picker form field range of years that is available in the date picker. By default this is a small range of 10 years. +#### DatePickerFormat + +A custom date format can be provided in [momentjs format](https://momentjscom.readthedocs.io/en/latest/moment/01-parsing/03-string-format/) if you want to override the default. + +#### DatePickerFormatForValidation + +If a custom date format is provided it will be used on the client side. A matching string in [C# date format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) should be provided, so that server-side validation will match the expected format of the entry. + ### reCAPTCHA v2 field type configuration #### PublicKey & PrivateKey diff --git a/15/umbraco-forms/developer/configuration/type-details.md b/15/umbraco-forms/developer/configuration/type-details.md index 723648393c3..e8c869dfa58 100644 --- a/15/umbraco-forms/developer/configuration/type-details.md +++ b/15/umbraco-forms/developer/configuration/type-details.md @@ -502,6 +502,7 @@ The intention is to be able to make available details such as IDs, aliases and p * `UseCurrentPage` * `DocType` * `ValueField` +* `CaptionField` * `ListGrandChildren` * `OrderBy` diff --git a/15/umbraco-forms/developer/extending/adding-a-fieldtype.md b/15/umbraco-forms/developer/extending/adding-a-fieldtype.md index df26c3bca9a..a14f7feca06 100644 --- a/15/umbraco-forms/developer/extending/adding-a-fieldtype.md +++ b/15/umbraco-forms/developer/extending/adding-a-fieldtype.md @@ -125,6 +125,16 @@ If working with Umbraco 9 or earlier versions, you'll find the `Views\Partials\F For Umbraco 10 and above, we've moved to [distributing the theme as part of a Razor Class Library](../../upgrading/version-specific/#views-and-client-side-files) so the folder won't exist. However, you can create it for your custom field type. If you would like to reference the partial views of the default theme, you can download them as mentioned in the [Themes](../themes.md) article. +### Read-only partial view + +When rendering a multi-page form, editors have the option to display a summary page where the entries can be viewed before submitting. + +To support this, a read-only view of the field is necessary. + +For most fields, nothing is required here, as the default read-only display defined in the built-in `ReadOnly.cshtml` file suffices. + +However, if you want to provide a custom read-only display for your field, you can do so by creating a second partial view. This should be named with a `.ReadOnly` suffix. For this example, you would create `FieldType.Slider.ReadOnly.cshtml`. + ## Field Settings Field settings will be managed in the backoffice by editors who will create forms using the custom field type. These settings can be added to the C# class as properties with a `Setting` attribute: diff --git a/15/umbraco-forms/developer/extending/setting-types.md b/15/umbraco-forms/developer/extending/setting-types.md index 1fc97022da6..fe1d84c4ba4 100644 --- a/15/umbraco-forms/developer/extending/setting-types.md +++ b/15/umbraco-forms/developer/extending/setting-types.md @@ -37,8 +37,9 @@ Some are defined with the Umbraco CMS and some ship with the Forms package. | Umb.PropertyEditorUi.Toggle | CMS | Uses a single checkbox for entry | | | Umb.PropertyEditorUi.UploadField | CMS | Used for selection of a file | The "Text file" prevalue source | | Forms.PropertyEditorUi.DataTypePicker | Forms | Uses a datatype picker | The "Umbraco prevalues" prevalue source | -| Forms.PropertyEditorUi.DocumentTypePicker | Forms | Uses a document picker | The "Umbraco nodes" prevalue source | -| Forms.PropertyEditorUi.DocumentMapper | Forms | Used for selection of a documenttype | The "Save as Umbraco node" workflow | +| Forms.PropertyEditorUi.DocumentTypePicker | Forms | Uses a Document Type picker | The "Umbraco nodes" prevalue source | +| Forms.PropertyEditorUi.DocumentTypeFieldPicker | Forms | Uses to select fields from a Document Type | The "Umbraco nodes" prevalue source | +| Forms.PropertyEditorUi.DocumentMapper | Forms | Used for mapping of fields from a Document Type | The "Save as Umbraco node" workflow | | Forms.PropertyEditorUi.EmailTemplatePicker | Forms | Used for selection of an email template | The "Send email with Razor template" workflow | | Forms.PropertyEditorUi.FieldMapper | Forms | Used to map fields from a form to required aliases | The "Send to URL" workflow | | Forms.PropertyEditorUi.Password | Forms | Uses password text box for entry | | diff --git a/15/umbraco-forms/developer/property-editors.md b/15/umbraco-forms/developer/property-editors.md new file mode 100644 index 00000000000..6533d12e5be --- /dev/null +++ b/15/umbraco-forms/developer/property-editors.md @@ -0,0 +1,39 @@ +# Property Editors + +When forms are created, editors will want to add them to pages in Umbraco. To do this they need a Document Type with a property that uses a Data Type based on a Form Picker property editor. + +Umbraco Forms provides three variations of a form picker. + +

Form Pickers

+ +Most commonly used is **Form Picker (single)**. This will allow the editor to select a single form for display on page. + +Rarely but feasibly, you will have a requirement to present multiple forms on a page. Should this be appropriate, you can use **Form Picker (multiple)**. + +{% hint style="info" %} +Internally this is used for presenting the list of "Allowed forms" you can select when setting up a form picker datatype. +{% endhint %} + +Finally you can provide further flexibility for the editor to select not only a form but also the theme and redirect as well. For this you will use the **Form Details Picker**. + +## Configuring the Data Type + +Each property editor allows you to restrict the forms that can be chosen with the Data Type. You do this by setting either or both of the list of "Allowed folders" or "Allowed forms". + +

Form Picker DataType Configuration

+ +The "Form Details Picker" also allows you to select whether a theme or redirect selection is available. + +## Property Value Conversion + +The type of a property based on the Form Picker presented in a Razor class library is as follows: + +| Option | Description | +| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| **Form Picker (single)** | Single GUID representing the form's identifier. | +| **Form Picker (multiple)** | Collection of GUIDs representing the form identifiers. | +| **Form Details Picker** | Instance of the `Umbraco.Forms.Core.PropertyEditors.Models.FormDetails` object, which has properties for the form, theme and redirect. | + +## Content Delivery API Expansion + +Each reference to a form supports expansion via the Umbraco Content Delivery API, as described [here](./ajaxforms.md#working-with-the-cms-content-delivery-api). diff --git a/15/umbraco-forms/developer/security.md b/15/umbraco-forms/developer/security.md index 124dc163afb..0de32d3b399 100644 --- a/15/umbraco-forms/developer/security.md +++ b/15/umbraco-forms/developer/security.md @@ -13,6 +13,7 @@ Within the _Forms_ > _Security_ tree, each user with a backoffice account is lis * Manage Forms - user can create and edit form definitions * View Entries - user can view the submitted entries * Edit Entries - user can edit the submitted entries +* Delete entries - user can delete the submitted entries * Manage Workflows - user can create and edit workflow items * Manage Datasources - user can create and edit datasource definitions * Manage Prevalue Sources - user can create and edit prevalue source definitions diff --git a/15/umbraco-forms/developer/themes.md b/15/umbraco-forms/developer/themes.md index 130c00e5ebe..1afe0666b37 100644 --- a/15/umbraco-forms/developer/themes.md +++ b/15/umbraco-forms/developer/themes.md @@ -42,6 +42,78 @@ Umbraco Forms conditional JavaScript logic depends on some CSS classes currently If adding or amending client-side scripts, you need to copy the `Script.cshtml` file from the `default` themes folder. In your copy, amend the `.js` references to reference your own script files. +### Shipping Themes in a Razor Class Library + +Umbraco Forms provides it's built-in themes as part of a Razor Class Library for ease of distribution. This can be useful for custom themes, particularly those used in multiple solutions or released as an Umbraco package. + +It is also possible to do this for custom themes. + +1. Create a new Razor Class Library project to hold the theme. +2. Create the necessary Partial Views for your theme within `Views\Partials\Forms\Themes\`. +3. Provide the names of the files in your theme via an implementation of `ITheme`. + * For example, if only overriding a single file, your class would look like the code snippet below: + +```csharp +using Umbraco.Forms.Core.Interfaces; + +public class MyCustomTheme : ITheme +{ + private const string FilePathFormat = "{0}/{1}/{2}.cshtml"; + + public virtual string Name => "my-custom-theme"; + + public virtual IEnumerable Files => + [ + string.Format(FilePathFormat, Core.Constants.System.ThemesPath, Name, "FieldTypes/FieldType.Textfield"), + ]; +} +``` + +4. Register the themes you want to use via a composer: + +```csharp +public class MyComposer : IComposer +{ + public void Compose(IUmbracoBuilder builder) + { + builder.Themes() + .Add(); + } +} +``` + +Your theme will now be available in the Theme Picker and the partial view files will be used when rendering forms. + +#### Email Templates + +Email templates provided for the send email workflow can be provided in a Razor Class Library similar to the Theme files. + +The partial view will be created in `Views\Partials\Forms\Emails`. + +It's made available via an implementation of `IEmailTemplate`: + +```csharp +using Umbraco.Forms.Core.Interfaces; + +public class MyCustomEmailTemplate : IEmailTemplate +{ + public virtual string FileName => "My-Custom-Email-Template.cshtml"; +} +``` + +And registered with: + +```csharp +public class MyComposer : IComposer +{ + public void Compose(IUmbracoBuilder builder) + { + builder.EmailTemplates() + .Add(); + } +} +``` + ## Using a Theme When rendering a form in a view file, you can specify which theme to use with the form. diff --git a/15/umbraco-forms/editor/creating-a-form/fieldtypes/date.md b/15/umbraco-forms/editor/creating-a-form/fieldtypes/date.md index 4bcd31c31dc..73f841dc893 100644 --- a/15/umbraco-forms/editor/creating-a-form/fieldtypes/date.md +++ b/15/umbraco-forms/editor/creating-a-form/fieldtypes/date.md @@ -4,7 +4,7 @@ The date picker uses a front-end library called [Pikaday](https://github.com/dbu ![Date picker on frontend](images/date-v14.png) -Pikaday date picker can be localised based on the page the Form is rendered on. +Pikaday date picker can be localized based on the page the Form is rendered on. The date picker displays the picked date in the required locale. Using JavaScript, a hidden field is updated with a standard date format to send to the server for storing record submissions. This avoids the locale mixing up the dates. @@ -12,20 +12,7 @@ To achieve localized date, a Razor partial view is included at `/Views/Partials/ The **DatePicker.cshtml** includes the `moment-with-locales.min.js` library to help with the date locale formatting and the appropriate changes to Pikaday to support the locales. If you wish to use a different DatePicker component, edit the **DatePicker.cshtml** file as per your needs. -## Configure the Year range +## Configure the date picker -The Date picker has a configuration setting to control the number of years shown in the picker. The default value is 10 years. +The Date picker has [configuration settings](../../../developer/configuration/README.md#date-picker-field-type-configuration) to control the number of years shown in the picker and the date format. -You can configure the settings in the `appSettings.json` file: - -```json - "Forms": { - "FieldTypes": { - "DatePicker": { - "DatePickerYearRange": 10 - } - } - } -``` - -Update `DatePickerYearRange` to a higher number (for example: 100) to increase the numbers of years available in the Date picker. diff --git a/15/umbraco-forms/editor/creating-a-form/form-settings.md b/15/umbraco-forms/editor/creating-a-form/form-settings.md index 00860f33ad8..2139b30efed 100644 --- a/15/umbraco-forms/editor/creating-a-form/form-settings.md +++ b/15/umbraco-forms/editor/creating-a-form/form-settings.md @@ -57,6 +57,24 @@ The autocomplete setting for the overall form can be changed from the default of ![Form Settings Autocomplete](images/FormSettingsAutocomplete-V14.png) +### Multi-page forms + +The settings available in this section allow you to customize how multi-page forms are presented to site visitors. + +

Multi-Page Form Settings

+ +| Option | Description | +| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| **Paging display** | Select whether paging information is displayed at the top and/or bottom of the form. | +| **Paging display format** | Provide a format string for the paging details. By default `Page {0} of {1}` is used which will be replaced as, for example, `Page 1 of 4`. | +| **Page caption format** | Provide a format string for rendering the page captions. By default `Page {0}` is used which will be replaced as, for example, `Page 1`. If a caption for the page has been provided, it will be used instead. | +| **Show summary page** | Select whether a summary page is displayed at the end of multi-page forms, where a user can review their entry before submitting. | +| **Summary heading** | Provide the heading for the summary page. | + +{% hint style="info" %} +These options will only be available if [the feature is configured for display](../../developer/configuration/README.md#enablemultipageformsettings). +{% endhint %} + ### Moderation Enabling this feature allows the moderator to manage the approval status of a form. This can be used in a number of scenarios. For example, if the form submission will be publicly shown, you can control which are published.