Googleフォームを独自デザインで埋め込みajaxで送信させる方法
やりたいこと・方針
・Googleフォームで手軽にお問い合わせフォームを作りたい
・デザインはオリジナルがいい
・送信後もサイトから移動したくない(Googleフォームに移動したくない)
・jQuery使っちゃう
手順
1.普通にGoogleフォームを作成
まずは普通にGoogleフォームでフォームを作ります。必要な項目が揃っているか、得られる回答結果に問題がないか試しておきましょう。
2.独自デザインのフォームを作成
1.で作ったフォームと項目が同じになるよう、オリジナルデザインのフォームHTMLを作ります。以下はサンプルです。
<form id="form" action="https://docs.google.com/forms/(略)/formResponse" method="post">
<p>
<label>必須テキスト *</label>
<input type="text" name="entry.111111111" required>
</p>
<p>
<label>チェックボックス</label>
<input type="checkbox" name="entry.222222222" value="チェック項目1"> チェック項目1<br>
<input type="checkbox" name="entry.222222222" value="チェック項目2"> チェック項目2<br>
<input type="checkbox" name="entry.222222222" value="チェック項目3"> チェック項目3<br>
</p>
<p>
<label>セレクトボックス</label>
<select name="entry.333333333">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</select>
</p>
<p>
<label>テキストエリア</label>
<textarea name="entry.444444444"></textarea>
</p>
<p>
<input type="submit" class="button" value="送信">
</p>
</form>
3.作成したGoogleフォームの公開ページを表示
1.で作成したGoogleフォームの公開ページを開いたら、ブラウザの「検証」ツールでformのaction値や各フィールドのname値を調べ、2.で作ったフォームに当てはめていきます。上記のサンプルのようなaction、nameが設定されるはずです。
チェックボックスやセレクトボックスのvalueは、選択項目の表示名と同じになります。
4.機能チェック
この段階で問題なく問い合わせフォームが機能するか確認しておきましょう。送信ボタンを押したらGoogleフォームの回答完了画面が出てくるはずです。また、回答も問題なく登録されているか確認しておきましょう。
5.非同期通信で送信
4.で問題なく登録されていたら、最後に非同期通信させるJavaScriptを書いていきます。各フォームの値を取得するには、jQueryのserialize()関数が便利です。
$(function() {
$('#form').submit(function(){
$.ajax({
url: $('#form').attr('action'),
data: $('#form').serialize(),
type: 'POST',
dataType: 'xml',
statusCode: {
0: function() {
//成功した際の処理を書きます。
},
200: function() {
//成功した際の処理を書きます。
}
}
});
return false;
});
});
処理後にコンソール上で警告文が表示されますが、解決するのは難しいらしく、挙動的には問題が起きないので私はスルーしています。
6.最終確認
以上で設定は終わりです。問題なく動作するかチェックしましょう。
この記事が気に入ったらサポートをしてみませんか?