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

今更ですが、メニューにお問い合わせフォームを設置してみました。「自力でコードを書く」「Wordpressプラグイン」などの方法もあるのですが、今回は手っ取り早くGoogle Docsを利用。

Google Docsを利用すると問い合わせ内容がスプレッドシートに記録されたりとメリットが大きいのです。これからWebサイトを作る人はぜひ参考にしてもらえたらと思います。

フォーム作成~設置の手順

フォームの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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