フォームでお問い合わせ機能をつくる方法さてさて、このブログではオープン当初から過去の開発で得た知識を再構築して記事を公開しているわけですが、とはいえブログのテーマとしてはプログラミングだけというわけではなく、どちらかと言うと「コンピュータに関わる作業の効率化」といった方が正しいと考えています。何が言いたいかというと、今回は「プログラミングができなくてもお問い合わせフォームを作ることができる」ということを知ってほしかったんですね。お客様サポートをきちんしたい場合は専用フォームを開発をすべきですが、例えば商品のランディングページが1つだけで、しかも単なるHTML形式だとした場合、別にお問い合わせが外部ページでも問題ないケースもあります。言うとウェブサイトを開発する際、やはりほとんどの場合において訪問ユーザーや会員ユーザーからの問い合わせが必要になってくるにもかかわらず、お問い合わせフォームというのはバリデーションなど結構やっかいな作業が多かったりもします。フォームを使ったテクニックです。サイト開発の参考にしてくださいね。合わせて読みたいやりたいこと訪問ユーザーが問い合わせを送信すると、メールで自分自身に通知します。スプレッドシートに問い合わせ内容を保存するようにします。お問い合わせの入力項目は次の3つです。フォームにログインして、空白と書かれた部分をクリックします。すると次のような入力ページが表示されます。フォーム内容を設定するメールアドレスでは、まずはフォームのタイトルと説明を変更します。(説明は空白でも大丈夫です)そして、「無題の質問」という部分をクリックして質問を編集します。1つめの項目はメールアドレスなので入力形式を変更しましょう。右上のラジオボタンと書かれた部分をクリックしてください。クリックすると、次のような選択エリアが表示されるので「記述式」をクリック。すると、入力形式が変更になるので、タイトルを「メールアドレス」へ変更します。続いて、「お問い合わせの種類」です。フォームすぐ右にある追加ボタンをクリックして質問を追加してください。すると新しい選択フォームが追加されるので、質問タイトルを変更します。1」と書かれたタイトルを変更します。ひとつめは「ご意見・ご要望」です。次に「選択肢を追加」をクリックして新しい選択肢をつくり、そこをふたつめの「バグ報告」にします。一度選択肢の追加ボタンをクリックして、最後の「その他」をつくりますが、今回は、「選択肢を追加」ではなく、「その他を追加」をクリックしてください。すると、その他専用の選択肢が表示されます。(つまり、「その他」には入力ボックスが表示されることになります)お問い合わせ内容では最後に「お問い合わせ内容」です。一度質問の追加ボタンをクリックしてください。入力形式を変更するために再度ラジオボタンをクリックします。すると、入力形式の一覧が表示されるので、今度は「段落」を選びます。すると、入力形式が変わるので、これまでのようにタイトルを変更して完了です。実際のフォームを確認するではこれまで設定してきたフォームが実際にはどのように表示されるかをチェックしておきましょう。確認するにはページ右上にある目のマークをクリックします。このように表示されました。(ちなみに実際にユーザーがお問い合わせ入力するのもこのページです)問い合わせをメールで通知するまずは、フォームタイトルの上にある「回答」という部分をクリックします。すると、回答タブが表示になるので、右側の三点リーダをクリックします。表示された一番上の「新しい回答についてのメール通知を受け取る」をクリックします。これで問い合わせがあれば次のようにメールで知らせてくれるようになりました。実際に受信したメールはこうなります。「概要を表示」ボタンをクリックすると内容をチェックすることができます。スプレッドシートに内容を保存するようにする過去の問い合わせリストを後で確認できるようにスプレッドシートに保存する設定にしておきましょう。メール通知の時と同じく「回答」タブを開き、スプレッドシートのマークをクリックします。すると、「回答先の選択」というダイアログが表示されるので「新しいスプレッドシート」を作成を選んで「作成」ボタンをクリックします。すると、このようにスプレッドシートが作成されました。ここに、もし問い合わせがあると一行ずつデータが追加されていくことになります。最後に作成したフォームのURLを確認する方法を紹介します。ページ右上にある「送信」ボタンをクリックします。すると、「フォームを送信」というダイアログが表示されるのでリンクマークをクリックします。そこにフォームへのリンクが表示されています。サイトやブログにはこのURLへのリンクを作成し、「お問い合わせ」などとしておきましょう。1(テーマカラー)もしサイトやブログにテーマカラーがあり、お問い合わせフォームのその色で統一したい場合はページ右上のパレットマークをクリックすると色を変更することができます。今回は赤に設定してみました。同じ場所で画像を指定することもできます。テストとして、pixabayでダウンロードしてきた次の画像を設定してみましょう。(ちなみに、以下の画像はブログ用に縮小していますが、このままでは小さすぎますので800×200以上の画像でやってみてください)まず、先ほどと同じくパレットマークをクリックすると表示される「画像を選択...」という部分をクリックします。すると「ヘッダーの選択」というダイアログが表示されるので、この中にある「写真をアップロード」という部分をクリックしましょう。画像をアップロードすると次のような画面になるので、画像の好きな部分を指定します。すると、このようなフォームができあがります。ここまですると、外部のサイトという印象は少なくなりますね。2(バリデーション)Googleフォームの入力ボックスには、バリデーションで入力内容を検証する機能もついています。入力項目がメールアドレスかどうかをチェックし、有効なメールアドレスでは無い場合はエラーを表示する方法を見てみましょう。検証をつけたい項目を選択して、右下の三点リーダをクリックします。するとポップアップが表示されるので、その中にある「回答の検証」をクリック。メールアドレス」を選択。右に表示したいエラーメッセージを入力します。テストしてみましょう。本来はメールアドレスを入力すべきですがわざと通常のテキストを入力して送信していみます。うまく検証することができました。その他に使える検証は次のとおりです。長文回答のボックスで利用できるのは「長さ」と「正規表現」の2つです。3(必須入力)グーグルフォームの入力項目を必須入力にすることもできます。やり方は簡単で、目的の項目を選択肢、右下にある「必須」というトグルボタンをクリックするだけです。実際にテストで空白のまま送信してみましょう。このブログにもお問い合わせフォームをつくりました!このブログには元々お問い合わせフォームがありませんでしたので、今回作成したフォームを公式お問い合わせフォームにすることにしました。↓↓↓お問い合わせということで、もし何かあったらいつでもお気軽に連絡してください。(ただし、全てにご返信できない場合があります。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。