diff --git a/14/umbraco-forms/developer/healthchecks/README.md b/14/umbraco-forms/developer/healthchecks/README.md
index 5786234aaa3..d9b34c2e10b 100644
--- a/14/umbraco-forms/developer/healthchecks/README.md
+++ b/14/umbraco-forms/developer/healthchecks/README.md
@@ -29,9 +29,9 @@ To run the health check:
1. Navigate to the **Health Check** dashboard in the **Settings** section in the Umbraco backoffice.
-2. Click on the **Forms** button and select **Check Group**. You'll see a result that looks something like this: \\
+2. Click on the **Forms** button and select **Perform checks**. You'll see a result that looks something like this:
-
+
If you have a full set of green ticks, then you're all good - and no need to read on!
diff --git a/14/umbraco-forms/developer/healthchecks/images/healthcheck-v14.png b/14/umbraco-forms/developer/healthchecks/images/healthcheck-v14.png
new file mode 100644
index 00000000000..eb16cd812d5
Binary files /dev/null and b/14/umbraco-forms/developer/healthchecks/images/healthcheck-v14.png differ
diff --git a/14/umbraco-forms/developer/images/user-start-folders-v14.png b/14/umbraco-forms/developer/images/user-start-folders-v14.png
new file mode 100644
index 00000000000..d0df3ca2c23
Binary files /dev/null and b/14/umbraco-forms/developer/images/user-start-folders-v14.png differ
diff --git a/14/umbraco-forms/developer/images/wehbook-events-v14.png b/14/umbraco-forms/developer/images/wehbook-events-v14.png
new file mode 100644
index 00000000000..5d737e3c0c9
Binary files /dev/null and b/14/umbraco-forms/developer/images/wehbook-events-v14.png differ
diff --git a/14/umbraco-forms/developer/security.md b/14/umbraco-forms/developer/security.md
index f96210c0924..11ca9b73871 100644
--- a/14/umbraco-forms/developer/security.md
+++ b/14/umbraco-forms/developer/security.md
@@ -4,23 +4,24 @@ description: How to secure access to Umbraco Forms data and functionality.
# Security
-Umbraco Forms has a backoffice security model integrated with Umbraco users. Details are managed in the _Users_ section of the backoffice, within a tree named _Form Security_.
+Umbraco Forms has a backoffice security model integrated with Umbraco users. Details are managed in the _Forms_ section of the backoffice, within a tree named _Security_.
-## User based permissions
+## User-based permissions
-Within the _Form Security_ tree, each user with a backoffice account is listed. Clicking on a user allows each functional permission to be set:
+Within the _Forms_ > _Security_ tree, each user with a backoffice account is listed. Clicking on a user allows each functional permission to be set:
-* _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
-* _Manage datasources_ - user can create and edit datasource definitions
-* _Manage prevalue sources_ - user can create and edit prevalue source definitions
+* 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
+* 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
For further control, each form is listed and the user can be granted or denied access to each as appropriate.
As new forms are created, users will automatically be granted access to them, unless the configuration setting `DefaultUserAccessToNewForms` has been set to a value of `Deny`.
-## Start folders
+## Start Folders
When form definitions are configured for storage in the database, it allows for the creation of folders to group forms within. It's also possible to define one or more start folders for a user. This is done in order to limit their access to a subset of the forms available.
@@ -30,7 +31,7 @@ If a single start folder is selected, that will act as the root of the tree view
If more than one start folder is selected, they will appear underneath the root of the tree view of forms. The user will have access to only those folders and their descendant folders and forms.
-
+
## User group based permissions
@@ -59,7 +60,7 @@ Start folders are enabled for User Groups. They work in a similar way as the gro
* If the user doesn't have a specific user permission set, they are granted access to all the unique folders the groups they are part of have access to.
* If they are part of any group that has access to the forms section, permission to manage forms and no start folders defined, they will have access to the root of the Forms tree and be able to access all folders and Forms.
-### Migrating to user group based permissions
+### Migrating to user group-based permissions
In introducing the user group based permissions, we've taken care to ensure a migration path. This is available for those existing installations running on older versions of Umbraco Forms. In that situation, we'd recommend the following approach.
diff --git a/14/umbraco-forms/developer/webhooks.md b/14/umbraco-forms/developer/webhooks.md
index 75a8c279026..790d2d77a8d 100644
--- a/14/umbraco-forms/developer/webhooks.md
+++ b/14/umbraco-forms/developer/webhooks.md
@@ -4,9 +4,9 @@ Umbraco Forms will register events for workflow operations that you can use with
Workflows are operations that you can associate with form submission, approval, or rejection actions. You can use these where you need to notify external systems of the success or failure of a workflow.
-On the Umbraco **Settings** > **Webhooks** dashboard, you can configure webhooks to respond to workflows.
+On the Umbraco **Settings** > **Advanced** > **Webhooks** dashboard, you can configure webhooks to respond to workflows.
-
+
You can amend the registration of workflow events in code.
diff --git a/14/umbraco-forms/editor/attaching-workflows/README.md b/14/umbraco-forms/editor/attaching-workflows/README.md
index 2f8e2532fef..dfa8dccfaec 100644
--- a/14/umbraco-forms/editor/attaching-workflows/README.md
+++ b/14/umbraco-forms/editor/attaching-workflows/README.md
@@ -10,7 +10,7 @@ By default, when a Form is submitted the record data is stored in the database.
The behaviour to display a message to the user who submitted the form can be configured by clicking on the built-in first workflow step. This step is labelled **Submit message/Go to page**, and it can also configure the redirection to another page.
-
+
If a value is selected for **Go to page**, it will be used to redirect to that page once the form has been submitted.
@@ -18,7 +18,7 @@ If no value is selected, the message in **Message on submit** is displayed to th
By default, the message is created and rendered in plain text. If you need to add formatting to the message, toggle the **Format message in rich text** button.
-
+
## Video Tutorial
@@ -30,17 +30,17 @@ Attaching Workflows to Umbraco Forms
At the bottom of your Form, a default workflow is already attached to the Form, as well as an option to configure the workflows.
-
+
Clicking **Configure workflow** will give you the option to configure existing workflows, as well as setup new ones.
-
+
### Choose a Workflow
A new workflow can be of different types and Umbraco Forms ships with a few default ones. You can find an overview of the types in the [Workflow types](workflow-types.md) article.
-
+
### Update Type-specific Settings
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/MessageOnSubmit-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/MessageOnSubmit-v14.png
new file mode 100644
index 00000000000..85a648b5bc1
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/MessageOnSubmit-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/MessageOnSubmitRichText-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/MessageOnSubmitRichText-v14.png
new file mode 100644
index 00000000000..1d89cf21e13
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/MessageOnSubmitRichText-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/WorkflowsAddModel-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/WorkflowsAddModel-v14.png
new file mode 100644
index 00000000000..5eaa074a6e8
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/WorkflowsAddModel-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/WorkflowsPage-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/WorkflowsPage-v14.png
new file mode 100644
index 00000000000..e6c0a82009c
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/WorkflowsPage-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/change-record-state-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/change-record-state-v14.png
new file mode 100644
index 00000000000..8153682ffde
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/change-record-state-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/configure-workflows-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/configure-workflows-v14.png
new file mode 100644
index 00000000000..7951c5b6f24
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/configure-workflows-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/email-slack-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/email-slack-v14.png
new file mode 100644
index 00000000000..202af5757e0
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/email-slack-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/post-as-xml-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/post-as-xml-v14.png
new file mode 100644
index 00000000000..5d04edbb4ff
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/post-as-xml-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/save-as-an-xml-file-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/save-as-an-xml-file-v14.png
new file mode 100644
index 00000000000..ff5775ab668
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/save-as-an-xml-file-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/save-as-content-node-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/save-as-content-node-v14.png
new file mode 100644
index 00000000000..f50bdd2487e
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/save-as-content-node-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/send-email-razor-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/send-email-razor-v14.png
new file mode 100644
index 00000000000..5710b6b84f8
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/send-email-razor-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/send-email-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/send-email-v14.png
new file mode 100644
index 00000000000..b0efad6e23a
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/send-email-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/send-to-URL-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/send-to-URL-v14.png
new file mode 100644
index 00000000000..3fad02e3ed2
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/send-to-URL-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/images/xslt-email-v14.png b/14/umbraco-forms/editor/attaching-workflows/images/xslt-email-v14.png
new file mode 100644
index 00000000000..098799744ba
Binary files /dev/null and b/14/umbraco-forms/editor/attaching-workflows/images/xslt-email-v14.png differ
diff --git a/14/umbraco-forms/editor/attaching-workflows/workflow-types.md b/14/umbraco-forms/editor/attaching-workflows/workflow-types.md
index fa9e994f1c8..03ff025ac32 100644
--- a/14/umbraco-forms/editor/attaching-workflows/workflow-types.md
+++ b/14/umbraco-forms/editor/attaching-workflows/workflow-types.md
@@ -16,13 +16,13 @@ Workflow Types in Umbraco Forms
## **Change Record State**
-
+
Used to automatically **Approve Record**, **Reject Record** or **Delete Record** once it is submitted. Configure words that you want to match and select whether these words should trigger an approval or deletion of the record.
## **Post as XML**
-
+
Used to post the Form as an XML to a specified URL. The following configuration can be set:
@@ -36,7 +36,7 @@ Used to post the Form as an XML to a specified URL. The following configuration
## **Save as an XML file**
-
+
Saves the result of the Form as an XML file by using XSLT. The following configuration can be set:
@@ -53,7 +53,7 @@ When storing the files within the `wwwroot` or `App_Plugins` folders, the files
## **Save as Umbraco Content Node**
-
+
Saves a submitted Form as a new content node. You need to choose a Document type and match the fields in the Form with the properties on the selected Document Type.
@@ -73,7 +73,7 @@ The following configuration can be set:
## **Send Email**
-
+
Sends the result of the Form to the specified email address. The following configuration can be set:
@@ -121,7 +121,7 @@ The fallback behavior also applies to the other email workflows.
## **Send Email with Template (Razor)**
-
+
Uses a template to send the results of the Form to a specified email address.
@@ -143,7 +143,7 @@ The following configuration can be set:
## **Send Form to URL**
-
+
Sends the Form to a URL either as a HTTP POST or GET. The following configuration can be set:
@@ -200,7 +200,7 @@ namespace RequestSaver.Controllers
## **Send XSLT Transformed Email**
-
+
Sends the result of the Form to an email address with full control over the email contents by providing an xslt file. The following configuration can be set:
@@ -215,7 +215,7 @@ Sends the result of the Form to an email address with full control over the emai
## **Slack**
-
+
Allows to post the Form data to a specific channel on Slack. The following configuration can be set:
diff --git a/14/umbraco-forms/editor/creating-a-form/README.md b/14/umbraco-forms/editor/creating-a-form/README.md
index 0a759d05629..9c41316ae81 100644
--- a/14/umbraco-forms/editor/creating-a-form/README.md
+++ b/14/umbraco-forms/editor/creating-a-form/README.md
@@ -6,47 +6,46 @@ In this article, we'll take a look at the basic steps of creating a Form and add
You can manage the Forms in the **Forms** section of the Umbraco backoffice. You need to have access to the section in order to see it.
-If you do not see the **Forms** section, you might need to request access from the site Administrator. An Administrator can give permission to view the **Forms** section. This is done from within the **Users** section of the backoffice.
+If you do not see the **Forms** section, you might need to request access from the site Administrator. An Administrator can give permission to view the **Forms** section. This is done from the **Users** section of the backoffice.
-
+
## Creating a Form
To create a Form, follow these steps:
1. Navigate to the **Forms** section.
-2. Click **...** next to the Forms folder.
+2. Click **...** next to the Forms folder.
- 
-3. The **Create a new Form** dialog opens.
+ 
+3. Select **Create** > **New Form**.
- 
-4. Select **Empty Form**. The Form Designer opens in the editor.
+ 
+4. The Form Designer opens in the editor.
- 
+ 
5. By default, there is a page, a fieldset, and a container available. The rest of the Form has to be added using the interface.
-6. Enter the **Name** for the Form. Let's call it _Our first form_.
+6. Enter a **Name** for the Form. Let's call it _Our first form_.
-
-7. **[Optional]** Enter the **Page Name**. We'll call it _The first page_. Click **Add new page** at the bottom of the Forms designer to add more pages.
+ 
+7. *[Optional]* Enter the **Page Name**. We'll call it _The first page_. Click **Add new page** at the bottom of the Forms designer to add more pages.
-
-8. **[Optional]** Enter the **Group Name**. Click **Add new group** to add another group.
+ 
+8. *[Optional]* Enter the **Group Name**. Click **Add new group** to add another group.
-
-9. Click the **Add Question** button to add a new field.
+ 
+9. Click the **Add Question** button to add a new field.
-
-10. The **Add Question** dialog opens.
+ 
+10. The **Choose field type** dialog opens.
- 
-11. Enter the following details:
+ 
+11. Select **Short Answer**. Enter the following details in the **Edit field** window:
| Field Name | Value |
| ------------------ | -------------------- |
| Enter question | Name |
| Enter help text | Enter your name here |
- | Choose answer type | Short answer |
12. In the **Sensitive data** field, choose if the field stores sensitive data. Once selected, the data from this field will be prevented from being downloaded and viewed by users who do not have permission to do so. Only members of the sensitive data user group will see this option of downloading.
13. Enter a **Default Value** for the field.
14. Add a **Placeholder** to make it easier for the user to fill in the Form.
@@ -58,9 +57,9 @@ To create a Form, follow these steps:
Some of the additional settings are dependent on which answer type was chosen. For example, since we selected _Short Answer_ as our answer type we got two additional settings (Default Value and Placeholder).
19. Once the configuration is completed, click **Submit**. You will see that the field has been added to the Form designer.
-
+ 
-To edit a field that has already been added to the Form, click the little **cog** icon next to the field to open the dialog. To delete a field or a group, click the **Recycle Bin** icon.
+To edit a field, click the **cog** icon next to the field to open the dialog. To copy the field and its properties, click the **copy** icon. To delete a field or a group, click the **Recycle Bin** icon.
### Structuring the Form
@@ -68,62 +67,81 @@ To edit a field that has already been added to the Form, click the little **cog*
Once you've added a few fields to your Form, you might want to change the order of questions. To do so, click **Reorder** in the top-right corner of the Form designer.
-
+
When reordering your Form, you can drag and drop the fields to make it look the way you want. Click **I am done reordering** to get back to the Form designer.
-
+
#### Form Pages
Forms can be grouped into pages. When rendered, each page will be presented one at a time to the user. They will need to complete the first page before moving onto the second and can navigate back and forth between pages.
-To add a new page to the top or bottom of a form use the buttons available in the top right of the editing view.
+To add a new page at the start or end of the form, use the buttons in the top right corner of the editing view.
-
+
You can also add a new page directly to the bottom of the form via the **Add new page** button. This will appear below other pages when at least one exists.
+
+
### Form Groups
With a page, form fields can be arranged into groups. These will display all together on a single page but can be styled so the fields are appropriately grouped in fieldsets.
New groups are added via the **Add new group** button.
+
+
## Form Columns
-The last level of structure are columns that can be created within a group. To set the number of columns click the **cog** icon next to the group. You will then be able to add or move fields to the new columns created.
+The last level of structure are columns that can be created within a group. To set the number of columns, click the **cog** icon next to the Group Name. You can now add or move fields to the new columns created.
+
## Saving the Form
-Once you are satisfied with the Form, you can save the design by clicking the **Save** button.
+Once have created the Form, save the design by clicking the **Save** button.
+
+
## Organizing Forms in Folders
-If installation of the product is configured for storage of form definitions in the database, you will have the option to store forms within folders. If you are planning to create a number of them, this may help with organization and locating them once created for modification.
+If the product installation is set up to store form definitions in the database, you will be able to store forms within folders. This can help with organization and makes it easier to locate the forms for modification, especially if you plan to create many Forms.
+
+To create a folder:
+
+1. Go to the **Forms** section.
+2. Click ... next to Forms folder.
+3. Select **Create**.
+4. Select **New Folder**.
+
+ 
+5. Enter a **Folder Name**.
+6. Click **Create Folder**.
+
+ 
+
+You can create folders within folders, rename, move, import folders, or delete them.
-To create a folder, access the same dialog used for creating a form. Here, you'll have the option to create a folder, for which you need to provide a name.
+
-You can create folders within folders, rename, move and delete them. You also have the ability to move or copy forms into folders, all via the tree operations available from the **...** menu.
+To move or copy forms into folders, click the **...** next to the Form and select **Move**.
-
+
-## Adding the Form to the Umbraco site
+## Adding the Form to the Umbraco Site
To add the Form, follow these steps:
1. Navigate to the **Content** section of the Umbraco Backoffice.
-2. Select the content page where you want to insert the Form. The page you choose should either have a Rich Text Editor (RTE) field, a Grid Editor, or a form picker all of which you can add in the **Settings** section under **Document Types**.
+2. Select the content page where you want to insert the Form. The page you choose should have a form picker which you can add in the **Settings** section under **Document Types**.
- 
-3. Click the **Insert macro** button in the toolbar of the RTE or Grid. The **Select Macro** dialog opens.
-4. Click **Add** under **Choose a Form** and select the Form you want to insert. You will be able to select from the full list of forms. If available on your installation, you will also be able to select using a folder based view, which can be quicker to navigate when many forms have been prepared.
+ 
+3. Click **Choose** and select the Form you want to insert. You will be able to select from the full list of forms. If available on your installation, you will also be able to select using a folder based view, which can be quicker to navigate when many forms have been prepared.
- 
-5. **[Optional]** Click **Add** under **Theme** to choose which theme the Form should use.
-6. Finally you have an option to **Exclude Scripts**.
-7. Click **Submit**.
-8. The Form is inserted on to your page. Click the **Save and publish** button.
+ 
+4. Click **Choose**.
+5. The Form is inserted on your page. Click **Save and publish**.
- 
+ 
diff --git a/14/umbraco-forms/editor/creating-a-form/conditional-logic.md b/14/umbraco-forms/editor/creating-a-form/conditional-logic.md
index b40b5585367..4ee8c8c0511 100644
--- a/14/umbraco-forms/editor/creating-a-form/conditional-logic.md
+++ b/14/umbraco-forms/editor/creating-a-form/conditional-logic.md
@@ -8,20 +8,18 @@ You can achieve this setting by using **conditional logic** on Fields.
Take a look at the following:
-
+
-In this case, it makes sense to **only** show the email or phone field when the corresponding option is selected in the **How should we contact you?** field.
+In this case, it makes sense to *only* show the email or phone field when the corresponding option is selected in the **How should we contact you?** field.
To enable conditions for the **Email** and **Phone** fields, do the following:
1. Click the `cog` wheel next to the **Email** and **Phone** field. The **Edit question** dialog opens.
-2. Select **Enable Conditions** in the **Conditions** section.
+2. Enable **Conditions**. The condition field displays more options:
-
-3. Enabling the condition field displays more options:
+ 
-
-4. Set the appropriate conditions and click **Submit**.
+3. Set the appropriate conditions and click **Submit**.
### Action and Logic Types
@@ -41,17 +39,17 @@ When adding a new condition, you'll need to select the field where you want to e
In this example, we only want to show the **Phone** field if the value of the **How should we contact you** field is `Phone`.
-
+
Similarly, you can display the **Email** field, if the value of the **How should we contact you** field is `Email`. You can see the conditions added to each field in the Forms designer:
-
+
## Result
When both the conditions have been set as shown above, this is how it will look on the frontend:
-
+
In this example, we have only selected **Phone** but it is possible to choose both _Phone_\* and **Email** and display both the fields.
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/README.md b/14/umbraco-forms/editor/creating-a-form/fieldtypes/README.md
index 2f3de1486d7..f36c166aeb5 100644
--- a/14/umbraco-forms/editor/creating-a-form/fieldtypes/README.md
+++ b/14/umbraco-forms/editor/creating-a-form/fieldtypes/README.md
@@ -1,51 +1,51 @@
# Overview Of The Field Types
-Umbraco Forms comes with a bunch of default Field Types (also known as **Answer Types**) you can choose from when adding new fields to your Forms.
+Umbraco Forms comes with a bunch of default Field Types also known as **Answer Types**. You can choose from different field types when adding new fields to your Forms.
By default, the following Field Types are available:
-* **Short Answer**: A textbox allows up to 250 characters.
+* **Short Answer**: A textbox allows up to 250 characters.
- 
-* **Long Answer**: A bigger text field that allows multiline text and more than 250 characters.
+ 
+* **Long Answer**: A bigger text field that allows multiline text and more than 250 characters.
- 
-* [Date](date.md): Displays a picker that allows the user to select a date.
+ 
+* [Date](date.md): Displays a picker that allows the user to select a date.
- 
-* **Checkbox**: Displays a single checkbox that can be checked or not.
+ 
+* **Checkbox**: Displays a single checkbox that can be checked or not.
- 
-* [File Upload](fileupload.md): Allows user to select and upload a local file.
+ 
+* [File Upload](fileupload.md): Allows user to select and upload a local file.
- 
-* **Password**: Allows to type a password. The input is not visible when typing.
+ 
+* **Password**: Allows to type a password. The input is not visible when typing.
- 
-* **Multiple Choice**: Displays a list of items with a checkbox for each item where the user can select multiple options.
+ 
+* **Multiple Choice**: Displays a list of items with a checkbox for each item where the user can select multiple options.
- 
-* **Data Consent**: A field for the purpose of asking for data consent. By default, this field is added to all new Forms.
+ 
+* **Data Consent**: A field for the purpose of asking for data consent. By default, this field is added to all new Forms.
- 
-* **Dropdown**: Displays a list of items in a drop down box where the user can select a single option.
+ 
+* **Dropdown**: Displays a list of items in a drop down box where the user can select a single option.
- 
-* **Single Choice**: Displays a list of items with a radio button for each item where the user can select a single option.
+ 
+* **Single Choice**: Displays a list of items with a radio button for each item where the user can select a single option.
- 
-* **Title and Description**: Displays a read-only title and description for a set of form fields.
+ 
+* **Title and Description**: Displays a read-only title and description for a set of form fields.
- 
-* **Rich Text**: Displays read-only formatted text that can be used to provide additional information and links within a form.
+ 
+* **Rich Text**: Displays read-only formatted text that can be used to provide additional information and links within a form.
- 
-* **Hidden**: A hidden field allows developers to include data that cannot be seen or modified by users when a Form is submitted.
+ 
+* **Hidden**: A hidden field allows developers to include data that cannot be seen or modified by users when a Form is submitted.
- 
-* [Recaptcha V2](recaptcha2.md): The field displays a single checkbox for the user to select in order to validate the Form.
+ 
+* [Recaptcha V2](recaptcha2.md): The field displays a single checkbox for the user to select in order to validate the Form.
- 
-* [Recaptcha V3 with Score](recaptcha3.md): This field returns a score for each request without user interaction. The score is based on user interactions with the site and enables you to take an appropriate action for your site based on the score.
+ 
+* [Recaptcha V3 with Score](recaptcha3.md): This field returns a score for each request without user interaction. The score is based on user interactions with the site and enables you to take an appropriate action for your site based on the score.
- 
+ 
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 45f523966fb..4bcd31c31dc 100644
--- a/14/umbraco-forms/editor/creating-a-form/fieldtypes/date.md
+++ b/14/umbraco-forms/editor/creating-a-form/fieldtypes/date.md
@@ -2,7 +2,7 @@
The date picker uses a front-end library called [Pikaday](https://github.com/dbushell/Pikaday) to display a UI to pick dates.
-
+
Pikaday date picker can be localised based on the page the Form is rendered on.
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/fileupload.md b/14/umbraco-forms/editor/creating-a-form/fieldtypes/fileupload.md
index 3b0475b751f..4a201ca618b 100644
--- a/14/umbraco-forms/editor/creating-a-form/fieldtypes/fileupload.md
+++ b/14/umbraco-forms/editor/creating-a-form/fieldtypes/fileupload.md
@@ -4,7 +4,7 @@ The File Upload field allows the users to upload a file along with the Form on y
In this article, you will find details about the configuration options you have for the File Upload field.
-
+
## Predefined allowed File Types
@@ -12,21 +12,22 @@ You can choose to specify which files you want to allow the user to upload, when
To allow only specific files:
-1. Select the File Type checkbox the user should be able to upload.
+1. Select the specific File Types the user should be able to upload.
2. Click **Submit**.
{% hint style="info" %}
-We recommend selecting **Allow only specified files**, to limit malicious code to be uploaded, whenever the user is submitting the Form.
+We recommend selecting only specified files, to limit malicious code to be uploaded, whenever the user is submitting the Form.
{% endhint %}
## User Defined Allowed File Types
-If the list of predefined file types do not include a specific file type, you can add additional ones.
+If the list of predefined file types does not include a specific file type, you can add additional ones.
To add new file type:
-1. Type a file extension name in the **User defined allowed file types** field and click add.
-2. Click **Submit**.
+1. Type a file extension name in the **User defined allowed file types** field.
+2. Click **+**.
+3. Click **Submit**.
## Server-side file validation
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/CheckBox-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/CheckBox-v14.png
new file mode 100644
index 00000000000..0236d22b7bd
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/CheckBox-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/dataconsent-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/dataconsent-v14.png
new file mode 100644
index 00000000000..c79ab2a79b7
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/dataconsent-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/date-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/date-v14.png
new file mode 100644
index 00000000000..97e766caeb8
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/date-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/dropdown-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/dropdown-v14.png
new file mode 100644
index 00000000000..675c49aef4c
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/dropdown-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/fileupload-types-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/fileupload-types-v14.png
new file mode 100644
index 00000000000..fe6d83959e6
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/fileupload-types-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/fileupload-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/fileupload-v14.png
new file mode 100644
index 00000000000..a0dbb52c581
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/fileupload-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/hidden-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/hidden-v14.png
new file mode 100644
index 00000000000..bfdfe08a630
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/hidden-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/longanswer-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/longanswer-v14.png
new file mode 100644
index 00000000000..009387ada19
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/longanswer-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/multiplechoice-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/multiplechoice-v14.png
new file mode 100644
index 00000000000..1e09a543229
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/multiplechoice-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/password-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/password-v14.png
new file mode 100644
index 00000000000..94909e503df
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/password-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/recaptcha2-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/recaptcha2-v14.png
new file mode 100644
index 00000000000..87d6f6e63c6
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/recaptcha2-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/recaptcha3-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/recaptcha3-v14.png
new file mode 100644
index 00000000000..c68b59b5eb3
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/recaptcha3-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/richtext-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/richtext-v14.png
new file mode 100644
index 00000000000..0ec23abba93
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/richtext-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/shortanswer-V14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/shortanswer-V14.png
new file mode 100644
index 00000000000..95dfabe1fca
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/shortanswer-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/singlechoice-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/singlechoice-v14.png
new file mode 100644
index 00000000000..1c36d09f476
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/singlechoice-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/titleanddescription-v14.png b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/titleanddescription-v14.png
new file mode 100644
index 00000000000..00b2877899d
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/fieldtypes/images/titleanddescription-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/form-info.md b/14/umbraco-forms/editor/creating-a-form/form-info.md
index 6309b9efcac..ce615b50b51 100644
--- a/14/umbraco-forms/editor/creating-a-form/form-info.md
+++ b/14/umbraco-forms/editor/creating-a-form/form-info.md
@@ -1,25 +1,25 @@
# Form Information
-System information related to a form can be viewed via the "Info" tab.
+You can view the System information of the form in the **Info** tab.
To access the Form Information:
-1. Navigate to the **Forms** section.
+1. Go to the **Forms** section.
2. Open a Form you wish to customize.
-3. Click **Info** in the top-right corner of the screen.
+3. Click **Info** in the top-right corner of the screen.
-
+
## General
The "General" panel displays system information about the form. The date the form was created and last updated are shown. Also available are the integer and GUID identifiers that are useful when referring to the form in code.
-
+
-## Relations
+## References
Information about which pages a form is hosted on is tracked by Umbraco every time a content item is saved.
The list of pages where the form is hosted is shown in this section.
-
\ No newline at end of file
+
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 f6c6b123f8d..3a0f3311c34 100644
--- a/14/umbraco-forms/editor/creating-a-form/form-settings.md
+++ b/14/umbraco-forms/editor/creating-a-form/form-settings.md
@@ -1,14 +1,14 @@
# Form Settings
-In this article, you will find information about accessing the Forms Settings and the validations available to customize your Form.
+In this article, you will find information about accessing the Form Settings and the validations available to customize your Form.
To access the Form Settings:
-1. Navigate to the **Forms** section.
+1. Go to the **Forms** section.
2. Open a Form you wish to customize.
-3. Click **Settings** in the top-right corner of the screen.
+3. Click **Settings** in the top-right corner of the screen.
- 
+ 
## Settings Options
@@ -18,25 +18,25 @@ The following options are available in Forms Settings:
By default, all submitted records are saved in the database. This option allows you to view and export the saved records from the queries overview. If you do not want to store data (due to policies in your organisation), you can uncheck the box.
-
+
### Captions
Customize the labels of the **Submit**, **Next**, and **Previous** buttons used in your Form.
-
+
### Styling
Set a stylesheet to give your Form custom styling. You have an option to disable the default styling. Enabling the **Disable default stylesheet** option will prevent a default stylesheet to be added to the pages where the Form is placed.
-
+
### Validation
Define a message that is displayed when a field is mandatory, when a value is not supplied, or when the value is invalid.
-
+
The following Validations are available:
@@ -53,26 +53,26 @@ The following Validations are available:
The autocomplete setting for the overall form can be changed from the default of "None" to "On" or "Off". Setting this explicitly will control how the browser offers automatic prompts to the user when completing the form.
-
Form Settings Autocomplete
+
### 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.
-
+
-### Fields displayed
+### Fields Displayed
By default, a constant set of fields are displayed when form entries are shown in a list. You will see the first three fields in the form, plus some system information like the record state and the date it was created.
To customize this, turn off the "Display default fields" option and select the ones you wish to display.
-
Forms Settings Fields Displayed
+
-### Data retentions
+### Data Retentions
To help protect site visitor privacy, rules can be configured in this section for the automatic deletion of submissions. You can set how long to retain records for each state (submitted, approved or rejected).
A background service that carries out the actual removal of records needs to be [enabled in configuration](../../developer/configuration/#scheduledrecorddeletion). If that is not running, a notification will be displayed.
-
+
diff --git a/14/umbraco-forms/editor/creating-a-form/images/ContentExamples-v14.png b/14/umbraco-forms/editor/creating-a-form/images/ContentExamples-v14.png
new file mode 100644
index 00000000000..1631e9aa17f
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/ContentExamples-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/ContentExamplesWithFormV14.png b/14/umbraco-forms/editor/creating-a-form/images/ContentExamplesWithFormV14.png
new file mode 100644
index 00000000000..aad96c12297
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/ContentExamplesWithFormV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/ContentPageAddForm-v14.png b/14/umbraco-forms/editor/creating-a-form/images/ContentPageAddForm-v14.png
new file mode 100644
index 00000000000..8193eb6a31d
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/ContentPageAddForm-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/ExampleForm-v14.png b/14/umbraco-forms/editor/creating-a-form/images/ExampleForm-v14.png
new file mode 100644
index 00000000000..9c511f6dfe5
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/ExampleForm-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormDesignerAddFieldDialogV14.png b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerAddFieldDialogV14.png
new file mode 100644
index 00000000000..acca60a6587
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerAddFieldDialogV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormDesignerAddFieldV14.png b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerAddFieldV14.png
new file mode 100644
index 00000000000..532d3ce4218
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerAddFieldV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormDesignerFieldAddedV14.png b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerFieldAddedV14.png
new file mode 100644
index 00000000000..df5c3351312
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerFieldAddedV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormDesignerFormNamev14.png b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerFormNamev14.png
new file mode 100644
index 00000000000..633800eb6db
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerFormNamev14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormDesignerPageCaptionV14.png b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerPageCaptionV14.png
new file mode 100644
index 00000000000..abc1667bf8f
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerPageCaptionV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormDesignerPageGroupV14.png b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerPageGroupV14.png
new file mode 100644
index 00000000000..2eec93fa39f
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerPageGroupV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormDesignerSaveV14.png b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerSaveV14.png
new file mode 100644
index 00000000000..14277e102f0
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerSaveV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormDesignerStartV14.png b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerStartV14.png
new file mode 100644
index 00000000000..71d3d2f3908
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormDesignerStartV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormSettings-V14.png b/14/umbraco-forms/editor/creating-a-form/images/FormSettings-V14.png
new file mode 100644
index 00000000000..45713c06409
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormSettings-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormSettingsAutocomplete-V14.png b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsAutocomplete-V14.png
new file mode 100644
index 00000000000..7580de5f9d8
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsAutocomplete-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormSettingsCaptions-V14.png b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsCaptions-V14.png
new file mode 100644
index 00000000000..6cfe5eba5cb
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsCaptions-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormSettingsDataRetention-V14.png b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsDataRetention-V14.png
new file mode 100644
index 00000000000..1285c139069
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsDataRetention-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormSettingsFieldsDisplayed-V14.png b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsFieldsDisplayed-V14.png
new file mode 100644
index 00000000000..9193b25fbe4
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsFieldsDisplayed-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormSettingsModeration-V14.png b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsModeration-V14.png
new file mode 100644
index 00000000000..6ae72c1f72b
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsModeration-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormSettingsStyling-V14.png b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsStyling-V14.png
new file mode 100644
index 00000000000..bfd37303560
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsStyling-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormSettingsValidation-V14.png b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsValidation-V14.png
new file mode 100644
index 00000000000..d4ec44a8472
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormSettingsValidation-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/Forms-folder-options-v14.png b/14/umbraco-forms/editor/creating-a-form/images/Forms-folder-options-v14.png
new file mode 100644
index 00000000000..f3ed72c626f
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/Forms-folder-options-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormsCreateDialogV14.png b/14/umbraco-forms/editor/creating-a-form/images/FormsCreateDialogV14.png
new file mode 100644
index 00000000000..7a0f7d6c053
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormsCreateDialogV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormsSectionV14.png b/14/umbraco-forms/editor/creating-a-form/images/FormsSectionV14.png
new file mode 100644
index 00000000000..c8cbd01f797
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormsSectionV14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/FormsTree-v14.png b/14/umbraco-forms/editor/creating-a-form/images/FormsTree-v14.png
new file mode 100644
index 00000000000..8d1af3e3ea6
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/FormsTree-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/Reorder-Form-v14.png b/14/umbraco-forms/editor/creating-a-form/images/Reorder-Form-v14.png
new file mode 100644
index 00000000000..e0424f8deb8
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/Reorder-Form-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/Reorder-form-fields-done-v14.png b/14/umbraco-forms/editor/creating-a-form/images/Reorder-form-fields-done-v14.png
new file mode 100644
index 00000000000..d4f50e63259
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/Reorder-form-fields-done-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/Store-Records-V14.png b/14/umbraco-forms/editor/creating-a-form/images/Store-Records-V14.png
new file mode 100644
index 00000000000..2f1cc088557
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/Store-Records-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/add-new-group-button-v14.png b/14/umbraco-forms/editor/creating-a-form/images/add-new-group-button-v14.png
new file mode 100644
index 00000000000..47bed8874f0
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/add-new-group-button-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/add-new-page-button-v14.png b/14/umbraco-forms/editor/creating-a-form/images/add-new-page-button-v14.png
new file mode 100644
index 00000000000..4c8502b0f23
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/add-new-page-button-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/add-new-page-v14.png b/14/umbraco-forms/editor/creating-a-form/images/add-new-page-v14.png
new file mode 100644
index 00000000000..57809496a8e
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/add-new-page-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/conditions-v14.png b/14/umbraco-forms/editor/creating-a-form/images/conditions-v14.png
new file mode 100644
index 00000000000..71ff4f34777
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/conditions-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/create-forms-folder-v14.png b/14/umbraco-forms/editor/creating-a-form/images/create-forms-folder-v14.png
new file mode 100644
index 00000000000..b5fef0962e7
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/create-forms-folder-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/edit-group-columns.png b/14/umbraco-forms/editor/creating-a-form/images/edit-group-columns.png
new file mode 100644
index 00000000000..a57099f3d6d
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/edit-group-columns.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/exampleBackoffice-v14.png b/14/umbraco-forms/editor/creating-a-form/images/exampleBackoffice-v14.png
new file mode 100644
index 00000000000..c950da37724
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/exampleBackoffice-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/exampleFrontend-v14.png b/14/umbraco-forms/editor/creating-a-form/images/exampleFrontend-v14.png
new file mode 100644
index 00000000000..3a2c1de6c25
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/exampleFrontend-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/form-info-V14.png b/14/umbraco-forms/editor/creating-a-form/images/form-info-V14.png
new file mode 100644
index 00000000000..89076d66f75
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/form-info-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/form-info-general-v14.png b/14/umbraco-forms/editor/creating-a-form/images/form-info-general-v14.png
new file mode 100644
index 00000000000..16766b38d54
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/form-info-general-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/form-info-references-V14.png b/14/umbraco-forms/editor/creating-a-form/images/form-info-references-V14.png
new file mode 100644
index 00000000000..23e111fc50e
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/form-info-references-V14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/forms-folder-name-v14.png b/14/umbraco-forms/editor/creating-a-form/images/forms-folder-name-v14.png
new file mode 100644
index 00000000000..8b166a4fefc
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/forms-folder-name-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/move-form-in-folder-v14.png b/14/umbraco-forms/editor/creating-a-form/images/move-form-in-folder-v14.png
new file mode 100644
index 00000000000..dff1e769bfa
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/move-form-in-folder-v14.png differ
diff --git a/14/umbraco-forms/editor/creating-a-form/images/phone-conditions-v14.png b/14/umbraco-forms/editor/creating-a-form/images/phone-conditions-v14.png
new file mode 100644
index 00000000000..1e2425cd03e
Binary files /dev/null and b/14/umbraco-forms/editor/creating-a-form/images/phone-conditions-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/README.md b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/README.md
index 20777574557..464237b07e3 100644
--- a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/README.md
+++ b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/README.md
@@ -6,36 +6,42 @@ Prevalue sources are a way to pre-define and/or retrieve a list of items from a
Prevalue sources can be managed in the **Prevalue sources** folder available in the **Forms** section.
-
+
To set a prevalue source:
-1. Navigate to the **Forms** section.
-2. Right-click the **Prevalue sources** folder and select **Create**.
-3. A new page opens in the right-side of the editor where you'll need to setup and configure your prevalue source.
-4. Enter a **Name**.
-5. Select the type of prevalue source from the **Type** drop-down. For more information on the different default types, see the [Overview of the Prevalue Source Types](prevalue-source-types.md) article.
+1. Go to the **Forms** section.
+2. Click **...** next to the **Prevalue Sources** folder.
+3. Click **Create**.
+4. The **Choose prevalue source type** pane opens in the right-side of the editor.
+5. Select the type of prevalue source. For more information on the different default types, see the [Overview of the Prevalue Source Types](prevalue-source-types.md) article.
- 
+ 
### Configuring the Prevalue Source
-Depending on the **Type** you choose, you'll need to provide some additional settings:
+Depending on the **prevalue source type** you choose, you'll need to provide some additional settings. For this article, we will select **Get values from textfile**.
-1. In this walk-through, we will select **Get values from textfile** from the **Type** drop-down. 
-2. Now, provide a file containing the list to use as prevalues. For example: A `.txt` file containing the following values:\\
+1. Select **Get values from textfile** from the **Choose prevalue source type** pane.
+ 
-
example value 1
- example value 2
- example value 3
+2. Enter a Name for the prevalue source type. Let's call it *My Prevalue Source*.
+3. Now, create a file containing the list to use as prevalues. For example: a `.txt` file containing the following values:
+
+ ```cs
+ example value 1
+ example value 2
+ example value 3
example value 4
example value 5
-
-3. Select **Pick File** and choose the text file you created.
-4. Once the text file is uploaded, click **Save** to save the prevalue source.
-5. If the file is successfully uploaded and validated, you will see an overview of the values in a tabular format.
+ ```
+
+4. Select **Click to upload** in the **Text File**.
+5. Choose the text file you created. Click **Open**.
+6. Select your preferred **Cache option** for caching the list of prevalues when rendering in a form.
+7. Click **Save**.
-
+ 
If you would like to have different values presented to your users from the value stored, you can provide two values per line, separated with a vertical bar (|), e.g.:
@@ -51,8 +57,6 @@ In this case the user would pick from a list showing the captions, but the singl
This can be useful if the recorded entries are used in any subsequent workflows or business processes, where particular values, that aren't appropriate for the user to select from, are required.
-
-
### Defining Cache Options for the Prevalue Source
Sometimes retrieving the list of options for a prevalue source can be an expensive operation. If the source depends on data from external systems, it could be that the list changes regularly or rarely.
@@ -65,7 +69,7 @@ You can choose between:
- `Cache For Specified Time` - the list will be cached for the period of time provided.
- `Cache With No Expiry` - the list will be cached on first request and not retrieved again until either the prevalue source is edited or the website is restarted. This ismost appropriate to use for information held within the prevalue source data itself (such as when uploading a text file).
-
+
## Attaching a Prevalue Source to a Field
@@ -75,7 +79,7 @@ Once a prevalue source has been created, it can be used while building Forms in
If there is at least one prevalue source defined in the project, the Prevalues source will contain a dropdown from where you can choose the predefined value.
-
+
Once you have selected the prevalue source, the values are rendered in the Forms designer from the attached source.
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/FieldPrevalueSource-v14.png b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/FieldPrevalueSource-v14.png
new file mode 100644
index 00000000000..fa445776bcf
Binary files /dev/null and b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/FieldPrevalueSource-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/SQLdatabase-v14.png b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/SQLdatabase-v14.png
new file mode 100644
index 00000000000..e5793f6bfe6
Binary files /dev/null and b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/SQLdatabase-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/choosetype-v14.png b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/choosetype-v14.png
new file mode 100644
index 00000000000..5fe77bae083
Binary files /dev/null and b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/choosetype-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/datatype-prevalues-v14.png b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/datatype-prevalues-v14.png
new file mode 100644
index 00000000000..9f350a72448
Binary files /dev/null and b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/datatype-prevalues-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/prevalue-cache-options-v14.png b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/prevalue-cache-options-v14.png
new file mode 100644
index 00000000000..52222907264
Binary files /dev/null and b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/prevalue-cache-options-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/prevaluesourcetree-v14.png b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/prevaluesourcetree-v14.png
new file mode 100644
index 00000000000..23ae81e8c86
Binary files /dev/null and b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/prevaluesourcetree-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/preview-v14.png b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/preview-v14.png
new file mode 100644
index 00000000000..94d165ae93b
Binary files /dev/null and b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/preview-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/typesettings-v14.png b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/typesettings-v14.png
new file mode 100644
index 00000000000..aa1c171d39c
Binary files /dev/null and b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/typesettings-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/umbraco-documents-v14.png b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/umbraco-documents-v14.png
new file mode 100644
index 00000000000..940c3a9ecaf
Binary files /dev/null and b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/images/umbraco-documents-v14.png differ
diff --git a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/prevalue-source-types.md b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/prevalue-source-types.md
index 68952d4b9e1..7b40c18766a 100644
--- a/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/prevalue-source-types.md
+++ b/14/umbraco-forms/editor/defining-and-attaching-prevaluesources/prevalue-source-types.md
@@ -1,38 +1,51 @@
# Prevalue Source Types Overview
-There are some default prevalue source types that can be used.
+There are some default prevalue source types that can be used. In this article, we will give a quick overview of them:
-Here is a quick overview of them:
+## Get values from textfile
-* **Get values from textfile**
+Upload a textfile that contains the prevalues. Each prevalue should have its own line in the file. Once the file has been uploaded, you can find it in `~/wwwroot/App_Data/UmbracoForms/Data/PreValueTextFiles/{GUID}` where the `{GUID}`is replaced with the pre-value ID.
- * Upload a textfile that contains the prevalues. Each prevalue should have its own line in the file. Once the file has been uploaded, you can find it in `~/wwwroot/App_Data/UmbracoForms/Data/PreValueTextFiles/{GUID}` where the `{GUID}`is replaced with the pre-value ID.
-* **Umbraco Documents**
+
- * Allows to use content nodes from a specific source as prevalues. You can define the root node by either
+## Umbraco Documents
+Allows to use content nodes from a specific source as prevalues. You can apply the following settings in the **Details** section:
+
+* Select which **Value field** should be used for the value of the prevalue.
+* You can define the root node by either
* Choosing a node directly from the Content tree or
* Using XPath
+* Enable **Use current page as root** instead of choosing a specific root node. _The preview is not available when this setting is enabled._
+* Select a specific **Document type**, if the selected root node contains a different Document Type.
+* Enable **List all Descendants** of the selected root node to list all levels of descendants.
+* Select **Order by** from the drop-down list to display how the prevalue list should be ordered.
+* Select your preferred **Cache option** for caching the list of prevalues when rendering in a form.
+
+
+
+## SQL Database
+
+You can provide the following details in the **Details** section:
+
+Connect to a OleDB compatible database table and construct a prevalue source from it. Once selected, it will be editable from the Forms interface.
+
+The following configurations need to be set in the **Details** section:
+
+* Connection string (either choose one from your web.config or add another from a textfield).
+* Connection String from configuration
+* Table Name
+* Key Column
+* Value Column
+* Caption Column
+* Select your preferred **Cache option** for caching the list of prevalues when rendering in a form.
+
+
+
+## Umbraco Data Type Prevalues
-Additional settings can be applied:
-
- * Select which **Value field** should be used for the value of the prevalue.
- * Select **Use current page as root** instead of choosing a specific root node. _The preview is not available when this setting is enabled._
- * Select a specific **Document type**, if the selected root node contains a different Document Type.
- * Select **List all Descendants** of the selected root node to list all levels of descendants.
- * Select **Order by** from the drop-down list to display how the prevalue list should be ordered.
-* **SQL Database**
- * Connect to a OleDB compatible database table and construct a prevalue source from it. Once selected, it will be editable from the Forms interface.
- * The following configurations need to be set:
- * Connection string (either choose one from your web.config or add another from a textfield.
- * Connection String from configuration
- * Table Name
- * Key Column
- * Value Column
- * Caption Column
-* **Umbraco Data Type Prevalues**
- * Choose an Umbraco Data Type to use its configured prevalue collection.
+Choose an Umbraco Data Type to use its configured prevalue collection.
In the example below, the prevalue collection from a Data Type called `Home - Font - Radio button` is used:
-
+
diff --git a/14/umbraco-forms/editor/images/Export-v14.png b/14/umbraco-forms/editor/images/Export-v14.png
new file mode 100644
index 00000000000..efc9bb7686b
Binary files /dev/null and b/14/umbraco-forms/editor/images/Export-v14.png differ
diff --git a/14/umbraco-forms/editor/images/ExportAllDialog-v14.png b/14/umbraco-forms/editor/images/ExportAllDialog-v14.png
new file mode 100644
index 00000000000..2d7dd5a549f
Binary files /dev/null and b/14/umbraco-forms/editor/images/ExportAllDialog-v14.png differ
diff --git a/14/umbraco-forms/editor/images/entry-details-v14.png b/14/umbraco-forms/editor/images/entry-details-v14.png
new file mode 100644
index 00000000000..77e47c96500
Binary files /dev/null and b/14/umbraco-forms/editor/images/entry-details-v14.png differ
diff --git a/14/umbraco-forms/editor/images/tree-v14.png b/14/umbraco-forms/editor/images/tree-v14.png
new file mode 100644
index 00000000000..c472e109511
Binary files /dev/null and b/14/umbraco-forms/editor/images/tree-v14.png differ
diff --git a/14/umbraco-forms/editor/viewing-and-exporting-entries.md b/14/umbraco-forms/editor/viewing-and-exporting-entries.md
index a0cc9deedbf..8d873f1548e 100644
--- a/14/umbraco-forms/editor/viewing-and-exporting-entries.md
+++ b/14/umbraco-forms/editor/viewing-and-exporting-entries.md
@@ -1,8 +1,8 @@
# Viewing And Exporting Entries
-Expand the Form in the tree to view the Entries for each Form.
+To view the Entries for each Form, go to the Form and click on the **Entries** tab.
-
+
## Video overview
@@ -14,15 +14,15 @@ Watch this video to learn how to manage entries submitted via Umbraco Forms.
When accessing the Entries viewer, you will be able to see all the entries submitted via the Form.
-
+
### Viewing the Entries
By default, the list is filtered to show entries only from the past month. If you want to change the date range, pick the appropriate time period from the date picker. You can also filter the entries by specific words using the Search field on the left.
-Clicking on the first field for each record in the list will open the full set of information recorded for the form entry. Next and previous buttons allow you to navigate through the entry list.
+Click **Entry details** on each record in the list to open the full set of information recorded for the form entry. Clicking on the entry record displays the **Clear** and **Delete** buttons.
-
+
### Editing the Entries
@@ -35,29 +35,26 @@ Validation will operate as is configured for the form in terms of mandatory fiel
To export all the entries from your Form:
1. Go to the **Forms** section.
-2. Navigate to the **Entries** you wish to export.
-3. Click **Export** in the top-right corner of the screen.
+2. Navigate to the Form **Entries** you wish to export.
+3. Click **Export**.
-
-4. The Export dialog opens. Choose a format such as Microsoft Excel to export the Form records to.
+ 
-
-5. Click **Done**.
+4. The Export dialog opens. Choose a format such as **Excel File** to export the Form records to.
+
+ 
+5. Click **Export**.
+6. Click **Save**.
If you have fields that allow the user to upload files within your form, you will also have the option to download a zip file containing these files. You can either download the files in the structure that they are stored on the web server's disk. Or you can download them organised by entry, so it's easier to match up the entry listed in the spreadsheet download with the uploaded file(s).
## Record Actions
-When selecting entries, it is possible to execute Actions. To select an entry, click anywhere on the entry.
-
-{% hint style="info" %}
-Clicking on the _Name_ opens a view where you can see the entire entry details.
-{% endhint %}
+When selecting entries, it is possible to execute different actions. To select an entry, click anywhere on the entry.
-
+
-Select at least 1 record to see the available actions in the top-right corner. By default, there are 3 possible actions:
+Select at least 1 record to see the available actions. By default, there are 2 possible actions:
-* Approve
-* Reject
+* Clear
* Delete
diff --git a/14/umbraco-forms/installation/images/Manage_packages_v14.png b/14/umbraco-forms/installation/images/Manage_packages_v14.png
new file mode 100644
index 00000000000..dd8f92cf16a
Binary files /dev/null and b/14/umbraco-forms/installation/images/Manage_packages_v14.png differ
diff --git a/14/umbraco-forms/installation/images/start-with-forms-v14.png b/14/umbraco-forms/installation/images/start-with-forms-v14.png
new file mode 100644
index 00000000000..a17420f6d3d
Binary files /dev/null and b/14/umbraco-forms/installation/images/start-with-forms-v14.png differ
diff --git a/14/umbraco-forms/installation/install.md b/14/umbraco-forms/installation/install.md
index 16397768f75..c4fd115c510 100644
--- a/14/umbraco-forms/installation/install.md
+++ b/14/umbraco-forms/installation/install.md
@@ -16,21 +16,21 @@ To install the Umbraco Forms package (**Umbraco.Forms**), follow these steps:
1. Run the following command on a command prompt of your choice:
-```
-dotnet add package Umbraco.Forms
-```
+ ```cs
+ dotnet add package Umbraco.Forms
+ ```
2. Restart the web application using the following command:
-```
- dotnet run
-```
+ ```cs
+ dotnet run
+ ```
## Start Building Forms
-Once the installation is successful, you will see a similar screen in the Forms section:
+Once the installation is successful, you will see a similar screen in the **Forms** section:
-
+
## Using Forms
diff --git a/14/umbraco-forms/tutorials/creating-a-contact-form.md b/14/umbraco-forms/tutorials/creating-a-contact-form.md
index 771178660ca..d3a5a386a59 100644
--- a/14/umbraco-forms/tutorials/creating-a-contact-form.md
+++ b/14/umbraco-forms/tutorials/creating-a-contact-form.md
@@ -23,21 +23,19 @@ To create a Composition, follow these steps:
1. Go to **Settings** in the Umbraco Backoffice.
2. Expand the **Document Types** folder in the **Settings** tree.
3. Select **...** next to the **Compositions** folder.
-4. Click **Composition**.
+4. Click **Create**.
+5. Select **Document Type**.
+6. Enter a **Name** for the **Composition**- let's call it _Title Box_.
+7. Add the following fields with the respective specifications:
-
+ | Group | Field Name | Alias | Data Type |
+ |-----------|------------|----------|------------|
+ | Title Box | Title | title | Textstring |
+ | Title Box | Subtitle | subtitle | Textarea |
-5. Enter a **Name** for the **Composition**- let's call it _Title Box_.
-6. Add the following fields with the respective specifications:
+8. Click **Save** to save the Composition.
-| Group | Field Name | Alias | Data Type |
-|-----------|------------|----------|------------|
-| Title Box | Title | title | Textstring |
-| Title Box | Subtitle | subtitle | Textarea |
-
-7. **Save** Composition.
-
-
+ 
### Creating a Contact Us Document Type with Template
@@ -47,21 +45,22 @@ To create a **Contact Us** Document Type, follow these steps:
1. Go to **Settings** in the Umbraco Backoffice.
2. Select **...** next to the **Document Types** folder.
-3. Select **Document Type with Template**.
-4. Enter a **Name** for the **Document Type**- let's call it _Contact Us_.
-5. Select **Compositions** in the top-right corner.
-6. Make sure the **Title Box** Composition is checked.
-7. **Submit** the change.
-8. Add the following fields with the respective specifications:
+3. Click **Create**.
+4. Select **Document Type with Template**.
+5. Enter a **Name** for the **Document Type**- let's call it _Contact Us_.
+6. Select **Compositions** in the top-right corner.
+7. Select **Title Box**.
+8. Click **Submit**.
+9. Add the following fields with the respective specifications:
-| Group | Field Name | Alias | Data Type |
-|---------|--------------|-------------|-----------------|
-| Form | Contact Form | contactForm | Richtext Editor |
-| Content | Body Text | bodyText | Richtext Editor |
+ | Group | Field Name | Alias | Data Type |
+ |---------|--------------|-------------|-----------------|
+ | Form | Contact Form | contactForm | Form Picker |
+ | Content | Body Text | bodyText | Richtext Editor |
-9. **Save** the Document Type.
+10. Click **Save**.
-
+ 
### Updating the Document Type Permission
@@ -69,15 +68,15 @@ In the following we will update the Document Type permissions to specifically ad
To update the **Contact Us** Document Type permissions, follow these steps:
-1. Navigate to the Document Type used for the root content node on your website, in this case **Home Page**.
-2. Go to the **Permissions** tab.
-3. Select **Add child** in the **Allowed child node types** section.
+1. Navigate to the Document Type used for the root content node on your website, in this case **Home** page.
+2. Go to the **Structure** tab.
+3. Select **Choose** in the **Allowed child node types** section.
4. Select the **Contact Us** page.
-
+ 
-5. **Submit** the changes.
-6. **Save** the Document Type.
+5. Click **Choose**.
+6. Click **Save**.
## Step 2: Prepare the Content Node
@@ -87,13 +86,14 @@ To add the content node, follow these steps:
1. Go to **Content** in the Umbraco Backoffice.
2. Select **...** next to the **Home Page**.
-3. Create a **Contact Us** page.
-4. Enter the name for the content node. let's call it _Contact Us_.
-5. Enter a **Title**, **Subtitle**, and **Body Text** value. These can always be updated at a later point.
+3. Click **Create**.
+4. Select **Contact Us**.
+5. Enter the name for the content node. let's call it _Contact Us_.
+6. Enter a **Title**, **Subtitle**, and **Body Text** value. These can always be updated at a later point.
-
+ 
-6. **Save** or **Save and Publish** the content node.
+7. Click **Save** or **Save and Publish**.
## Step 3: Creating the Contact Form
@@ -101,92 +101,93 @@ In this step, we will create the Contact Form using Umbraco Forms.
To create a form, follow these steps:
-1. Navigate to the **Forms** section in the Umbraco Backoffice.
+1. Go to the **Forms** section in the Umbraco Backoffice.
2. Click **...** next to the Forms folder.
-3. Choose the **Empty Form** option.
-4. Enter a **Name** for the Form- let's call it _Contact Us_.
-5. _[Optional]_ Enter a **Group Name** for the Data Consent query - let's call it _Data Consent_.
-6. **Add new group** - let's call it _Information_.
-7. Select **Add Question** to add a new field.
-8. Enter the following details:
-
-| Field Name | Value |
-| ------------------ | -------------------- |
-| Enter question | **Name** |
-| Alias | fullName |
-| Choose answer type | Short answer |
-| Field Type | text |
-| Mandatory | Yes |
-
-9. **Submit** the changes.
-10. Repeat **steps 7-9** to add the following fields:
-
-| Field Name | Value |
-| ------------------ | -------------------- |
-| Enter question | **Company Name** |
-| Choose answer type | Short answer |
-
-| Field Name | Value |
-|--------------------|----------------------------|
-| Enter question | **How should we contact you?** |
-| Choose answer type | Single choice |
-| Prevalues Items | phone, email |
-| Mandatory | Yes |
-
-| Field Name | Value |
-|--------------------|----------------------------|
-| Enter question | **Enter your phone number** |
-| Choose answer type | Short answer |
-| Field Type | tel |
-| Validation | Validate as a number |
-
-11. Select **Enable Conditions** on the _Enter your phone number_ field.
-12. Click **Add Condition**.
-13. Select **How should we contact you? from the dropwdown**.
-14. Enter **phone** in the value field.
-15. **Submit** the changes.
-16. Repeat **steps 7-9** to add the following field:
-
-| Field Name | Value |
-|--------------------|------------------------------|
-| Enter question | **Enter your email address** |
-| Choose answer type | Short answer |
-| Field Type | email |
-| Validation | Validate as an email address |
-
-17. Select **Enable Conditions** on the _Enter your email address_ field.
-18. Click **Add Condition**.
-19. Select **How should we contact you? from the dropwdown**.
-20. Enter **email** in the value field.
-21. **Submit** the changes.
-22. Repeat **steps 7-9** to add the following field:
-
-| Field Name | Value |
-|--------------------|----------------------------------------------------------|
-| Enter question | **What is your role?** |
-| Choose answer type | Dropdown |
-| Prevalues Items | manager, developer, tester, writer, marketing specialist |
-
-| Field Name | Value |
-|--------------------------------|--------------------------|
-| Enter question | **Attachments (if any)** |
-| Choose answer type | File upload |
-| Predefined allowed file types | pdf, png, jpg, gif, txt |
-
-| Field Name | Value |
-|--------------------|---------------------|
-| Enter question | **Are you a Robot?** |
-| Choose answer type | reCAPTCHAv2 |
-| Theme | light |
-| Size | normal |
-| Mandatory | Yes |
-
-
-
-23. Select the **Reorder** option.
-24. Drag the **Data consent** group below the **Information** group.
-25. Click **I am done reordering**.
-26. **Save** the form.
+3. Click Create.
+4. Select **New Form...**.
+5. Enter a **Name** for the Form. Let's call it _Contact Us_.
+6. _[Optional]_ Enter a **Page Name** and **Group Name** for the Data Consent statement. Let's call it _Data Consent_.
+7. Click **Add new group**. Let's call it _Information_.
+8. Select **Add Question** to add a new field.
+9. Enter the following details:
+
+ | Field Name | Value |
+ | ------------------ | -------------------- |
+ | Enter question | **Name** |
+ | Alias | fullName |
+ | Choose answer type | Short answer |
+ | Field Type | text |
+ | Mandatory | On |
+
+10. Click **Submit**.
+11. Repeat **steps 8-10** to add the following fields:
+
+ | Field Name | Value |
+ | ------------------ | -------------------- |
+ | Enter question | **Company Name** |
+ | Choose answer type | Short answer |
+
+ | Field Name | Value |
+ |--------------------|----------------------------|
+ | Enter question | **How should we contact you?** |
+ | Choose answer type | Single choice |
+ | Prevalues Items | phone, email |
+ | Mandatory | On |
+
+ | Field Name | Value |
+ |--------------------|----------------------------|
+ | Enter question | **Enter your phone number**|
+ | Choose answer type | Short answer |
+ | Field Type | tel |
+ | Validation | Validate as a number |
+
+12. Enable **Conditions** in the _Enter your phone number_ field.
+13. Click **Add Condition**.
+14. Select **How should we contact you?** from the dropwdown.
+15. Select **phone** in the value field.
+16. Click **Submit**.
+17. Repeat **steps 8-10** to add the following field:
+
+ | Field Name | Value |
+ |--------------------|------------------------------|
+ | Enter question | **Enter your email address** |
+ | Choose answer type | Short answer |
+ | Field Type | email |
+ | Validation | Validate as an email address |
+
+18. Enable **Conditions** in the _Enter your email address_ field.
+19. Click **Add Condition**.
+20. Select **How should we contact you?** from the dropwdown.
+21. Select **email** in the value field.
+22. Click **Submit**.
+23. Repeat **steps 8-10** to add the following field:
+
+ | Field Name | Value |
+ |--------------------|----------------------------------------------------------|
+ | Enter question | **What is your role?** |
+ | Choose answer type | Dropdown |
+ | Prevalues Items | manager, developer, tester, writer, marketing specialist |
+
+ | Field Name | Value |
+ |--------------------------------|--------------------------|
+ | Enter question | **Attachments (if any)** |
+ | Choose answer type | File upload |
+ | Predefined allowed file types | pdf, png, jpg, gif, txt |
+
+ | Field Name | Value |
+ |--------------------|---------------------|
+ | Enter question | **Are you a Robot?**|
+ | Choose answer type | reCAPTCHAv2 |
+ | Theme | light |
+ | Size | normal |
+ | Mandatory | On |
+
+ 
+
+24. Select the **Reorder** option.
+25. Drag the **Data consent** group below the **Information** group.
+26. Click **I am done reordering**.
+27. Click **Save**.
### Configuring the Form Workflow
@@ -196,13 +197,13 @@ To configure the Form workflow, follow these steps:
1. Select the **Submit message/ Go to page** options in the bottom of the Forms editor.
2. Enter a customised message in the **Message on Submit** field.
-3. **Submit** the change.
+3. Click **Submit**.
4. Click on **Send template email to xxx@xx.dk**.
-5. Select **Example-Template.cshtml** in the **Email template** field.
-6. Enable **Attachments**.
-7. Enter an email address in the **Sender Email** field.
-8. **Submit** the changes.
-9. **Save** the form.
+5. Enter an email address in the **Sender Email** field.
+6. By default, the **Example-Template.cshtml** template will be selected in the **Email template** field.
+7. Enable **Attach Uploaded Files**.
+8. Click **Submit**.
+9. Click **Save**.
### Configuring the Form Settings
@@ -213,7 +214,7 @@ To configure the form settings, follow these steps:
1. Navigate to the **Settings** tab in the Forms editor.
2. Scroll to find the **Validation** section.
3. Ensure that the **Mark Mandatory fields** option is checked under **Mark fields**.
-4. **Save** the changes.
+4. Click **Save**.
{% hint style="info" %}
There are multiple settings that be configured. These are all optional in relation to this tutorial.
@@ -221,23 +222,20 @@ There are multiple settings that be configured. These are all optional in relati
## Step 4: Adding the Contact Form to the Content Node
-Now that you have created your Contact Form, you can add it in the Contact Us Content Node using the Rich Text Editor. We will use the **Insert Form** macro to insert a form.
+Now that you have created your Contact Form, you can add it in the Contact Us Content Node using the _Form Picke_ Data Type.
To add the Contact Form to the Content Node, follow these steps:
-1. Navigate to the **Content** section in the Umbraco Backoffice.
+1. Go to the **Content** section in the Umbraco Backoffice.
2. Open the **Contact Us** Page.
-3. Select **Insert macro** in the **Contact Form** field.
+3. Select **Choose** in the **Contact Form** field.
4. Select the **Insert Form with Theme** option.
-5. Select **Add** in the **Choose a form** field.
-6. Choose the **Contact Us** Form.
-7. Select **Add** in the **Theme** field.
-8. Choose the **default** theme.
+5. Select the **Contact Us** Form.
+6. Click **Choose**.
-
+ 
-9. **Submit** the changes.
-10. **Save** or **Save and Publish** the content node.
+7. Click **Save** or **Save and Publish**.
## Step 5: Additional configuration
@@ -245,9 +243,9 @@ In the next couple of steps, we will add some additional configuration required
### Configuring the reCAPTCHA value
-When you inserted the form in the previous step, you will notice an error message in the reCAPTCHA field. You need to update the configuration to include a value in the `appsettings.json` file.
+You need to update the configuration to include a value in the `appsettings.json` file.
-To configure the reCAPTCHA value, see the [reCAPTCHA configuration](../../developer/configuration/README.md#recaptcha-v2-field-type-configuration) article.
+To configure the reCAPTCHA value, see the [reCAPTCHA configuration](../developer/configuration/README.md#recaptcha-v2-field-type-configuration) article.
### Configuring Simple Mail Transfer Protocol (SMTP)
@@ -261,14 +259,31 @@ In this step, we will render the values of the Contact Us Document Type in the t
To render the Contact Form, follow these steps:
-1. Navigate to the **Settings** section in the Umbraco Backoffice.
+1. Go to the **Settings** section in the Umbraco Backoffice.
2. Open the **Contact Us** template in the **Templates** folder.
-3. Choose the **Insert** option and select **Value**.
-4. Select **contactForm** from the **Choose field** dropdown.
-5. **Submit** the changes.
-6. Follow **steps 3-5** to insert the **bodyText** value.
-7. **Submit** the changes.
-8. **Save** the template.
+3. Enter the following code to render the form:
+
+ ```cs
+ @using Umbraco.Forms.Web.Helpers;
+ @await Component.InvokeAsync("RenderForm", new { formId = Guid.Parse("
