hr-design-system-handlebars 1.113.3 → 1.113.5

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.113.5 (Wed Oct 30 2024)
+
+#### 🐛 Bug Fix
+
+- Contactform some fixes [#1132](https://github.com/mumprod/hr-design-system-handlebars/pull/1132) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.113.4 (Tue Oct 29 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3413: adjust form spacing [#1131](https://github.com/mumprod/hr-design-system-handlebars/pull/1131) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.113.3 (Tue Oct 29 2024)
 
 #### 🐛 Bug Fix

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

package/dist/assets/index.css

@@ -1535,6 +1535,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .mt-60 {
   margin-top: 15rem;
 }
+.mt-7 {
+  margin-top: 1.75rem;
+}
 .mt-9 {
   margin-top: 2.25rem;
 }
@@ -1728,6 +1731,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .min-h-3 {
   min-height: 0.75rem;
 }
+.min-h-5 {
+  min-height: 1.25rem;
+}
 .min-h-6 {
   min-height: 1.5rem;
 }
@@ -2179,9 +2185,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .gap-y-3 {
   row-gap: 0.75rem;
 }
-.gap-y-4 {
-  row-gap: 1rem;
-}
 .gap-y-5 {
   row-gap: 1.25rem;
 }
@@ -3621,7 +3624,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1730197524977;
+  counter-reset: cnt1730284744052;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4035,7 +4038,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1730197524977 1;
+  counter-increment: cnt1730284744052 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4053,7 +4056,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1730197524977);
+  content: counter(cnt1730284744052);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -7016,14 +7019,14 @@ select:has(option:checked[value='']) {
     margin-bottom: 0px;
   }
 
-  .md\:mb-12 {
-    margin-bottom: 3rem;
-  }
-
   .md\:mb-16 {
     margin-bottom: 4rem;
   }
 
+  .md\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
   .md\:mb-3 {
     margin-bottom: 0.75rem;
   }
@@ -7237,8 +7240,8 @@ select:has(option:checked[value='']) {
     row-gap: 3.5rem;
   }
 
