
最近、すごく時代の流れを感じています。。。一昔前までは考えられなかったことが現実に起こっているな〜っと感心していました。
それは、Google Formのサービスを業務で使うと言うことです。
GmailやGoogle Driveまではスマホの影響もあり納得するのですが、Google Formまでがアンケートやお問い合わせフォームとして一般的に利用されているのに驚かされました。
しかも名のしれた大企業の案件であっても・・・
使いかってが選ばれる時代なのでしょうね。また、下手に作るよりかはセキュリティー面でも安心できるのかもしれませんね。
今までは・・・そう！この手の話がでた時点で・・・
仕様がいつ変わるか分からない！突然動かなくなりますよ！
将来的に有料のサービスになる！（Google Mapでみなさん痛い思いしてますからね）
場合によってはGoogleのアカウントが必要となり、送信するユーザーが嫌がる！
などなど、なんとか理由をつけて断っている開発者も多いのでは無いのでしょうか？
時代は変わっているのです！
変なこだわりを強く持ちすぎて、何もしないで諦めたら終わりです。
じゃー！作っちゃいましょう！
今すぐに・・・
まずは、Google Formで新規のフォームを作成・・・ポチポチと
ふむふむ・・・
簡単、ものの１分もあればそれっぽい項目のフォームが作れます。
公開用のURLからデータを入力して送信！
送信後メールも届き・・・スプレッド（Microsoftでいうとエクセル）にも保存され・・・
これは素晴らし！！！の一言です。
それなりにデザインもカスタマイズできるので、この機能！この使い勝手で無料なら、Google Formでメールフォームを構築してしまいますよね。
はい、お問い合わせフォームなどメールフォーム（CSV、エクセルダウンロード付き）は、Google Formで構築するのが１番！そういうことでこの話は終わりです。。。
ただ、それで終わってしまうと寂しいので、流行っている？カスタマイズにチャレンジしたいと思います。
長くなりましたが、ここからが本題です。
カスタマイズ内容
自分のサイト上のページから、Ajaxを使ってフォームデータをGoogle Formへ送信し、結果も自分のサイトで完結する。
わざわざ自分のサイトからGoogle Formを利用するメリットは、完全にデザインを作ることができるため、サイトの雰囲気を一切壊さずにフォームを構築できることです。
その他にも、Google Formのバリデーション機能が充実しておらず、本格的な入力チェックを行う場合は自分でHTMLを作った方がメリットが高いからです。
では実際に
AjaxからGoogle Formにデータを送信する
基本的に、Formの送信先のURLと、各項目のname値を設定し、Ajax送信すれば完了します。何も難しいことは無く、HTML、FORMの知識があればカスタマイズが可能です。
こんな感じのフォームを用意して
<form method="post" action="" id="gform">
<input type="text" name="entry.9999999991" placeholder="お名前"><br>
<input type="text" name="entry.9999999992" placeholder="お問い合わせ内容"><br>
<input type="text" name="entry.9999999993" placeholder="メールアドレス"><br>
<button type="submit">送信</button>
</form>
こんな感じのJavascriptを用意するだけでOKでした。
<script>
$( function () {
$( '#gform' ).submit( function( e ) {
e.preventDefault();
$.ajax( {
url: 'https://docs.google.com/forms/u/3/d/e/xxxxxxxxxx/formResponse',
type: 'POST', timeout: 10000, cache: false, dataType: 'jsonp',
data: $( '#gform' ).serialize()
} )
.always( function( jqXHR, textStatus ) {
if ( jqXHR.status === 200 ) {
console.log( '成功', jqXHR.status );
} else { // 404
console.log( '失敗', jqXHR.status );
}
} );
} );
} );
</script>
めちゃめちゃシンプルです。
いろいろなサイトを参考にさせていただいたのですが、dataTypeの指定が無かったり、XMLだったりして正常なレスポンスコードを取得することができていませんでした。
私の場合、dataType: 'jsonp', のように、jsonpを設定することで、正常時と失敗時のレスポンスコード（jqXHR.status）を取得できるようになりました。
リクエストが正常に処理された場合、レスポンスコードは200となり、失敗した場合は404になることを確認できました。
あと、jQueryの分岐はalwaysで処理するようにしました。通常、成功しても失敗しても.fail（失敗）になるので、将来的に仕様が変わっても良いように.always（成功、失敗）で対応しています。これで良いのか？悪いのか？分かりませんが・・・
これだけで、PHPのプログラムやWordpressのプラグインを使わずに、フォームが完成するのには驚かされました。
入力項目が単純なフォームは、これだけで完結してしまいそうですね。
課題としては、ファイルの送信に対応できるのか？
ユーザー側への返信メールやその内容に対応できるのか？
そのあたりを検証していきたいと思います。
続く・・・