expo get-email form improved

web/modules/custom/materio_expo/src/Form/GetEmail.php

@@ -33,13 +33,27 @@ class GetEmail extends FormBase {
       $url = Url::fromRoute('materio_expo.qr_controller_getfile', ['ref'=>$ref], ['absolute' => TRUE]);
       return new RedirectResponse($url->toString());
     }else{
+      $form['heading'] = [
+        '#type' => 'html_tag',
+        '#tag' => 'h3',
+        '#value' => $this->t("Thank you for stopping by at matériO's bOOth."),
+        '#weight' => '0',
+      ];
+
+      $form['welcome'] = [
+        '#type' => 'html_tag',
+        '#tag' => 'p',
+        '#value' => $this->t("In order to visualize the information of the exhibited materials, could you indicate your e-mail address?"),
+        '#weight' => '1',
+      ];
+
       $form['email'] = [
         '#type' => 'email',
         // '#title' => $this->t('Email'),
         '#attributes' => [
           'placeholder' => $this->t('Email')
         ],
-        '#weight' => '0',
+        '#weight' => '2',
       ];
       
       $form['ref'] = [
@@ -47,10 +61,16 @@ class GetEmail extends FormBase {
         '#value' => $ref
       ];
       
-      $form['submit'] = [
-        '#type' => 'submit',
-        '#value' => $this->t("Submit"),
+      $form['actions'] = [
+        '#type' => 'container',
+        '#weight' => '3',
       ];
+
+      $form['actions']['submit'] = [
+        '#type' => 'submit',
+        '#value' => $this->t("Go!")
+      ];
+
       return $form;
     }
   }

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -2868,6 +2868,26 @@ form#user-pass{
     }
   }
 }
+
+
+form#get-email {
+  padding:1em;
+  width:100%;
+  max-width: 450px;
+  input[type="email"]{
+    max-width: 95%;
+  } 
+  div#edit-actions{
+    text-align: right;
+
+  }
+  input[type="submit"]{
+    @include btn;
+    background-color: $color-base;
+    color: #fff;
+    margin: 0;
+  }
+}
 //  ___         _
 // | __|__  ___| |_ ___ _ _
 // | _/ _ \/ _ \  _/ -_) '_|
@@ -2981,4 +3001,3 @@ img.lazy{
     // background-color: red;
   }
 }
-