contact form feature

README-jp.md

@@ -56,6 +56,7 @@
   - [Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary)
 - アナリティクス (Google アナリティクス)
 - クッキー使用同意機能
+- お問い合わせフォーム機能 (Google フォーム)
 - サイト内検索機能
 - コード圧縮によるフットプリントの縮小 (`HTML` `JS` `SCSS`)
 - モバイルアプリサポート

README-pt.md

@@ -56,6 +56,7 @@ Eu estava criando meu wbesite e pensei em fazê-lo como um modelo que eu poderia
   - [Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary)
 - Analytics (Google Analytics)
 - Consentimento para usar cookies
+- Recurso de formulário de contato (Formulários Google)
 - Buscador no site
 - Compressão de código (`HTML` `JS` `SCSS`)
 - Suporte a dispositivos móveis

README.md

@@ -56,6 +56,7 @@ I was going to make my website and thought if I did it as a template, I could sh
   - [Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary)
 - Analytics (Google Analytics)
 - Cookie consent feature
+- Contact form feature (Google Forms)
 - Site Search feature
 - Code Compression for small footprint (`HTML` `JS` `SCSS`)
 - Mobile App support

_data/conf/main.yml

@@ -229,6 +229,18 @@ contacts_open_in_new_tab: true
 # link verification for mastodon (https://docs.joinmastodon.org/user/profile/#verification)
 contacts_mastodon_link_verification: false
 
+###########################################################
+#                Contact form
+###########################################################
+# this will add contact form feature.
+# make sure google_forms_contact_form_url is set in _data/owner/[language].yml
+contact_form:
+  enable: false
+  # select one below
+  # 1. slideBoxTopToDown
+  # 2. slideBoxBottomToUp
+  slideType: slideBoxBottomToUp
+
 ###########################################################
 #                Copyright text
 ###########################################################

_data/conf/others.yml

@@ -19,6 +19,8 @@ about:
   #sub_title_icon: "fa fa-star"
   # to disable icon, comment below
   email_icon: "fa fa-envelope-o"
+  # to enable contact button, set to true
+  show_contact_form_button: true
 
 ######################### Links ###########################
 

_data/lang/en.yml

@@ -171,6 +171,11 @@ constants:
   welcome: Welcome
   sample: Sample
 
+# for contact form
+contact_form:
+  button_name: Contact Form
+  formLoadingText: Loading the Contact Form...
+
 # for cookie consent
 cookie_consent:
   privacy_policy_link_text: *privacy_policy_title

_data/lang/ja.yml

@@ -171,6 +171,11 @@ constants:
   welcome: ようこそ
   sample: サンプル
 
+# for contact form
+contact_form:
+  button_name: お問い合わせフォーム
+  formLoadingText: お問い合わせフォームの読み込み中…
+
 # for cookie consent
 cookie_consent:
   privacy_policy_link_text: *privacy_policy_title

_data/lang/pt.yml

@@ -171,6 +171,11 @@ constants:
   welcome: Bem vindo
   sample: Amostra
 
+# for contact form
+contact_form:
+  button_name: Formulário de Contato
+  formLoadingText: Carregando o Formulário de Contato...
+
 # for cookie consent
 cookie_consent:
   privacy_policy_link_text: *privacy_policy_title

_data/owner/en.yml

@@ -70,3 +70,12 @@ google_analytics_id: ""
 # make sure you set meta.google_site_verify: true in _data/conf/main.yml
 # make sure your environment does not match with google.site_verification.ignore in _data/conf/main.yml
 google_site_verification: ""
+
+# make sure you set contact_form.enable: true in _data/conf/main.yml
+# - Create a form in Google Forms. You can use the template named "Contact Information".
+# - Customize the form colors and response validation according to your needs.
+# - To disable forced Google sign-in, go to "Settings > Response" and switch off the "Limit to 1 response".
+# - Click the "Send" button at the top right.
+# - Click the link icon from "Send via" list and copy the link.
+# - Then paste the link between double quotes.
+google_forms_contact_form_url: ""

