Add ability to specify form introduction page content

src/openapi.yaml

@@ -7588,6 +7588,11 @@ components:
           description: The content of the submission confirmation page. It can contain
             variables that will be templated from the submitted form data. If not
             specified, the global template will be used.
+        introductionPageContent:
+          type: string
+          title: Introduction page
+          description: Content for the introduction page that leads to the start page
+            of the form. Leave blank to disable the introduction page.
         explanationTemplate:
           type: string
           description: Content that will be shown on the start page of the form, below
@@ -7999,6 +8004,12 @@ components:
             the form is filled in correctly. Leave blank to get value from global
             configuration.
           maxLength: 50
+        introductionPageContent:
+          type: string
+          nullable: true
+          title: Introduction page [en]
+          description: Content for the introduction page that leads to the start page
+            of the form. Leave blank to disable the introduction page.
         explanationTemplate:
           type: string
           nullable: true
@@ -8164,6 +8175,12 @@ components:
             the form is filled in correctly. Leave blank to get value from global
             configuration.
           maxLength: 50
+        introductionPageContent:
+          type: string
+          nullable: true
+          title: Introduction page [nl]
+          description: Content for the introduction page that leads to the start page
+            of the form. Leave blank to disable the introduction page.
         explanationTemplate:
           type: string
           nullable: true
@@ -9226,6 +9243,11 @@ components:
           description: The content of the submission confirmation page. It can contain
             variables that will be templated from the submitted form data. If not
             specified, the global template will be used.
+        introductionPageContent:
+          type: string
+          title: Introduction page
+          description: Content for the introduction page that leads to the start page
+            of the form. Leave blank to disable the introduction page.
         explanationTemplate:
           type: string
           description: Content that will be shown on the start page of the form, below

src/openforms/conf/tinymce_config.json

@@ -21,10 +21,11 @@
         "help",
         "wordcount"
     ],
-    "toolbar": "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | table bullist numlist outdent indent | link unlink removeformat | help",
+    "toolbar": "undo redo | blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | table bullist numlist outdent indent | link unlink removeformat | help",
     "content_style": "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
     "default_link_target": "_blank",
     "link_default_protocol": "https",
     "link_assume_external_targets": false,
-    "convert_urls": false
+    "convert_urls": false,
+    "block_formats": "Paragraph=p; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6"
 }

src/openforms/forms/api/serializers/form.py

@@ -272,6 +272,7 @@ class Meta:
             "deactivate_on",
             "is_deleted",
             "submission_confirmation_template",
+            "introduction_page_content",
             "explanation_template",
             "submission_allowed",
             "suspension_allowed",
@@ -296,6 +297,7 @@ class Meta:
         public_fields = (
             "uuid",
             "name",
+            "introduction_page_content",
             "explanation_template",
             "login_required",
             "authentication_backends",

src/openforms/forms/migrations/0098_form_introduction_page_content_and_more.py

@@ -0,0 +1,61 @@
+# Generated by Django 4.2.15 on 2024-09-04 16:35
+
+from django.db import migrations
+
+import tinymce.models
+
+import csp_post_processor.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("forms", "0097_v267_to_v270"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="form",
+            name="introduction_page_content",
+            field=csp_post_processor.fields.CSPPostProcessedWYSIWYGField(
+                base_field=tinymce.models.HTMLField(
+                    blank=True,
+                    help_text="Content for the introduction page that leads to the start page of the form. Leave blank to disable the introduction page.",
+                    verbose_name="introduction page",
+                ),
+                blank=True,
+                help_text="Content for the introduction page that leads to the start page of the form. Leave blank to disable the introduction page.",
+                verbose_name="introduction page",
+            ),
+        ),
+        migrations.AddField(
+            model_name="form",
+            name="introduction_page_content_en",
+            field=csp_post_processor.fields.CSPPostProcessedWYSIWYGField(
+                base_field=tinymce.models.HTMLField(
+                    blank=True,
+                    help_text="Content for the introduction page that leads to the start page of the form. Leave blank to disable the introduction page.",
+                    verbose_name="introduction page",
+                ),
+                blank=True,
+                help_text="Content for the introduction page that leads to the start page of the form. Leave blank to disable the introduction page.",
+                null=True,
+                verbose_name="introduction page",
+            ),
+        ),
+        migrations.AddField(
+            model_name="form",
+            name="introduction_page_content_nl",
+            field=csp_post_processor.fields.CSPPostProcessedWYSIWYGField(
+                base_field=tinymce.models.HTMLField(
+                    blank=True,
+                    help_text="Content for the introduction page that leads to the start page of the form. Leave blank to disable the introduction page.",
+                    verbose_name="introduction page",
+                ),
+                blank=True,
+                help_text="Content for the introduction page that leads to the start page of the form. Leave blank to disable the introduction page.",
+                null=True,
+                verbose_name="introduction page",
+            ),
+        ),
+    ]

