Merge pull request #108 from TYPO3incubator/task/contact-form

Task/contact form
TYPO3incubator · Apr 12, 2024 · ca39d1b · ca39d1b
2 parents cecab49 + 3819a1c
commit ca39d1b
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 15 deletions.
diff --git a/local_packages/football/Configuration/Form/FormDefinitions/contactForm.form.yaml b/local_packages/football/Configuration/Form/FormDefinitions/contactForm.form.yaml
@@ -34,10 +34,9 @@ renderables:
     label: 'Lorem ipsum dolor sit'
     renderables:
       -
-        defaultValue: ''
+        defaultValue: 'Name *'
         type: Text
         identifier: text-1
-        label: Name
         properties:
           fluidAdditionalAttributes:
             minlength: '3'
@@ -52,10 +51,9 @@ renderables:
           -
             identifier: NotEmpty
       -
-        defaultValue: ''
+        defaultValue: 'E-Mail address *'
         type: Email
         identifier: email-1
-        label: 'Email address'
         properties:
           fluidAdditionalAttributes:
             required: required
@@ -65,10 +63,9 @@ renderables:
           -
             identifier: NotEmpty
       -
-        defaultValue: ''
-        type: Text
+        defaultValue: 'Subject *'
+        type: Textarea
         identifier: text-3
-        label: Subject
         properties:
           fluidAdditionalAttributes:
             minlength: '2'
@@ -78,7 +75,7 @@ renderables:
           -
             options:
               minimum: '2'
-              maximum: '60'
+              maximum: '600'
             identifier: StringLength
           -
             identifier: NotEmpty

diff --git a/local_packages/football/Resources/Private/Scss/Abstracts/Varibles/_colors.scss b/local_packages/football/Resources/Private/Scss/Abstracts/Varibles/_colors.scss
@@ -4,7 +4,8 @@ $color__white: #ffffff;
 //PRIMARY COLORS
 $color__primary--dark-blue: #002345;
 $color__light-gray: #ECECE7;
-$color__primary: #FF4D08;
+$color__primary: #2D479A;
+$color__primary-red: #FF3232;
 
 //TEXT COLORS
 $color__text__default: $color__primary--dark-blue;

diff --git a/local_packages/football/Resources/Private/Scss/Elements/_form.scss b/local_packages/football/Resources/Private/Scss/Elements/_form.scss
@@ -0,0 +1,50 @@
+.pt-navbar {
+    form {
+        margin: auto;
+        padding-top: toRem(60);
+
+        @include media-breakpoint-up(md){
+            max-width: 75%;
+        }
+    }
+}
+
+.form-check {
+    padding-left: 0;
+    margin: toRem(15) 0;
+}
+
+.form-check-label, .form-label {
+    font-family: $font-primary;
+    color: $color__primary--dark-blue;
+}
+
+.form-check-label {
+    font-size: toRem(12);
+    font-weight: 300;
+    span {
+        padding-left: toRem(12);
+    }
+}
+
+.form-control {
+    border-radius: 0;
+    font-size: toRem(15);
+    font-weight: 300;
+}
+
+.required {
+    display: none;
+}
+
+.form-group{
+    input[type=text], input[type=email] {
+        min-height: toRem(48);
+    }
+}
+
+textarea {
+    &.form-control{
+        min-height: toRem(142);
+    }
+}
diff --git a/local_packages/football/Resources/Private/Scss/Elements/_import.scss b/local_packages/football/Resources/Private/Scss/Elements/_import.scss
@@ -1,3 +1,4 @@
 @import "cta";
 @import "footer-menu";
 @import "search";
+@import "form";
diff --git a/local_packages/football/Resources/Public/Css/index.css b/local_packages/football/Resources/Public/Css/index.css
@@ -10666,15 +10666,15 @@ h6,
 
 .btn-primary {
   padding: 0.5rem 1.875rem;
-  background-color: #FF4D08;
-  border-color: #FF4D08;
+  background-color: #2D479A;
+  border-color: #2D479A;
   transition: all 0.3s ease-in-out;
 }
 
 .btn-primary:hover {
   background-color: #ffffff;
-  color: #FF4D08;
-  border-color: #FF4D08;
+  color: #2D479A;
+  border-color: #2D479A;
 }
 
 .footer {
@@ -10709,7 +10709,7 @@ h6,
 .footer--icons a {
   margin-left: 0.5rem;
   padding: 0.5rem;
-  color: #FF4D08;
+  color: #2D479A;
   background-color: #ECECE7;
   border-radius: 1.25rem;
   text-decoration: none;
@@ -10806,7 +10806,7 @@ a {
 }
 
 .footer-menu--link:hover {
-  color: #FF4D08;
+  color: #2D479A;
 }
 
 .footer-menu--secondary {
@@ -10881,4 +10881,54 @@ a {
 
 .tx-indexedsearch-browsebox ul li.tx-indexedsearch-browselist-next {
   border: 0;
+}
+
+.pt-navbar form {
+  margin: auto;
+  padding-top: 3.75rem;
+}
+
+@media (min-width: 768px) {
+  .pt-navbar form {
+    max-width: 75%;
+  }
+}
+
+.form-check {
+  padding-left: 0;
+  margin: 0.9375rem 0;
+}
+
+.form-check-label,
+.form-label {
+  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  color: #002345;
+}
+
+.form-check-label {
+  font-size: 0.75rem;
+  font-weight: 300;
+}
+
+.form-check-label span {
+  padding-left: 0.75rem;
+}
+
+.form-control {
+  border-radius: 0;
+  font-size: 0.9375rem;
+  font-weight: 300;
+}
+
+.required {
+  display: none;
+}
+
+.form-group input[type=text],
+.form-group input[type=email] {
+  min-height: 3rem;
+}
+
+textarea.form-control {
+  min-height: 8.875rem;
 }