_data/owner/ja.yml

@@ -2,13 +2,13 @@
 # Owner's Personal Information
 ###########################################################
 # This is your brand name
-brand: "Your Brand"
+brand: "サイト名"
 
 # text below the brand name
 brand_sub_text: "$site_sample"
 
 # used for seo meta post author (if it's not defined in post)
-name: "Your Name"
+name: "作者名"
 
 # home page top header texts
 home:
@@ -42,7 +42,7 @@ creative_commons:
 # seo meta this is needed for each language
 # If meta_description is not defined in front matter, it's created from (post / page) content,
 # if it has no content, this will be used for page description. It is also used in manifest.json
-meta_common_description: "Your meta description."
+meta_common_description: "メタディスクリプション"
 
 # contact options (side nav bottom and about page)
 # the order of the items will be shown as here.
@@ -70,3 +70,12 @@ google_analytics_id: ""
 # make sure you set meta.google_site_verify: true in _data/conf/main.yml
 # make sure your environment does not match with google.site_verification.ignore in _data/conf/main.yml
 google_site_verification: ""
+
+# make sure you set contact_form.enable: true in _data/conf/main.yml
+# - Create a form in Google Forms. You can use the template named "Contact Information".
+# - Customize the form colors and response validation according to your needs.
+# - To disable forced Google sign-in, go to "Settings > Response" and switch off the "Limit to 1 response".
+# - Click the "Send" button at the top right.
+# - Click the link icon from "Send via" list and copy the link.
+# - Then paste the link between double quotes.
+google_forms_contact_form_url: ""

_data/owner/pt.yml

@@ -70,3 +70,12 @@ google_analytics_id: ""
 # make sure you set meta.google_site_verify: true in _data/conf/main.yml
 # make sure your environment does not match with google.site_verification.ignore in _data/conf/main.yml
 google_site_verification: ""
+
+# make sure you set contact_form.enable: true in _data/conf/main.yml
+# - Create a form in Google Forms. You can use the template named "Contact Information".
+# - Customize the form colors and response validation according to your needs.
+# - To disable forced Google sign-in, go to "Settings > Response" and switch off the "Limit to 1 response".
+# - Click the "Send" button at the top right.
+# - Click the link icon from "Send via" list and copy the link.
+# - Then paste the link between double quotes.
+google_forms_contact_form_url: ""

_includes/default/google-contact-form-iframe.html

