Jekyll - Embed Google Form

Posted on April 26, 2019

Embed google form ke jekyll mah tinggal embed aja, haha. Kalau tampilannya mau ikut tampilan si google form. Ini bisa jadi solusi kere hore untuk kebutuhan form di static site.

Nah, kalau tampilannya mau custom sesuka kita? Begini caranya.

tldr: Intinya kalau kita mau membuat custom form dari google form, kita butuh form action dari google form dan value dari name yg ada di kolom google form.

1. Buat google form

Setelah selesai membuat form, dapatkan linknya. Contohnya saya membuat form yang isinya short text dan paragraph

2. Buka link tsb di browser lain

Setelah terbuka, lakukan inspect element. Tujuan inpect element adalah untuk mendapatkan name dari kolom-kolom yang ada dalam form, dan untuk mendapatkan form action.

Dari form yg saya buat, saya butuh:

- `name` dari `<input>` 
- `name` dari <textarea>
- link `action` dari form

Tiga hal tadi harus di copy dan dicatat, akan dipakai nanti

Contoh mendapatkan name dari kolom nama:

Contoh mendapatkan action dari form:

3. Bikin custom form

Saya bikin contoh sederhana:

Komponen ini diambil dari google form:

action="https://docs.google.com/forms/d/e/1FAIpQLSf_iYsRa5FoIw5hv6edHvmwpdIqybga0xZcu_JF-qG4NkD5cg/formResponse"
name="entry.1319304330"
name="entry.1931495421"

html

<div class="container">
  <form id="contact" action="https://docs.google.com/forms/d/e/1FAIpQLSf_iYsRa5FoIw5hv6edHvmwpdIqybga0xZcu_JF-qG4NkD5cg/formResponse" method="post">
    <h3>Saran/Masukan/Kritik</h3>
    <h4>Sampaikan biar kamu plong</h4>
    <fieldset>
      <input placeholder="Nama kamu (isi sembarang kalau kamu sungkan)" type="text" tabindex="1" name="entry.1319304330" required autofocus>
    </fieldset>
    <fieldset>
      <textarea placeholder="Tulis saran/masukan/kritik kamu disini" tabindex="5" name="entry.1931495421" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Kirim</button>
    </fieldset>
  </form>
</div>

css

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #4CAF50;
}

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 150px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

Tinggal include html css tadi ke jekyll. Hasilnya setelah dijadikan satu dengan jekyll dapat dilihat di sini

Misalnya kita isi formnya dan submit, hasilnya akan terkirim ke google form yg tadi dibuat: