ReliefApplications · Joselgc1 · Feb 6, 2026
diff --git a/libs/shared/src/i18n/en.json b/libs/shared/src/i18n/en.json
@@ -1557,6 +1557,21 @@
           },
           "tooltip": "When submitting a record from the widget, the form will be automatically populated with the record's data after the submission"
         },
+        "completionPopup": {
+          "label": "Completion popup",
+          "text": {
+            "label": "Popup message",
+            "placeholder": "Enter the message to show after submission",
+            "tooltip": "Custom text displayed after submission"
+          },
+          "title": "Completion message",
+          "titleField": {
+            "label": "Popup title",
+            "placeholder": "Enter the popup title",
+            "tooltip": "Custom title displayed in the popup"
+          },
+          "tooltip": "Show a popup after the form is submitted"
+        },
         "directions": {
           "both": "Both changes on the state or the question will be reflected on the other",
           "questionToState": "Changes on the question will be reflected on the state",

diff --git a/libs/shared/src/i18n/fr.json b/libs/shared/src/i18n/fr.json
@@ -1569,6 +1569,21 @@
           },
           "tooltip": "Lors de la soumission d'un enregistrement à partir du widget, le formulaire sera automatiquement rempli avec les données de l'enregistrement après la soumission"
         },
+        "completionPopup": {
+          "label": "Fenêtre de confirmation",
+          "text": {
+            "label": "Message de la fenêtre",
+            "placeholder": "Saisissez le message à afficher après la soumission",
+            "tooltip": "Texte personnalisé affiché après la soumission"
+          },
+          "title": "Message de confirmation",
+          "titleField": {
+            "label": "Titre de la fenêtre",
+            "placeholder": "Saisissez le titre de la fenêtre",
+            "tooltip": "Titre personnalisé affiché dans la fenêtre"
+          },
+          "tooltip": "Afficher une fenêtre après la soumission du formulaire"
+        },
         "directions": {
           "both": "Les modifications apportées à l'état ou à la question seront répercutées sur l'autre",
           "questionToState": "Les modifications apportées à la question seront répercutées sur l'état",

diff --git a/libs/shared/src/i18n/test.json b/libs/shared/src/i18n/test.json
@@ -1557,6 +1557,21 @@
           },
           "tooltip": "******"
         },