@@ -0,0 +1,27 @@
+{%-comment-%}
+  Mr. Green Jekyll Theme - v1.1.0 (https://github.com/MrGreensWorkshop/MrGreen-JekyllTheme)
+  Copyright (c) 2022 Mr. Green's Workshop https://www.MrGreensWorkshop.com
+  Licensed under MIT
+{%-endcomment-%}
+
+{% if site.data.owner[lng].google_forms_contact_form_url != empty -%}
+  {%- assign contact_form_url_split = site.data.owner[lng].google_forms_contact_form_url | split: '/viewform' -%}
+  {%- capture contact_form_url -%} {{ contact_form_url_split[0] }}/viewform?embedded=true&hl={{ lng }} {%- endcapture -%}
+{%- else %}
+  {%- capture contact_form_url -%}
+    javascript:\'
+    <!DOCTYPE html>
+      <style>h3{text-align: center;}</style>
+      <body>
+        <h3>google_forms_contact_form_url is not set in _data/lang/[language].yml</h3>
+      </body>
+    </html>
+    \'
+  {%- endcapture -%}
+{%- endif %}
+
+<script>
+  ContactForm.formURL = '{{ contact_form_url | split: " " | join: " " }}';
+  ContactForm.formLoadingText = '{{ site.data.lang[lng].contact_form.formLoadingText }}';
+  ContactForm.slideType = '{{ site.data.conf.main.contact_form.slideType }}';
+</script>

_includes/default/scripts-include.html

@@ -188,7 +188,14 @@
   {%- include multi_lng/lang-offer-msg-box.html -%}
 {% endif -%}
 
-{% if site.data.conf.main.cookie_consent.enable or language_translation_offer_box -%}
+{% if site.data.conf.main.contact_form.enable -%}
+  {%- include default/google-contact-form-iframe.html -%}
+{% endif -%}
+
+{% if site.data.conf.main.cookie_consent.enable
+  or language_translation_offer_box
+  or site.data.conf.main.contact_form.enable
+-%}
   {%- include default/sliding-msg-box.html -%}
 {% endif -%}
 

_layouts/about.md

@@ -47,6 +47,9 @@ layout: default
     <div class="col-md-12">
       <div class="about-msg markdown-style">
         {{ content }}
+        {%- if site.data.conf.main.contact_form.enable and site.data.conf.others.about.show_contact_form_button %}
+          <a href="javascript:void(0);" class="btn-base " onclick="ContactForm.show();" role="button">{{ site.data.lang[lng].contact_form.button_name }}</a>
+        {% endif -%}
       </div>
     </div>
   </div>

_posts/_README.md

@@ -56,6 +56,7 @@ I was going to make my website and thought if I did it as a template, I could sh
   - [Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary)
 - Analytics (Google Analytics)
 - Cookie consent feature
+- Contact form feature (Google Forms)
 - Site Search feature
 - Code Compression for small footprint (`HTML` `JS` `SCSS`)
 - Mobile App support

assets/_scss/contact-form/google-contact-form-iframe.scss

@@ -0,0 +1,32 @@
+/* Mr. Green Jekyll Theme - v1.1.0 (https://github.com/MrGreensWorkshop/MrGreen-JekyllTheme)
+ * Copyright (c) 2022 Mr. Green's Workshop https://www.MrGreensWorkshop.com
+ * Licensed under MIT
+*/
+
+.contact-form-wrapper {
+  width: 70vw;
+  height: 82vh;
+  max-width: 650px;
+}
+
+.contact-form-wrapper > iframe {
+  display: block;
+  width: calc(100% + calc(2 * var(--main-container-margin)));
+  height: 100%;
+  border: 0;
+  margin-left: calc(-1 * var(--main-container-margin));
+}
+
+@media (max-width: 500px) {
+  .contact-form-wrapper {
+    min-width: unset;
+    max-width: 360px;
+    width: 86vw;
+  }
+}
+
+@media (max-width: 350px) {
+  .contact-form-wrapper {
+    width: 90vw;
+  }
+}

assets/css/main.scss

@@ -82,9 +82,9 @@
   {% assign comment_disqus_enabled = true %}
 {% endif %}
 
-{% if
-  cookie_consent_box_enabled == true or
-  comment_disqus_enabled == true
+{% if cookie_consent_box_enabled == true
+  or comment_disqus_enabled == true
+  or site.data.conf.main.contact_form.enable == true
 %}
   @import "common/button";
 {% endif %}
@@ -159,6 +159,10 @@
   {% endif %}
 {% endif %}
 
+{% if site.data.conf.main.contact_form.enable == true %}
+  @import "contact-form/google-contact-form-iframe";
+{% endif %}
+
 {% if post_list_page_exist or post_exist %}
   @import "common/post-info";
 {% endif %}
@@ -187,7 +191,10 @@
   {% assign language_translation_offer_box_enabled = true %}
 {% endif %}
 
-{% if language_translation_offer_box_enabled == true or cookie_consent_box_enabled == true %}
+{% if language_translation_offer_box_enabled == true
+  or cookie_consent_box_enabled == true
+  or site.data.conf.main.contact_form.enable == true
+%}
   @import "default/sliding-msg-box";
 {% endif %}
 
@@ -199,11 +206,12 @@
   {% assign post_query_tabs_exist = true %}
 {% endif %}
 
-{% if
-  toc_exist == true or
-  post_query_tabs_exist == true or
-  language_translation_offer_box_enabled == true or
-  cookie_consent_box_enabled == true %}
+{% if toc_exist == true
+  or post_query_tabs_exist == true
+  or language_translation_offer_box_enabled == true
+  or cookie_consent_box_enabled == true
+  or site.data.conf.main.contact_form.enable == true
+%}
   @import "common/close-button";
 {% endif %}
 

assets/js/_js/contact-form/google-contact-form-iframe.js

@@ -0,0 +1,68 @@
+/*! Mr. Green Jekyll Theme - v1.1.0 (https://github.com/MrGreensWorkshop/MrGreen-JekyllTheme)
+ *  Copyright (c) 2022 Mr. Green's Workshop https://www.MrGreensWorkshop.com
+ *  Licensed under MIT
+*/
+
+(function () {
+  'use strict';
+
+  var globals = {
+    slidingBoxId: "contact-form-id"
+    , slideType: ""
+    , formURL: ""
+    , formLoadingText: ""
+    , show: show
+    , hide: hide
+    , formLoaded: formLoaded
+  };
+
+  /* default properties */
+  const properties = {};
+  properties.matchPattern = /\{(.*?)\}/g;
+  properties.formEmbedHTMLformat = '<div class="contact-form-wrapper"><h5>{formloadingtext}</h5><iframe src="{formurl}" onload="ContactForm.formLoaded();"></iframe></div>';
+
+  var initialized = false;
+  var contactFormHtml = '';
+
+  function hide() {
+    SlidingMsgBox.hide(globals.slidingBoxId);
+  }
+
+  function show() {
+    /* initialize once */
+    if (initialized == false) {
+      let property_obj = {
+        'formurl': globals.formURL
+        , 'formloadingtext': globals.formLoadingText
+      };
+      contactFormHtml = htmlFormatter(property_obj, properties.formEmbedHTMLformat);
+      SlidingMsgBox.init(globals.slidingBoxId, contactFormHtml, hide, globals.slideType);
+      initialized = true;
+    }
+    SlidingMsgBox.show(globals.slidingBoxId);
+  }
+
+  function htmlFormatter(property_obj, layout) {
+    return layout.replace(properties.matchPattern, function (matchStr, property) {
+      /* if no property to match, to prevent adding {text} etc. */
+      if (isEmpty(property_obj[property])) return "";
+      return property_obj[property] || matchStr;
+    });
+  }
+
+  function formLoaded() {
+    /* fade out the loading message */
+    $('#' + globals.slidingBoxId + ' h5').fadeTo("slow", 0, function() {
+      /* slide up */
+      $(this).slideUp("slow", function() {
+          /* remove the loading message */
+          $(this).remove();
+      });
+    });
+  }
+
+  (function (window) {
+    window.ContactForm = globals;
+  })(window);
+
+})();

assets/js/main.js

@@ -38,7 +38,14 @@ layout: util/compress_js
   {% include_relative _js/default/lang-offer-msg-box.js %}
 {%- endif %}
 
-{% if site.data.conf.main.cookie_consent.enable == true or language_translation_offer_box == true %}
+{% if site.data.conf.main.contact_form.enable == true %}
+  {% include_relative _js/contact-form/google-contact-form-iframe.js %}
+{% endif %}
+
+{% if site.data.conf.main.cookie_consent.enable == true
+  or language_translation_offer_box == true
+  or site.data.conf.main.contact_form.enable == true
+%}
   {% include_relative _js/default/sliding-msg-box.js %}
 {%- endif %}
 

ja/_posts/_README-jp.md

@@ -56,6 +56,7 @@
   - [Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary)
 - アナリティクス (Google アナリティクス)
 - クッキー使用同意機能
+- お問い合わせフォーム機能 (Google フォーム)
 - サイト内検索機能
 - コード圧縮によるフットプリントの縮小 (`HTML` `JS` `SCSS`)
 - モバイルアプリサポート