ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.1 埋め込み編

ホームページ制作を学んでいくとまずHTML/CSSから学んでJavaScriptという流れが一般的かと思います。

ただその流れの中では「フォーム」の見た目の部分は作れても実際の処理は実装は学べません。

よくあるお問い合わせなどのコンタクトフォームは、入力された情報がサーバーへ送信され、サーバーで処理されます。

サーバーで動くプログラムが必要になるというわけです。

 

サーバーサイドのプログラミング言語というと一般的なのが

JAVA/PHP/Python/Rubyなどでしょうか。

よく間違えられがちで散々言われるので、もはやあまり訂正もしないのが
JAVAJavaScriptの混同。

これは名前が似てるだけで全く別物です。

JavaScriptは基本ウェブブラウザで動くプログラム言語です。

 

前置きが長くなりましたが、HTML/CSS/JS学びたての初学者にフォーム作成は、またひとつちょっと厳しい課題なのです。

せっかくHTML/CSSでサイトを作れるようになったのにさらにサーバーサイドを学ばなければならない、、ってのはなかなか大変ですよね。

 

そこで活用できるのがGoogleフォームです。

 

 

Googleフォームとは

Googleのアカウントさえ持っていればちょこちょこっとブラウザを操作するだけでお手軽簡単にフォーム作成が出来て、集計も手軽に出来る無料サービスです。

さすがGoogle神、太っ腹。

www.google.com

 

ビジネス用途には別途料金で追加機能など使えるようです。

まずは触ってみるのが早いと思うので、項目名や入力欄をポチポチと入れるだけでフォームを作ってしまいましょう。

 

フォーム作成出来たら、、、

Googleフォーム埋め込みの操作図

①画面右上の「送信」ボタンを押すと真ん中にポップアップで送信方法が出てきます。

②送信方法を一番右の「<>」をクリックしてHTMLを埋め込むに変更。

③「コピー」をクリックして埋め込み用のコードをコピーしましょう。

 

ここまで出来たらご自身のサイトに先ほどの埋め込み用コードをペーストして埋め込むだけです。

 

えい!

 

うまく埋め込めてるでしょうか。

 

簡単ですね!

ただこれだけでは自分のサイトに合わせた見た目にはなりません。

そのあたり見た目も自由にカスタマイズ出来る方法があるので次回引き続き書いていこうと思います。

 

 

 ▼Googleフォームの埋め込みPart.2以降の続きの記事はこちらから

webabc.hatenablog.jp

webabc.hatenablog.jp

 

▼HTML/CSS以外にもWeb知識の基礎にも触れて書かれた良書です。

 

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp