Make contact form configurable

exampleSite/config.toml

@@ -39,6 +39,22 @@ summarylength = 25
   googleAnalitycsID = "Your ID"
   # We're using formspree.io for form handling, paste your formspree url below
   formspreeFormUrl  = "https://formspree.io/myykjpje"
+
+  # Contact Form
+  [params.contactForm]
+    placeholder_first_name        = "First Name"
+    placeholder_last_name         = "Last Name"
+    placeholder_email             = "Email"
+    placeholder_project_type      = "Project Type"
+    placeholder_about_the_project = "About the Project"
+    send_message                  = "Send Message"
+
+    [[params.contactForm.projectType]]
+      value = "gd"
+      title  = "Graphics Design"
+    [[params.contactForm.projectType]]
+      value = "wd"
+      title  = "Web Design"
   
   # Navbar Action Button
   [params.navAction]

layouts/contact/list.html

@@ -13,31 +13,32 @@
           <form id="contact-form" action="{{ .Site.Params.formspreeFormUrl }}" method="POST">
             <div class="row">
               <div class="col-lg-6">
-                <input type="text" class="form-control" name="first-name" id="first-name" placeholder="First Name">
+                <input type="text" class="form-control" name="first-name" id="first-name" placeholder="{{ .Site.Params.contactForm.placeholder_first_name }}">
               </div>
               <div class="col-lg-6">
-                <input type="text" class="form-control" name="last-name" id="last-name" placeholder="Last Name">
+                <input type="text" class="form-control" name="last-name" id="last-name" placeholder="{{ .Site.Params.contactForm.placeholder_last_name }}">
               </div>
               <div class="col-lg-6">
-                <input type="email" class="form-control" name="email" id="email" placeholder="Email">
+                <input type="email" class="form-control" name="email" id="email" placeholder="{{ .Site.Params.contactForm.placeholder_email }}">
               </div>
               <div class="col-lg-6">
                 <div class="select-wrapper">
                   <select class="form-control" id="projectType" name="project-type">
-                    <option value="" selected disabled hidden>Project Type</option>
+                    <option value="" selected disabled hidden>{{ .Site.Params.contactForm.placeholder_project_type }}</option>
-                    <option value="gd">Graphics Design</option>
+                    {{ range .Site.Params.contactForm.projectType }}
-                    <option value="wb">Web Design</option>
+                    <option value="{{ .value }}">{{ .title }}</option>
+                    {{ end }}
                   </select>
                 </div>
               </div>
               <div class="col-12">
-                <textarea class="form-control" id="aboutProject" name="about-project" rows="6" placeholder="About the Project"></textarea>
+                <textarea class="form-control" id="aboutProject" name="about-project" rows="6" placeholder="{{ .Site.Params.contactForm.placeholder_about_the_project }}"></textarea>
               </div>
               <div class="col-12">
                 <button type="submit" class="btn btn-primary" id="contact-form-button">
                   <span class="btn-area">
-                    <span data-text="Send Message">
+                    <span data-text="{{ .Site.Params.contactForm.send_message }}">
-                      Send Message
+                      {{ .Site.Params.contactForm.send_message }}
                     </span>
                   </span>
                 </button>
@@ -50,4 +51,4 @@
     </div>
   </div>
 </section>
-{{ end }}
+{{ end }}