Add Contact page - initially adjusted to formspree.io

Karol Kania

08.50.2020 6687b294c6585a5dbd1d00d3e7fc5469b6268846

Add Contact page - initially adjusted to formspree.io

 assets/css/style.css

@@ -7,6 +7,8 @@
    --body-color: rgba(0, 0, 0, 0.7);
    --post-color: rgba(0, 0, 0, 0.44);
    --border-color: rgba(0, 0, 0, 0.15);
    --form-border-color: #9f9f9f;
    --form-button-hover-border-color: #000;
    --pre-bg-color: #f9f9fd;
    --nav-text-color: #5a5a5a;
    --tag-color: #424242;
@@ -22,6 +24,8 @@
    --body-color: rgb(169, 169, 179);
    --post-color: rgba(0, 0, 0, 0.44);
    --border-color: rgb(38, 38, 38);
    --form-border-color: rgb(169, 169, 179);
    --form-button-hover-border-color: #fff;
    --pre-bg-color: rgb(33, 33, 45);
    --nav-text-color: rgb(191, 191, 191);
    --tag-color: rgb(191, 191, 191);
@@ -994,4 +998,75 @@
        padding-left: 15%;
        width: 25%;
    }
}
}


/* (CONTACT) FORM */

.contact-form {
    margin-top: 30px;
}
.form-style{
    width: 100%;
}
.form-style ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.form-style ul li {
    display: block;
    margin-bottom: 10px;
    min-height: 35px;
}
.form-style ul li .field-style {
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    font-size: 14px;
    padding: 8px;
    outline: none;
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    color: var(--body-color);
}
.form-style ul li    .field-style:focus {
    box-shadow: 0 0 5px;
    border:1px solid;
}
.form-style ul li .field-split {
    width: 49%;
}
.form-style ul li .field-full {
    width: 100%;
}
.form-style ul li input.align-left {
    float:left;
}
.form-style ul li input.align-right {
    float:right;
}
.form-style ul li textarea {
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    color: var(--body-color);
    width: 100%;
    height: auto;
}
.form-style ul li input[type="button"], 
.form-style ul li input[type="submit"] {
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    display: inline-block;
    cursor: pointer;
    color: var(--body-color);
    text-decoration: none;
    width: 100%;
}
.form-style ul li input[type="button"]:hover, 
.form-style ul li input[type="submit"]:hover {
    background-color: var(--bg-color);
    border: 1px solid var(--form-button-hover-border-color);
}

/* (CONTACT) FORM END */

 exampleSite/config.toml

@@ -25,6 +25,8 @@
mainSections = ["post"]
images = ["images/site-feature-image.png"]
doNotLoadAnimations = false
contactFormAction = "https://formspree.io/f/your-form-hash-here"

# Google Site Verification
#googleSiteVerify = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"

@@ -76,3 +78,9 @@
  weight = 300
  identifier = "about"
  url = "/about/"

  [[menu.main]]
  name = "Contact"
  weight = 400
  identifier = "contact"
  url = "/contact/"

 exampleSite/content/contact.md

New file
@@ -0,0 +1,7 @@
---
author: Hugo Authors
title: Contact
date: 2019-03-08
description: Contact Page
contact: true
---

 i18n/en.toml

@@ -19,3 +19,6 @@

[comments]
other = "comments"

[send]
other = "Send"

 layouts/_default/single.html

@@ -1,7 +1,6 @@
{{ define "main" }}
    <div class="post {{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}">
        <div class="post-content">

            <div class="post-title">
                <h3>{{ .Title }}</h3>
                {{ if eq .Type "post"}}
@@ -15,6 +14,11 @@
            </div>

            {{ .Content }}

            {{- if (eq .Params.contact true) -}}
              {{- partial "contact.html" . -}}
            {{- end -}}

        </div>
        <div class="post-footer">
            <div class="info">

 layouts/partials/contact.html

New file
@@ -0,0 +1,19 @@

<div class="contact-form">
  <form class="form-style" method="POST" action="{{ .Site.Params.contactFormAction }}" data-toggle="validator">
    <ul>
      <li>
        <input class="field-style field-full" type="text" name="username" id="username" placeholder="Name" required>
      </li>
      <li>
        <input class="field-style field-full" type="email" id="email" name="email" placeholder="Email" required>
      </li>
      <li>
        <textarea class="field-style" name="message" id="message" rows="6" placeholder="{{ i18n "message" }}"></textarea>
      </li>
      <li>
        <input class="field-style" type="submit" value="{{ i18n "send" }}"></input>
      </li>
    </ul>
  </form>
</div>