フォーム作成コストを削減！ Googleフォームをカスタマイズしました。
2020.04.20
先日、公開した「web制作における見積もり シミュレーション」 にお問合せフォームを導入しました。
しかしここで問題が……。
本サイトはプラグイン「Contact Form 7」を導入しているのですが、うまく送信ができないという事象にぶつかりました。
１から「Javascript」と「PHP」を用いてコンタクトフォームを作成しようと思ったのですが、ちょっと面倒くさい。
そこで「Googleフォーム」を導入することにしました。
遅ればせながら、
みなさま、こんにちは。
Googleフォームをカスタマイズしよう
Googleフォームとは？
そもそもGoogleフォームとは、アンケートやクイズを介してユーザーから情報を簡単に集められるツールで、シンプルで簡単に使えることから、個人でも使用している人が多いのではないでしょうか？
「イベントの出欠確認」や「イベント参加者からの感想を集める」etc、多くの活用方法があります。
そしてホームページのお問い合わせに使うのもその一つ。
学習コストが無に等しく非常に重宝できるのですが、デザインのカスタマイズ性が低いというのが難点。
そこでGoogleフォームは本当にカスタマイズ性が低いのか調べてみました。
Googleフォームをカスタマイズしたい
上記サイトを参考にさせていただきました。
ありがとうございました。
まずデフォルトのデザインはこんな具合でした。
で、デザイン後がこんな感じになりました。
（参考：web制作における見積もり シミュレーション）
いかがですか？
見た感じGoogleフォームとは思えませんよね。
Googleフォームのカスタマイズ方法
HTMLを作成する
まずはフォームのHTMLを作成してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form> <p> <label for="nameVal">名前<span>(必須)</span></label> <br> <input type="text" name="DUMMY" id="nameVal" placeholder="ウェブ 太郎" required /> </p> <p> <label for="mailVal">メールアドレス(必須)<span>(必須)</span></label> <br> <input type="text" name="DUMMY" id="mailVal" placeholder="example@mail.com" required /> </p> <button type="submit" name="button" value="送信">送信</button> </form> |
Googleフォームを作成する
次にHTMLと同じ内容のGoogleフォームを作成してください。
その後「（右上の）送信」を押してください。
そうすると共有リンクの方法が出てきますので、真ん中の「∞」からリンクを取得し、そのリンク先へ移動してください。
デヴェロッパーツールを使いGoogleフォームの「action =”URL” name =”entry.000000″」を取得する
デヴェロッパーツールを開き、 <form action="https://docs.google.com/formsURL" ～> という記述を探し、先ほど作成したHTMLに追記してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form action="https://docs.google.com/formsURL"> <p> <label for="nameVal">名前<span>(必須)</span></label> <br> <input type="text" name="DUMMY" id="nameVal" placeholder="ウェブ 太郎" required /> </p> <p> <label for="mailVal">メールアドレス(必須)<span>(必須)</span></label> <br> <input type="text" name="DUMMY" id="mailVal" placeholder="example@mail.com" required /> </p> <button type="submit" name="button" value="送信">送信</button> </form> |
次に、 <input type="text" ～ name="entry.844671445" ～>という記述を探し、先ほどと同様に作成したHTMLに追記してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form action="https://docs.google.com/formsURL"> <p> <label for="nameVal">名前<span>(必須)</span></label> <br> <input type="text" name="entry.0000000" id="nameVal" placeholder="ウェブ 太郎" required /> </p> <p> <label for="mailVal">メールアドレス(必須)<span>(必須)</span></label> <br> <input type="text" name="DUMMY" id="mailVal" placeholder="example@mail.com" required /> </p> <button type="submit" name="button" value="送信">送信</button> </form> |
こんな感じで、それぞれの name 属性を取得し、記述してください。
たったこれだけで作業完了。
上記のように作成したHTMLを使用すればデザインカスタマイズし放題ですので、試してみてください。