+        "completionPopup": {
+          "label": "******",
+          "text": {
+            "label": "******",
+            "placeholder": "******",
+            "tooltip": "******"
+          },
+          "title": "******",
+          "titleField": {
+            "label": "******",
+            "placeholder": "******",
+            "tooltip": "******"
+          },
+          "tooltip": "******"
+        },
         "directions": {
           "both": "******",
           "questionToState": "******",

diff --git a/libs/shared/src/lib/components/widgets/form-settings/form-settings.forms.ts b/libs/shared/src/lib/components/widgets/form-settings/form-settings.forms.ts
@@ -28,6 +28,11 @@ export const createFormWidgetFormGroup = (id: string, configuration: any) => {
     autoPopulateOmitQuestions: [
       get(configuration, 'autoPopulateOmitQuestions', []),
     ],
+    completionPopup: fb.group({
+      enabled: [get(configuration, 'completionPopup.enabled', false)],
+      title: [get(configuration, 'completionPopup.title', '')],
+      text: [get(configuration, 'completionPopup.text', '')],
+    }),
     floatingActions: [get(configuration, 'floatingActions', false)],
     loadRecord: fb.group({
       enabled: [get(configuration, 'loadRecord.enabled', false)],

diff --git a/libs/shared/src/lib/components/widgets/form-settings/tab-main/tab-main.component.html b/libs/shared/src/lib/components/widgets/form-settings/tab-main/tab-main.component.html
@@ -90,6 +90,81 @@ <h2>{{ 'common.general' | translate }}</h2>
     </div>
   </div>
 
+  <div
+    class="flex flex-wrap items-start"
+    formGroupName="completionPopup"
+    *ngIf="form"
+  >
+    <div class="flex-1 mr-4 min-w-max">
+      <ui-toggle formControlName="enabled">
+        <ng-container ngProjectAs="label">
+          {{ 'components.widget.form.completionPopup.label' | translate }}
+          <ui-icon
+            class="ml-1 cursor-help self-center"
+            icon="info_outline"
+            variant="grey"
+            [size]="18"
+            [uiTooltip]="
+              'components.widget.form.completionPopup.tooltip' | translate
+            "
+          ></ui-icon>
+        </ng-container>
+      </ui-toggle>
+    </div>
+
+    <div
+      uiFormFieldDirective
+      class="flex-1"
+      *ngIf="formGroup.get('completionPopup.enabled')?.value === true"
+    >
+      <label class="flex items-center">
+        {{ 'components.widget.form.completionPopup.titleField.label' | translate }}
+        <ui-icon
+          class="ml-1 cursor-help self-center"
+          icon="info_outline"
+          variant="grey"
+          [size]="18"
+          [uiTooltip]="
+            'components.widget.form.completionPopup.titleField.tooltip' | translate
+          "
+        ></ui-icon>
+      </label>
+      <input
+        formControlName="title"
+        type="text"
+        [placeholder]="
+          'components.widget.form.completionPopup.titleField.placeholder'
+            | translate
+        "
+      />
+    </div>
+
+    <div
+      uiFormFieldDirective
+      class="flex-1"
+      *ngIf="formGroup.get('completionPopup.enabled')?.value === true"
+    >
+      <label class="flex items-center">
+        {{ 'components.widget.form.completionPopup.text.label' | translate }}
+        <ui-icon
+          class="ml-1 cursor-help self-center"
+          icon="info_outline"
+          variant="grey"
+          [size]="18"
+          [uiTooltip]="
+            'components.widget.form.completionPopup.text.tooltip' | translate
+          "
+        ></ui-icon>
+      </label>
+      <ui-textarea
+        formControlName="text"
+        [placeholder]="
+          'components.widget.form.completionPopup.text.placeholder' | translate
+        "
+      ></ui-textarea>
+    </div>
+  </div>
+
   <div
     class="flex flex-wrap items-start"
     formGroupName="loadRecord"

diff --git a/libs/shared/src/lib/components/widgets/form-settings/tab-main/tab-main.module.ts b/libs/shared/src/lib/components/widgets/form-settings/tab-main/tab-main.module.ts
@@ -5,6 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   GraphQLSelectModule,
   SelectMenuModule,
+  TextareaModule,
   ToggleModule,
 } from '@oort-front/ui';
 import { IconModule } from '@oort-front/ui';
@@ -30,6 +31,7 @@ import { ButtonModule, FormWrapperModule, TooltipModule } from '@oort-front/ui';
     TooltipModule,
     ToggleModule,
     SelectMenuModule,
+    TextareaModule,
   ],
   exports: [TabMainComponent],
 })

diff --git a/libs/shared/src/lib/components/widgets/form/form-widget.component.html b/libs/shared/src/lib/components/widgets/form/form-widget.component.html
@@ -14,9 +14,9 @@
   <!-- Embedded form -->
   <shared-form
     [form]="form"
-    [floatingActions]="settings?.floatingActions"
+    [floatingActions]="floatingActions"
     [record]="record"
-    [mapQuestionState]="settings?.mapQuestionState"
+    [mapQuestionState]="mapQuestionState"
     [mode]="mode"
     (save)="onComplete($event)"
   ></shared-form>
@@ -27,3 +27,14 @@
     }}</ui-button>
   </ng-container>
 </ng-container>
+
+<ng-template #completionPopupTemplate let-data>
+  <ui-dialog size="medium">
+    <ng-container ngProjectAs="header">
+      <h3 *ngIf="data?.title" class="font-semibold">{{ data.title }}</h3>
+    </ng-container>
+    <ng-container ngProjectAs="content">
+      <p class="text-sm text-gray-500">{{ data?.text }}</p>
+    </ng-container>
+  </ui-dialog>
+</ng-template>