3分で作れる!お問い合わせフォームを作るなら「Google Docs」がおすすめ

今更かという気がしなくもありませんが、メニューにお問い合わせフォームを設置してみました。

作る方法としては、1.自力で作る、2.Wordpressのプラグインを使うの2択だと思っていたのですが、Google Docsを使うという方法もあったようで、今回はこれを使って作りました。

Google Docsだと楽に作ることができるほか、問い合わせ内容がスプレッドシートに記録されていくというメリットもあったりします。簡単に作り方を書いておきますので、これからWebサイトを作る人は参考にしてもらえたらと思います。

Google Docsを使ったフォームの作り方

まずはGoogle Driveにアクセスして、ファイルを作成できる状態にしておいて下さい。Googleアカウントが無いという人がいれば、作っておきましょう。

次に、右クリック→「Googleフォーム」を選択します。

googleform1

すると、このような空のフォームが出てきます。

googleform2

フォームのタイトル、入力項目、入力方式(テキスト、プルダウン、ラジオボタンなど)、必須/任意、などを入力していきます。シンプルな問い合わせフォームなら、3項目ぐらいあれば十分でしょう。

googleform3

「保存」ボタンが見当たりませんが、自動保存されるのでご安心下さい。フォームの作成はここまで。3分もあれば作れちゃいますね。

[adsense_res]

Web埋め込み用コードの取得方法

そのコードを自分のWebサイトに埋め込みたい場合はどうすれば良いか。右上にある「送信」ボタンを押しましょう。

googleform4

するとフォーム送信画面が出てくるので、「< >」を選択します。すると埋め込み用のHTMLコードが表示されるので、自分のWebサイトにコピペして使いましょう。

googleform5

縦横のサイズ調整も可能。フォームは縦に長くなると思うので、縦2横1くらいの比率にしておきましょう。

スマホとPCでフォームのサイズを変える場合

上のままWebサイトに貼り付けると、スマホで見た場合に画面からフォームがはみ出てしまうので、サイズを調整する必要があります。上手く調整するには少し工夫が必要です。そのやり方も書いておきます。

1.function.phpにコードを追加

スマホ用とPC用でそれぞれ別のフォームサイズのものを呼び出すようにしておき、さらにそれをショートコード「contact_form」で呼び出せるようにしておきます。

googleform6

2.ショートコードを投稿ページに貼る

問い合わせフォーム用のページに、ショートコード「contact_form」を貼ります。これでスマホとPCそれぞれで見た場合に別サイズのフォームが読み込まれるようになります。

簡単なのでぜひお試しあれ。