-  .md\:gap-y-5 {
-    row-gap: 1.25rem;
+  .md\:gap-y-2 {
+    row-gap: 0.5rem;
   }
 
   .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {

package/dist/assets/js/components/forms/js/contactForm.alpine.js

@@ -19,7 +19,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         formInit(){
             this.checkForJsonURL()
             this.$store.forms.submissionAttempted[formId] = false; 
-            this.$store.forms.errorMessages = JSON.parse( "{" + errorMessages.replace(/"/g,'"') + "}")
+            this.$store.forms.errorMessages = JSON.parse(errorMessages.replace(/"/g,'"'))
         },
         submitButtonHandler(event) {
             if(this.form.reportValidity()){
@@ -30,7 +30,8 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         },
         retryHandler() {
             this.wasPosted = false;
-            this.wasPostedWithError = false;  
+            this.wasPostedWithError = false;
+            this.formWrapper.scrollIntoView({ behavior: 'smooth' })
         },
         handleValidationErrors(errors) {
             console.log('Validation Errors:', errors);
@@ -95,11 +96,13 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
                                     console.log("OK");
                                     this.wasPosted = true;
                                     this.wasPostedWithSuccess = true;
+                                    this.formWrapper.scrollIntoView({ behavior: 'smooth' })
                                     break;
                                 default:
                                     console.log("default");
                                     this.wasPosted = true;
                                     this.wasPostedWithError = true;
+                                    this.formWrapper.scrollIntoView({ behavior: 'smooth' })
                                     break;
                             }
                         } else {

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

@@ -1,3 +1,3 @@
-<div class="relative px-5 pt-6 pb-8 mt-4 sm:mt-5 bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
+<div class="relative px-5 pt-6 pb-8 mb-5 mt-7 sm:mt-12 bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
     {{> @partial-block }}
 </div>

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

@@ -1,5 +1,5 @@
 {{~changeRandom~}}
-<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
+<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-5 md:mb-7{{/unless}} gap-y-1 md:gap-y-2" 
    {{#unless _inGroup}}
       {{#if _required}}
          ax-load
@@ -75,7 +75,7 @@
    </label>
 </div>  
 {{#unless _inGroup}}
-   <div class="font-heading">     
+   <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}

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

@@ -5,8 +5,8 @@
         x-ignore
     {{/if}}
 >
-<div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
-    <legend class="text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">
+<div class="relative flex flex-col w-full mb-5 md:mb-7 gap-y-1 md:gap-y-2">
+    <legend class="mb-1 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading md:mb-2">
         {{#if _hasBody}}
             {{decorator_body}}{{#if _required}}*{{/if}}
         {{else}}
@@ -37,7 +37,7 @@
             </div>  
         {{/each}}
     </div>
-    <div class="font-heading">     
+    <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}

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

@@ -1,14 +1,14 @@
 <div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
-    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
     <div class="flex items-center justify-end w-full basis-full">
         <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="submitButtonHandler($event)"/>
+            <input type="submit" class="pl-2 cursor-pointer" value="{{loca "form_button_submit"}}" @click.prevent="submitButtonHandler($event)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 
-            <span class="text-base ds-button-label ">Zurücksetzen</span>        
+            <span class="text-base ds-button-label ">{{loca "form_button_reset"}}</span>        
         {{/components/button/button}}
 
     </div>

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

@@ -3,7 +3,7 @@
 
         {{#if this.caption}}         
             <fieldset>
-                <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
+                <legend class="mb-2 text-lg font-bold md:mb-3 text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
                 {{~> components/forms/components/fields _formId=../_formId}}
             </fieldset>            
         {{else}}

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

@@ -64,7 +64,7 @@
       {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
-   <div class="flex items-end justify-between h-5 font-heading">     
+   <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}

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

@@ -2,14 +2,14 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/components/success_icon}}
-                <h3 class="font-bold text-success">{{~loca "webform_send_title_success"}}</h3>       
+                <h3 class="font-bold text-success pt-0.5">{{~loca "webform_send_title_success"}}</h3>       
             {{else}}
                 {{> components/forms/components/error_icon _class="!block"}}
-                <h3 class="font-bold text-error dark:text-error-dark">{{~loca "webform_send_title_error"}}</h3>  
+                <h3 class="font-bold text-error dark:text-error-dark pt-0.5">{{~loca "webform_send_title_error"}}</h3>  
             {{/if}}
         </div>      
 </div>
-<span class="font-copy">
+<span class="font-copy text-text dark:text-text-dark">
     {{#if _locaKeyText}}
         {{loca _locaKeyText}}
     {{else}}

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

@@ -43,7 +43,7 @@
     ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
-    <div class="flex items-end justify-between h-5 font-heading">     
+    <div class="flex items-end justify-between min-h-5 font-heading">     
         {{#if _description}}  
             <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}

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

@@ -64,7 +64,7 @@
             {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
-   <div class="flex items-end justify-between h-5 font-heading">     
+   <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}

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

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-6 gap-y-1 md:mb-12"
+<div class="relative flex flex-col w-full mb-5 gap-y-1 md:mb-7"
         ax-load
         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
         x-init="validateUpload()"
@@ -61,7 +61,7 @@
             </button>
         </div>
     </div>
-    <div class="font-heading">     
+    <div class="flex items-end justify-between min-h-5 font-heading">     
         {{#if _description}}  
             <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
         {{/if}}

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

@@ -11,7 +11,7 @@
                 x-init="formInit()"
                 x-ignore
 
-                @submit.prevent="submitData"
+                @submit.prevent
                 id="form{{getRandom}}"     
                 class="relative flex flex-col justify-center overflow-hidden group" 
                 action="{{this.url}}" 

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

@@ -1,3 +1,3 @@
-<div class="relative px-5 pt-6 pb-8 mt-4 sm:mt-5 bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
+<div class="relative px-5 pt-6 pb-8 mb-5 mt-7 sm:mt-12 bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
     {{> @partial-block }}
 </div>

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

@@ -1,5 +1,5 @@
 {{~changeRandom~}}
-<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
+<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-5 md:mb-7{{/unless}} gap-y-1 md:gap-y-2" 
    {{#unless _inGroup}}
       {{#if _required}}
          ax-load
@@ -75,7 +75,7 @@
    </label>
 </div>  
 {{#unless _inGroup}}
-   <div class="font-heading">     
+   <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}

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

@@ -5,8 +5,8 @@
         x-ignore
     {{/if}}
 >
-<div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
-    <legend class="text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">
+<div class="relative flex flex-col w-full mb-5 md:mb-7 gap-y-1 md:gap-y-2">
+    <legend class="mb-1 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading md:mb-2">
         {{#if _hasBody}}
             {{decorator_body}}{{#if _required}}*{{/if}}
         {{else}}
@@ -37,7 +37,7 @@
             </div>  
         {{/each}}
     </div>
-    <div class="font-heading">     
+    <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}

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

@@ -1,14 +1,14 @@
 <div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
-    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
     <div class="flex items-center justify-end w-full basis-full">
         <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="submitButtonHandler($event)"/>
+            <input type="submit" class="pl-2 cursor-pointer" value="{{loca "form_button_submit"}}" @click.prevent="submitButtonHandler($event)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 
-            <span class="text-base ds-button-label ">Zurücksetzen</span>        
+            <span class="text-base ds-button-label ">{{loca "form_button_reset"}}</span>        
         {{/components/button/button}}
 
     </div>

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

@@ -3,7 +3,7 @@
 
         {{#if this.caption}}         
             <fieldset>
-                <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
+                <legend class="mb-2 text-lg font-bold md:mb-3 text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
                 {{~> components/forms/components/fields _formId=../_formId}}
             </fieldset>            
         {{else}}

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

@@ -64,7 +64,7 @@
       {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
-   <div class="flex items-end justify-between h-5 font-heading">     
+   <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}

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

@@ -2,14 +2,14 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/components/success_icon}}
-                <h3 class="font-bold text-success">{{~loca "webform_send_title_success"}}</h3>       
+                <h3 class="font-bold text-success pt-0.5">{{~loca "webform_send_title_success"}}</h3>       
             {{else}}
                 {{> components/forms/components/error_icon _class="!block"}}
-                <h3 class="font-bold text-error dark:text-error-dark">{{~loca "webform_send_title_error"}}</h3>  
+                <h3 class="font-bold text-error dark:text-error-dark pt-0.5">{{~loca "webform_send_title_error"}}</h3>  
             {{/if}}
         </div>      
 </div>
-<span class="font-copy">
+<span class="font-copy text-text dark:text-text-dark">
     {{#if _locaKeyText}}
         {{loca _locaKeyText}}
     {{else}}

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

@@ -43,7 +43,7 @@
     ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
-    <div class="flex items-end justify-between h-5 font-heading">     
+    <div class="flex items-end justify-between min-h-5 font-heading">     
         {{#if _description}}  
             <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}

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

@@ -64,7 +64,7 @@
             {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
-   <div class="flex items-end justify-between h-5 font-heading">     
+   <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}

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

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-6 gap-y-1 md:mb-12"
+<div class="relative flex flex-col w-full mb-5 gap-y-1 md:mb-7"
         ax-load
         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
         x-init="validateUpload()"
@@ -61,7 +61,7 @@
             </button>
         </div>
     </div>
-    <div class="font-heading">     
+    <div class="flex items-end justify-between min-h-5 font-heading">     
         {{#if _description}}  
             <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
         {{/if}}

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

@@ -11,7 +11,7 @@
                 x-init="formInit()"
                 x-ignore
 
-                @submit.prevent="submitData"
+                @submit.prevent
                 id="form{{getRandom}}"     
                 class="relative flex flex-col justify-center overflow-hidden group" 
                 action="{{this.url}}" 

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.3",
+  "version": "1.113.5",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

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

@@ -207,5 +207,8 @@
     "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"
+    "webform_send_form_back": "Zurück zum Formular",
+    "form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

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

@@ -208,6 +208,9 @@
 	"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",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

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

@@ -1,3 +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""
+    "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/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","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}]}}]}
+{"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}]}}]}

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

@@ -1 +1 @@
-{"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":"&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 von Vorname","defaultValue":"","isHidden":false,"isRequired":false}]}}]}
+{"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":"{&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 von Vorname","defaultValue":"","isHidden":false,"isRequired":false}]}}]}

package/src/stories/views/components/forms/components/backgroundBox.hbs

@@ -1,3 +1,3 @@
-<div class="relative px-5 pt-6 pb-8 mt-4 sm:mt-5 bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
+<div class="relative px-5 pt-6 pb-8 mb-5 mt-7 sm:mt-12 bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
     {{> @partial-block }}
 </div>

package/src/stories/views/components/forms/components/choice.hbs

@@ -1,5 +1,5 @@
 {{~changeRandom~}}
-<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
+<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-5 md:mb-7{{/unless}} gap-y-1 md:gap-y-2" 
    {{#unless _inGroup}}
       {{#if _required}}
          ax-load
@@ -75,7 +75,7 @@
    </label>
 </div>  
 {{#unless _inGroup}}
-   <div class="font-heading">     
+   <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}

package/src/stories/views/components/forms/components/choiceGroup.hbs

@@ -5,8 +5,8 @@
         x-ignore
     {{/if}}
 >
-<div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
-    <legend class="text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">
+<div class="relative flex flex-col w-full mb-5 md:mb-7 gap-y-1 md:gap-y-2">
+    <legend class="mb-1 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading md:mb-2">
         {{#if _hasBody}}
             {{decorator_body}}{{#if _required}}*{{/if}}
         {{else}}
@@ -37,7 +37,7 @@
             </div>  
         {{/each}}
     </div>
-    <div class="font-heading">     
+    <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}

package/src/stories/views/components/forms/components/controls.hbs

@@ -1,14 +1,14 @@
 <div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
-    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
     <div class="flex items-center justify-end w-full basis-full">
         <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="submitButtonHandler($event)"/>
+            <input type="submit" class="pl-2 cursor-pointer" value="{{loca "form_button_submit"}}" @click.prevent="submitButtonHandler($event)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 
-            <span class="text-base ds-button-label ">Zurücksetzen</span>        
+            <span class="text-base ds-button-label ">{{loca "form_button_reset"}}</span>        
         {{/components/button/button}}
 
     </div>

package/src/stories/views/components/forms/components/fields.hbs

@@ -3,7 +3,7 @@
 
         {{#if this.caption}}         
             <fieldset>
-                <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
+                <legend class="mb-2 text-lg font-bold md:mb-3 text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
                 {{~> components/forms/components/fields _formId=../_formId}}
             </fieldset>            
         {{else}}

package/src/stories/views/components/forms/components/input.hbs

@@ -64,7 +64,7 @@
       {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
-   <div class="flex items-end justify-between h-5 font-heading">     
+   <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}

package/src/stories/views/components/forms/components/message.hbs

@@ -2,14 +2,14 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/components/success_icon}}
-                <h3 class="font-bold text-success">{{~loca "webform_send_title_success"}}</h3>       
+                <h3 class="font-bold text-success pt-0.5">{{~loca "webform_send_title_success"}}</h3>       
             {{else}}
                 {{> components/forms/components/error_icon _class="!block"}}
-                <h3 class="font-bold text-error dark:text-error-dark">{{~loca "webform_send_title_error"}}</h3>  
+                <h3 class="font-bold text-error dark:text-error-dark pt-0.5">{{~loca "webform_send_title_error"}}</h3>  
             {{/if}}
         </div>      
 </div>
-<span class="font-copy">
+<span class="font-copy text-text dark:text-text-dark">
     {{#if _locaKeyText}}
         {{loca _locaKeyText}}
     {{else}}

package/src/stories/views/components/forms/components/select.hbs

@@ -43,7 +43,7 @@
     ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
-    <div class="flex items-end justify-between h-5 font-heading">     
+    <div class="flex items-end justify-between min-h-5 font-heading">     
         {{#if _description}}  
             <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}

package/src/stories/views/components/forms/components/textarea.hbs

@@ -64,7 +64,7 @@
             {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
-   <div class="flex items-end justify-between h-5 font-heading">     
+   <div class="flex items-end justify-between min-h-5 font-heading">     
       {{#if _description}}  
          <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}

package/src/stories/views/components/forms/components/upload.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-6 gap-y-1 md:mb-12"
+<div class="relative flex flex-col w-full mb-5 gap-y-1 md:mb-7"
         ax-load
         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
         x-init="validateUpload()"
@@ -61,7 +61,7 @@
             </button>
         </div>
     </div>
-    <div class="font-heading">     
+    <div class="flex items-end justify-between min-h-5 font-heading">     
         {{#if _description}}  
             <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
         {{/if}}

package/src/stories/views/components/forms/form_upload.stories.js

@@ -18,11 +18,11 @@ export default {
 }
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
             <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
                 {{> components/forms/components/fields }}
             </form>
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
   `)
     return hbsTemplate({ ...args })
 }

package/src/stories/views/components/forms/js/contactForm.alpine.js

@@ -19,7 +19,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         formInit(){
             this.checkForJsonURL()
             this.$store.forms.submissionAttempted[formId] = false; 
-            this.$store.forms.errorMessages = JSON.parse( "{" + errorMessages.replace(/"/g,'"') + "}")
+            this.$store.forms.errorMessages = JSON.parse(errorMessages.replace(/"/g,'"'))
         },
         submitButtonHandler(event) {
             if(this.form.reportValidity()){
@@ -30,7 +30,8 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         },
         retryHandler() {
             this.wasPosted = false;
-            this.wasPostedWithError = false;  
+            this.wasPostedWithError = false;
+            this.formWrapper.scrollIntoView({ behavior: 'smooth' })
         },
         handleValidationErrors(errors) {
             console.log('Validation Errors:', errors);
@@ -95,11 +96,13 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
                                     console.log("OK");
                                     this.wasPosted = true;
                                     this.wasPostedWithSuccess = true;
+                                    this.formWrapper.scrollIntoView({ behavior: 'smooth' })
                                     break;
                                 default:
                                     console.log("default");
                                     this.wasPosted = true;
                                     this.wasPostedWithError = true;
+                                    this.formWrapper.scrollIntoView({ behavior: 'smooth' })
                                     break;
                             }
                         } else {

package/src/stories/views/components/forms/webform.hbs

@@ -11,7 +11,7 @@
                 x-init="formInit()"
                 x-ignore
 
-                @submit.prevent="submitData"
+                @submit.prevent
                 id="form{{getRandom}}"     
                 class="relative flex flex-col justify-center overflow-hidden group" 
                 action="{{this.url}}"