src/openforms/forms/models/form.py

@@ -165,6 +165,27 @@ class Form(models.Model):
         ),
         default=True,
     )
+    ask_privacy_consent = models.CharField(
+        _("ask privacy consent"),
+        max_length=50,
+        choices=StatementCheckboxChoices.choices,
+        default=StatementCheckboxChoices.global_setting,
+        help_text=_(
+            "If enabled, the user will have to agree to the privacy policy before submitting a form."
+        ),
+    )
+    ask_statement_of_truth = models.CharField(
+        _("ask statement of truth"),
+        max_length=50,
+        choices=StatementCheckboxChoices.choices,
+        default=StatementCheckboxChoices.global_setting,
+        help_text=_(
+            "If enabled, the user will have to agree that they filled out the form "
+            "truthfully before submitting it."
+        ),
+    )
+
+    # Content displayed to end users
     begin_text = models.CharField(
         _("begin text"),
         max_length=50,
@@ -205,6 +226,16 @@ class Form(models.Model):
             "Leave blank to get value from global configuration."
         ),
     )
+    introduction_page_content = CSPPostProcessedWYSIWYGField(
+        HTMLField(
+            blank=True,
+            verbose_name=_("introduction page"),
+            help_text=_(
+                "Content for the introduction page that leads to the start page of the "
+                "form. Leave blank to disable the introduction page."
+            ),
+        ),
+    )
     explanation_template = CSPPostProcessedWYSIWYGField(
         HTMLField(
             blank=True,
@@ -214,25 +245,6 @@ class Form(models.Model):
             ),
         ),
     )
-    ask_privacy_consent = models.CharField(
-        _("ask privacy consent"),
-        max_length=50,
-        choices=StatementCheckboxChoices.choices,
-        default=StatementCheckboxChoices.global_setting,
-        help_text=_(
-            "If enabled, the user will have to agree to the privacy policy before submitting a form."
-        ),
-    )
-    ask_statement_of_truth = models.CharField(
-        _("ask statement of truth"),
-        max_length=50,
-        choices=StatementCheckboxChoices.choices,
-        default=StatementCheckboxChoices.global_setting,
-        help_text=_(
-            "If enabled, the user will have to agree that they filled out the form "
-            "truthfully before submitting it."
-        ),
-    )
 
     # life cycle management
     active = models.BooleanField(_("active"), default=False)

src/openforms/forms/tests/test_api_forms.py

@@ -1441,6 +1441,7 @@ def test_detail_staff_show_translations(self):
                     "begin_text": "start",
                     "change_text": "change",
                     "confirm_text": "confirm",
+                    "introduction_page_content": "",
                     "explanation_template": "",
                     "name": "Form 1",
                     "previous_text": "prev",
@@ -1450,6 +1451,7 @@ def test_detail_staff_show_translations(self):
                     "begin_text": "",
                     "change_text": "",
                     "confirm_text": "",
+                    "introduction_page_content": "",
                     "explanation_template": "",
                     "name": "",
                     "previous_text": "",

src/openforms/forms/translation.py

@@ -13,6 +13,7 @@ class FormTranslationOptions(TranslationOptions):
         "change_text",
         "confirm_text",
         "explanation_template",
+        "introduction_page_content",
     )
 
 

src/openforms/js/compiled-lang/en.json

@@ -3519,6 +3519,12 @@
       "value": "Are you sure you want to delete this?"
     }
   ],
+  "Z5lydZ": [
+    {
+      "type": 0,
+      "value": "Introduction page"
+    }
+  ],
   "ZB6mnn": [
     {
       "type": 0,
@@ -4147,6 +4153,12 @@
       "value": "configured"
     }
   ],
