跳至主要内容

用Google表單製作聯繫表單

原本網站每一頁下方有放留言版，但後來發現使用率不高，所以決定做一個簡單的聯繫表單，本篇文章參考完全客製 Google 表單，美化表單樣式製作。

Google表單​

製作Google表單​

首先在google雲端硬碟新增Google表單，把問題和欄位填一填後，應該會長得像這個樣子。

取得必要欄位​

Google表單

點右鍵選擇「檢查」，windows可以直接按「F12」，按下crtl+F搜尋<form會看到<form action="https://..."，把https://docs.google.com/forms/d/e/.../formResponse複製起來。

搜尋entry會看到<input type="hidden" name="entry.XXXX"，把entry.XXXX複製起來，分別依序對應表單設計的問題，以我的Google表單有3個entry.XXXX，就是分別對應暱稱、信箱、留言。

客製表單​

做一個純色的簡單樣式。

客製表單

src/components/Contact/index.js
import React from 'react';
import styles from "./styles.module.css";

export default function HomepageContact() {
  return (
    <section>
      <div className="container">
        <h2 className={styles.ContactTitle}>CONTACT</h2>
        <div className={styles.ContactForm}>
          <form className="form" target="_blank" rel="noreferrer noopenner" action="https://docs.google.com/forms/.../formResponse" method="POST" role="form">
            <div className="form-group">
              <label for="name">姓名</label>
              <input type="text" className="form-control" name="entry.XXXX" placeholder="Name" required></input>
            </div>                            
            <div className="form-group">
              <label for="email">信箱(非必填)</label>
              <input type="email" className="form-control" name="entry.XXXX" placeholder="Email (Not Required)" ></input>
            </div>                              
            <div className="form-group">
              <label for="message">留言</label>
              <textarea name="entry.XXXX" placeholder="Message" required></textarea>
            </div>
              <input type="submit" value="送出" />
          </form>
        </div>
      </div>
    </section>
  );
}