style message form

content/contact.md

@@ -1,5 +1,9 @@
 +++
 title = "Contact"
 menu = "main"
+type = "contact"
 +++
-[Contact me]({{< siteurl >}}/contact-form/formpage.html)
+
+Please send me some lovely words.
+
+{{<contact-form>}}

content/help

@@ -1,6 +0,0 @@
----
-title: "Help"
-date: 2021-09-23T00:30:17+02:00
-draft: true
----
-

content/page

@@ -1,6 +0,0 @@
----
-title: "Page"
-date: 2021-09-23T00:14:36+02:00
-draft: true
----
-

content/post

@@ -1,8 +0,0 @@
----
-title: "hugo installed"
-date: 2021-09-23T00:12:34+02:00
-draft: false
----
-
-Decentral remote with google computing powers
-

layouts/partials/custom_head.html

@@ -0,0 +1,4 @@
+{{ if eq .Type  "contact" }}
+<script src="/contact-form/jquery-3.6.0.min.js"></script>
+<script src="/contact-form/form.js"></script>
+{{ end }}

layouts/shortcodes/contact-form.html

@@ -0,0 +1,43 @@
+<div class="container">
+    <!-- Form Started -->
+    <div class="container form-top">
+        <div class="row">
+            <div class="panel panel-danger">
+                <div class="panel-body" >
+                    <form id="reused_form" >
+                      <br>
+                      <div class="meta-group" style="display: flex;justify-content: space-between;margin-bottom:0.5em;">
+                        <div class="form-group">
+                            <label>😀 Name</label>
+                            <input type="text" name="name" class="form-control" placeholder="Enter Name">
+                        </div>
+                        <div class="form-group">
+                            <label>✉️ Email</label>
+                            <input type="email" name="email" class="form-control" placeholder="Enter Email">
+                        </div>
+                      </div>
+                      <div >
+                        <div class="form-group"  text-align="center"  style="margin-bottom:0.5em;">
+                            <label>📝 Message</label>
+                            <textarea rows="3" name="message" style="max-width:712px" placeholder="Type Your Message"></textarea>
+                        </div>
+                        <center>
+                          <button type="submit" style="font-size:x-large">🏹 Post ↩️ </button>
+                        </center>
+                      </div>
+                    </form>
+                    <div id="error_message" style="width:100%; height:100%; display:none; ">
+                        <h4>
+                            Error
+                        </h4>
+                        Very sorry! There was an error sending your words.
+                    </div>
+                    <div id="success_message" style="width:100%; height:100%; display:none; ">
+  <h2>Success! Your Message was Sent Successfully.</h2>
+  </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Form Ended -->
+</div>

static/contact-form/form.css

@@ -1,43 +0,0 @@
-
-html
-{
-  height:100%;
-  width:100%;
-}
-body{    
-  background:url('images/jurassic-coast-1089035_1920.jpg') no-repeat;
-  background-size: cover;
-  height:100%;
-
-}
-
-.form-top{
-  margin-top: 30px;
-}
-.panel{
-  box-shadow: 0 1px 6px 0 rgba(0,0,0,.12), 0 1px 6px 0 rgba(0,0,0,.12);
-  border-radius: 6px;
-    border: 0;
-}
-@-moz-document url-prefix() {
-    .form-control{
-      height: auto;
-    }
-}
-.panel-primary{
-  background-color: #2c3e50;
-  color: #fff;
-}
-.panel-primary>.panel-heading {
-    color: #fff;
-    font-size: 20px;
-    background-color: #2c3e50;
-    border-color: #2c3e50;
-}
-.btn-warning{
-  background-color: transparent;
-  border-color: #bdc3c7;
-}
-
-
-

static/contact-form/form.js

@@ -1,7 +1,32 @@
 
 $(function()
 {
-    function after_form_submitted(data) 
+  function submit_error(data) {
+    $('#error_message').append('<ul></ul>');
+    if (data != null) {
+      jQuery.each(data.errors,function(key,val)
+      {
+          $('#error_message ul').append('<li>'+key+':'+val+'</li>');
+      });
+    }
+    $('#success_message').hide();
+    $('#error_message').show();
+
+    //reverse the response on the button
+    $('button[type="button"]', $form).each(function()
+    {
+        $btn = $(this);
+        label = $btn.prop('orig_label');
+        if(label)
+        {
+            $btn.prop('type','submit' );
+            $btn.text(label);
+            $btn.prop('orig_label','');
+        }
+    });
+  }
+
+    function after_form_submitted(data)
     {
         if(data.result == 'success')
         {
@@ -11,31 +36,11 @@ $(function()
         }
         else
         {
-            $('#error_message').append('<ul></ul>');
-
-            jQuery.each(data.errors,function(key,val)
-            {
-                $('#error_message ul').append('<li>'+key+':'+val+'</li>');
-            });
-            $('#success_message').hide();
-            $('#error_message').show();
-
-            //reverse the response on the button
-            $('button[type="button"]', $form).each(function()
-            {
-                $btn = $(this);
-                label = $btn.prop('orig_label');
-                if(label)
-                {
-                    $btn.prop('type','submit' ); 
-                    $btn.text(label);
-                    $btn.prop('orig_label','');
-                }
-            });
-            
-        }//else
+            submit_error(data);
+        }
     }
 
+
 	$('#reused_form').submit(function(e)
       {
         e.preventDefault();
@@ -45,19 +50,20 @@ $(function()
         $('button[type="submit"]', $form).each(function()
         {
             $btn = $(this);
-            $btn.prop('type','button' ); 
+            $btn.prop('type','button' );
             $btn.prop('orig_label',$btn.text());
             $btn.text('Sending ...');
         });
-        
+
 
                     $.ajax({
                 type: "POST",
                 url: 'handler.php',
                 data: $form.serialize(),
                 success: after_form_submitted,
-                dataType: 'json' 
-            });        
-        
-      });	
+                error: submit_error(null),
+                dataType: 'json'
+            });
+
+      });
 });