+  "dyBb9g": [
+    {
+      "type": 0,
+      "value": "Content for the introduction page that leads to the start page of the form. Leave blank to disable the introduction page."
+    }
+  ],
   "e6SsfR": [
     {
       "type": 0,

src/openforms/js/compiled-lang/nl.json

@@ -3536,6 +3536,12 @@
       "value": "Weet u zeker dat u dit wilt verwijderen?"
     }
   ],
+  "Z5lydZ": [
+    {
+      "type": 0,
+      "value": "Introduction page"
+    }
+  ],
   "ZB6mnn": [
     {
       "type": 0,
@@ -4169,6 +4175,12 @@
       "value": "configured"
     }
   ],
+  "dyBb9g": [
+    {
+      "type": 0,
+      "value": "Content for the introduction page that leads to the start page of the form. Leave blank to disable the introduction page."
+    }
+  ],
   "e6SsfR": [
     {
       "type": 0,

src/openforms/js/components/admin/form_design/FormDetailFields.js

@@ -63,35 +63,68 @@ const FormDetailFields = ({form: {slug, translations, appointmentOptions}, onCha
             </FormRow>
 
             {!isAppointment && (
-              <FormRow>
-                <Field
-                  name={`form.translations.${langCode}.explanationTemplate`}
-                  label={
-                    <FormattedMessage
-                      defaultMessage="Explanation template"
-                      description="Start page explanation text label"
-                    />
-                  }
-                  helpText={
-                    <FormattedMessage
-                      defaultMessage="Content that will be shown on the start page of the form, below the title and above the log in text."
-                      description="Start page explanation text"
+              <>
+                <FormRow>
+                  <Field
+                    name={`form.translations.${langCode}.introductionPageContent`}
+                    label={
+                      <FormattedMessage
+                        description="form.introductionPageContent label"
+                        defaultMessage="Introduction page"
+                      />
+                    }
+                    helpText={
+                      <FormattedMessage
+                        description="form.introductionPageContent help text"
+                        defaultMessage={`Content for the introduction page that leads to the start page of the
+                          form. Leave blank to disable the introduction page.`}
+                      />
+                    }
+                  >
+                    <TinyMCEEditor
+                      content={translations[langCode].introductionPageContent}
+                      onEditorChange={(newValue, editor) =>
+                        onChange({
+                          target: {
+                            name: `form.translations.${langCode}.introductionPageContent`,
+                            value: newValue,
+                          },
+                        })
+                      }
                     />
-                  }
-                >
-                  <TinyMCEEditor
-                    content={translations[langCode].explanationTemplate}
-                    onEditorChange={(newValue, editor) =>
-                      onChange({
-                        target: {
-                          name: `form.translations.${langCode}.explanationTemplate`,
-                          value: newValue,
-                        },
-                      })
+                  </Field>
+                </FormRow>
+
+                <FormRow>
+                  <Field
+                    name={`form.translations.${langCode}.explanationTemplate`}
+                    label={
+                      <FormattedMessage
+                        defaultMessage="Explanation template"
+                        description="Start page explanation text label"
+                      />
                     }
-                  />
-                </Field>
-              </FormRow>
+                    helpText={
+                      <FormattedMessage
+                        defaultMessage="Content that will be shown on the start page of the form, below the title and above the log in text."
+                        description="Start page explanation text"
+                      />
+                    }
+                  >
+                    <TinyMCEEditor
+                      content={translations[langCode].explanationTemplate}
+                      onEditorChange={(newValue, editor) =>
+                        onChange({
+                          target: {
+                            name: `form.translations.${langCode}.explanationTemplate`,
+                            value: newValue,
+                          },
+                        })
+                      }
+                    />
+                  </Field>
+                </FormRow>
+              </>
             )}
           </>
         )}

src/openforms/js/components/admin/form_design/MissingTranslationsWarning.js

@@ -98,9 +98,9 @@ const MissingTranslationsWarning = ({form, formSteps}) => {
     extractMissingTranslations(
       form.translations,
       <FormattedMessage defaultMessage="Form" description="Form fields tab title" />,
-      ['name', 'explanationTemplate'],
+      ['name', 'introductionPageContent', 'explanationTemplate'],
       undefined,
-      ['explanationTemplate']
+      ['introductionPageContent', 'explanationTemplate']
     ),
     extractMissingTranslations(
       form.translations,