hr-design-system-handlebars 1.113.1 → 1.113.3

package/dist/views/components/forms/components/message.hbs

@@ -1,16 +1,28 @@
-<div class="flex flex-row items-center justify-between w-full">
+<div class="flex flex-col justify-between w-full gap-6 md:gap-10">
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/components/success_icon}}
-                <span class="h-5 font-bold text-success">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
+                <h3 class="font-bold text-success">{{~loca "webform_send_title_success"}}</h3>       
             {{else}}
                 {{> components/forms/components/error_icon _class="!block"}}
-                <span class="h-5 font-bold text-error dark:text-error-dark">{{~loca "webform_send_text_error"}}</span>  
+                <h3 class="font-bold text-error dark:text-error-dark">{{~loca "webform_send_title_error"}}</h3>  
             {{/if}}
-        </div>
-        {{#unless _success}}
-            {{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}} 
-                <span class="text-base ds-button-label ">Nochmal versuchen</span>        
-            {{/components/button/button}}  
-        {{/unless}}   
-</div>
+        </div>      
+</div>
+<span class="font-copy">
+    {{#if _locaKeyText}}
+        {{loca _locaKeyText}}
+    {{else}}
+        {{{_text}}}
+    {{/if}}
+</span>
+{{#unless _success}}
+    <div class="flex justify-end">
+        {{#> components/button/button _variant="primary" _size="lg" }} 
+            <span class="text-base ds-button-label ">{{loca "webform_send_form_back"}}</span>        
+        {{/components/button/button}}  
+        {{#*inline "htmlProperties"}}        
+            @click="retryHandler"
+        {{/inline}}
+    </div>
+{{/unless}}  

package/dist/views/components/forms/components/textarea.hbs

@@ -6,7 +6,7 @@
 >
    <div class="w-full h-4 bg-white dark:bg-black dark:text-text-dark"></div>
    <textarea
-      class="relative w-full pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
+      class="relative w-full py-px pl-4 placeholder-transparent bg-white placeholder:select-none dark:border-form-highlight-dark min-h-12 peer focus:border-b-2 focus:py-0 text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
       {{#if _required}}
@@ -35,7 +35,6 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
          :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}

package/dist/views/components/forms/webform.hbs

@@ -1,7 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/components/backgroundBox  }}  
-
-        
+    {{#>components/forms/components/backgroundBox  }} 
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
         </h3>
@@ -21,20 +19,43 @@
                 enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
                 accept-charset="utf-8"
                 
+            >
+                <div x-show="!wasPosted"             
+                    x-transition:enter="transition ease-out duration-300 delay-300"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-transition:leave="transition ease-in duration-75 delay-0"
+                    x-transition:leave-start="opacity-100 transform scale-100"
+                    x-transition:leave-end="opacity-0 transform scale-90"
                 >
-                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                    {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                {{> components/forms/components/controls }}
+                    {{> components/forms/components/controls }}
+                </div>
+                <div class="flex flex-col gap-6 md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak
+                    >
+                    {{#if this.successText}}
+                        {{> components/forms/components/message _success=true _locaKeyTitle="webform_send_title_success" _text=this.successText.richtext }}
+                    {{else}}
+                        {{> components/forms/components/message _success=true _locaKeyTitle="webform_send_title_success" _locaKeyText="webform_send_text_success" }}
+                    {{/if}}
+                </div>
 
-                <template id="successMessage">
-                    {{> components/forms/components/message _success=true }}
-                </template>
+                <div class="flex flex-col gap-6 md:gap-10" id="errorMessage"  x-show="wasPostedWithError" 
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak>
+                    {{> components/forms/components/message _success=false _locaKeyTitle="webform_send_title_error" _locaKeyText="webform_send_text_error"}}
+                </div>
 
-                <template id="errorMessage">
-                    {{> components/forms/components/message _success=false }}
-                </template>
-                
             </form>
+
+            
         </div>   
     {{/components/forms/components/backgroundBox }}
 {{~else~}}

package/dist/views_static/components/forms/components/controls.hbs

@@ -4,7 +4,7 @@
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
             <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
             <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
-            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler($event)"/>
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="submitButtonHandler($event)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

package/dist/views_static/components/forms/components/input.hbs

@@ -4,7 +4,7 @@
    x-init="validateField()"
    x-ignore
    >
-   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
+   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white placeholder:select-none text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
       :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"

package/dist/views_static/components/forms/components/message.hbs

@@ -1,16 +1,28 @@
-<div class="flex flex-row items-center justify-between w-full">
+<div class="flex flex-col justify-between w-full gap-6 md:gap-10">
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/components/success_icon}}
-                <span class="h-5 font-bold text-success">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
+                <h3 class="font-bold text-success">{{~loca "webform_send_title_success"}}</h3>       
             {{else}}
                 {{> components/forms/components/error_icon _class="!block"}}
-                <span class="h-5 font-bold text-error dark:text-error-dark">{{~loca "webform_send_text_error"}}</span>  
+                <h3 class="font-bold text-error dark:text-error-dark">{{~loca "webform_send_title_error"}}</h3>  
             {{/if}}
-        </div>
-        {{#unless _success}}
-            {{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}} 
-                <span class="text-base ds-button-label ">Nochmal versuchen</span>        
-            {{/components/button/button}}  
-        {{/unless}}   
-</div>
+        </div>      
+</div>
+<span class="font-copy">
+    {{#if _locaKeyText}}
+        {{loca _locaKeyText}}
+    {{else}}
+        {{{_text}}}
+    {{/if}}
+</span>
+{{#unless _success}}
+    <div class="flex justify-end">
+        {{#> components/button/button _variant="primary" _size="lg" }} 
+            <span class="text-base ds-button-label ">{{loca "webform_send_form_back"}}</span>        
+        {{/components/button/button}}  
+        {{#*inline "htmlProperties"}}        
+            @click="retryHandler"
+        {{/inline}}
+    </div>
+{{/unless}}  

package/dist/views_static/components/forms/components/textarea.hbs

@@ -6,7 +6,7 @@
 >
    <div class="w-full h-4 bg-white dark:bg-black dark:text-text-dark"></div>
    <textarea
-      class="relative w-full pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
+      class="relative w-full py-px pl-4 placeholder-transparent bg-white placeholder:select-none dark:border-form-highlight-dark min-h-12 peer focus:border-b-2 focus:py-0 text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
       {{#if _required}}
@@ -35,7 +35,6 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
          :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}

package/dist/views_static/components/forms/webform.hbs

@@ -1,7 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/components/backgroundBox  }}  
-
-        
+    {{#>components/forms/components/backgroundBox  }} 
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
         </h3>
@@ -21,20 +19,43 @@
                 enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
                 accept-charset="utf-8"
                 
+            >
+                <div x-show="!wasPosted"             
+                    x-transition:enter="transition ease-out duration-300 delay-300"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-transition:leave="transition ease-in duration-75 delay-0"
+                    x-transition:leave-start="opacity-100 transform scale-100"
+                    x-transition:leave-end="opacity-0 transform scale-90"
                 >
-                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                    {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                {{> components/forms/components/controls }}
+                    {{> components/forms/components/controls }}
+                </div>
+                <div class="flex flex-col gap-6 md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak
+                    >
+                    {{#if this.successText}}
+                        {{> components/forms/components/message _success=true _locaKeyTitle="webform_send_title_success" _text=this.successText.richtext }}
+                    {{else}}
+                        {{> components/forms/components/message _success=true _locaKeyTitle="webform_send_title_success" _locaKeyText="webform_send_text_success" }}
+                    {{/if}}
+                </div>
 
-                <template id="successMessage">
-                    {{> components/forms/components/message _success=true }}
-                </template>
+                <div class="flex flex-col gap-6 md:gap-10" id="errorMessage"  x-show="wasPostedWithError" 
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak>
+                    {{> components/forms/components/message _success=false _locaKeyTitle="webform_send_title_error" _locaKeyText="webform_send_text_error"}}
+                </div>
 
-                <template id="errorMessage">
-                    {{> components/forms/components/message _success=false }}
-                </template>
-                
             </form>
+
+            
         </div>   
     {{/components/forms/components/backgroundBox }}
 {{~else~}}

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.113.1",
+  "version": "1.113.3",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/brand/_default/conf/locatags.json

@@ -204,5 +204,8 @@
     "votingform_vote_result": "Anzahl der abgegebenen Stimmen: ",    
     "webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
     "webform_send_text_error": "Das Formular konnte nicht versendet werden.",
-    "webform_upload_label": "Datei auswählen"
+    "webform_upload_label": "Datei auswählen",
+    "webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+    "webform_send_form_back": "Zurück zum Formular"
 }

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

package/src/assets/css/custom-utilities.css

@@ -462,7 +462,7 @@
     }
 
     select:has(option:checked[value='']) {
-        @apply text-transparent;
+        @apply text-transparent select-none;
     }
 
     .form-checkbox:checked::after {

package/src/assets/fixtures/content/copytext/copytext_webform.json

@@ -10,7 +10,15 @@
                 "hasNewWebForm": true,
                 "title": "Kontaktformular",
                 "jsonUrl": "https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de",
-                "errorMessages": "errorMessages",
+                "successText":
+                {
+                    "richtext":"Liebe Nutzerin, lieber Nutzer,<br><br>ich werde mich so schnell wie möglich um Ihr Anliegen kümmern. Hier geht's zur <a class='' href='https://www.hessenschau.de/index.html'>hessenschau.de-Startseite</a> mit aktuellen Nachrichten aus Hessen.<br><br>Viele Grüße, <br><br>Karsten Hufer"
+                },
+                "errorMessages": 
+                {
+                    "@->jsoninclude": "forms/error_messages.inc.json",
+                    "@->contentpath": "error-messages"
+                },
                 "isMultipart": "isMultipart",
                 "trackingInformations": "trackingInformations",
                 "fields":[

package/src/assets/fixtures/content/copytext/copytext_webform_simple.json

@@ -0,0 +1,36 @@
+{
+    "copytextParagraph": [
+        {
+            "isHeadline": true,
+            "text": "Copytext mit Formular"
+        },
+        {
+            "paragraphBoxItem": {
+                "isWebForm": true,
+                "hasNewWebForm": true,
+                "title": "Kontaktformular",
+                "successText":
+                {
+                    "richtext":"Liebe Nutzerin, lieber Nutzer,<br><br>ich werde mich so schnell wie möglich um Ihr Anliegen kümmern. Hier geht's zur <a class='' href='https://www.hessenschau.de/index.html'>hessenschau.de-Startseite</a> mit aktuellen Nachrichten aus Hessen.<br><br>Viele Grüße, <br><br>Karsten Hufer"
+                },
+                "jsonUrl": "https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de",
+                "errorMessages": 
+                    {
+                        "@->jsoninclude": "forms/error_messages.inc.json",
+                        "@->contentpath": "error-messages"
+
+                    },
+                "isMultipart": "isMultipart",
+                "trackingInformations": "trackingInformations",
+                "fields":[
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "input-text-vorname"
+                    }
+                ]
+                
+            }
+        }
+        
+    ]
+}

package/src/assets/fixtures/forms/error_messages.inc.json

@@ -0,0 +1,3 @@
+{
+    "error-messages": ""form_error_required":"Server: Pflichtfeld","form_error_max":"Server: Zu viele Zeichen","form_error_validurl":"Server: Ungültige URL","form_error_empty":"Server: Darf nicht ausgefüllt werden","form_error_constants_or_null":"Server: Ungültiger Wert","form_error_constants":"Server: Ungültiger Wert","form_error_max_multivalue":"Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten","vote_error_identity_already_used":"Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.","vote_error_token_request_count_exceeded":"Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.","form_error_email":"Server: Ungültige E-Mail-Adresse""
+}

package/src/assets/js/alpine.js

@@ -54,7 +54,8 @@ Alpine.store('sharingBottomPos', {
 })
 Alpine.store('forms', {
     submissionAttempted: [],
-    serverErrorFields: [{}]
+    serverErrorFields: [{}],
+    errorMessages: [{}]
 })
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)

package/src/stories/views/components/content/copytext/copytext-form.stories.js

@@ -1,6 +1,7 @@
 import copytext from './copytext.hbs'
 
 import copytext_webform_json from './fixtures/copytext_webform.json'
+import copytext_webform_simple_json from './fixtures/copytext_webform_simple.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -40,4 +41,54 @@ export const WithWebform = {
     name: 'Formular',
     args: copytext_webform_json,
 }
-
+export const WithWebformStatusOk = {
+    render: Template.bind({}),
+    name: 'Formular Status OK',
+    args: copytext_webform_simple_json,
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                     "status":"OK"
+                },
+            },
+        ]
+    }
+}
+export const WithWebformStatusNone = {
+    render: Template.bind({}),
+    name: 'Formular Status None',
+    args: copytext_webform_simple_json,
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                    "status":""
+                },
+            },
+        ]
+    }
+}
+export const WithWebformStatusValidationError = {
+    render: Template.bind({}),
+    name: 'Formular Status Validation Error',
+    args: copytext_webform_simple_json,
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                     "status":"VALIDATION_ERROR", "errors":{"vorname":"form_error_required"}
+                },
+            },
+        ]
+    }
+}

package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isUpload":true,"asString":"upload"},"name":"Datei Hochladen","label":"Wählen Sie eine Datei zum Hochladen","description":"Maximale Dateigröße: 35 MB.","isRequired":true},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":false,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":false},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","successText":{"richtext":"Liebe Nutzerin, lieber Nutzer,<br><br>ich werde mich so schnell wie möglich um Ihr Anliegen kümmern. Hier geht's zur <a class='' href='https://www.hessenschau.de/index.html'>hessenschau.de-Startseite</a> mit aktuellen Nachrichten aus Hessen.<br><br>Viele Grüße, <br><br>Karsten Hufer"},"errorMessages":"&quot;form_error_required&quot;:&quot;Server: Pflichtfeld&quot;,&quot;form_error_max&quot;:&quot;Server: Zu viele Zeichen&quot;,&quot;form_error_validurl&quot;:&quot;Server: Ungültige URL&quot;,&quot;form_error_empty&quot;:&quot;Server: Darf nicht ausgefüllt werden&quot;,&quot;form_error_constants_or_null&quot;:&quot;Server: Ungültiger Wert&quot;,&quot;form_error_constants&quot;:&quot;Server: Ungültiger Wert&quot;,&quot;form_error_max_multivalue&quot;:&quot;Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten&quot;,&quot;vote_error_identity_already_used&quot;:&quot;Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.&quot;,&quot;vote_error_token_request_count_exceeded&quot;:&quot;Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.&quot;,&quot;form_error_email&quot;:&quot;Server: Ungültige E-Mail-Adresse&quot;","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isUpload":true,"asString":"upload"},"name":"Datei Hochladen","label":"Wählen Sie eine Datei zum Hochladen","description":"Maximale Dateigröße: 35 MB.","isRequired":true},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":false,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":false},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}