blog-customize

無料で簡単!「お問い合わせフォーム」を作ってみました ~プラグインなし~

2020-08-26

「お問い合わせフォーム」を作るなら・・・

  • 無料で作りたい!
  • プラグインを使わずにを作りたい!
  • html や css はよく分からないけど簡単に作りたい!
上の3つの条件でできる方法を探しました。。
momoka

はじめに

遅ればせながら「お問い合わせフォーム」を設置しようと思いました。

WordPressで「お問い合わせフォーム」を設置するには、プラグイン(スマホのアプリのようなもの)を使うと簡単にできます。しかし、プラグインを入れすぎると、読み込み速度が遅くなると言われているので、できるなら使わないで設置できる方法を探してみました。

プラグインを使わないとなると、HTMLやCSSなどのコーディングスキルを必要とします。

momoka
コードを見ただけで挫折しました・・・。

フォーム作成ツール

そこで注目したのが「フォーム作成ツール」です。「フォーム作成ツール」とは、フォームの基本構造を作るための編集画面へフォームに必要な項目(名前・住所・メールアドレスなど)を追加するだけで完成するツールです。プラグインも不要で、HTML や CSS の知識・スキルがなくても簡単に作れるのです。

フォーム作成ツールは何種類かあります。はてなブログでも多くの方が利用されている「Googleフォーム」にしようかと思ったのですが、 formrun (フォームラン) というフォーム作成ツールがシンプルで好みのデザインだったので、気になった機能を抜粋して2つを比べてみることにしました。

機能formrun (無料)Googleフォーム (無料)
作成できるフォーム数1個(1チームあたり)無制限
携帯端末での操作
フォームの埋め込み
バリデーション
自動返信メール✖ スプレッドシートから編集
メール送受信
reCAPTURE ✖(後付け)

1 チームの作成は無制限です。

2 バリデーション (英:validation) とは、入力内容や記述内容が間違っていないか、違った欄に入力(記述)されていないかを確認して教えてくれることです。formrunではリアルタイムでのバリデーション設定 (必須項目や項目毎に求められる入力値が正しいかを瞬時に判定) はできますが、Googleフォームではできません。

3 reCAPTUREとは、Webフォームなどに登録する際、悪質なアクセスからWebサイトを守るための機能です。

どちらにする?

どちらも無料ですが、「Googleフォーム」は、作ることができるフォームの数が無制限で、パソコンだけでなく、携帯端末でも編集しやすい仕様(1つの編集画面の中でフォーム編集から公開設定までまとめて行える)となっています。

どちらにも長所と短所があるのですが、formrun (フォームラン) の「自動送信メール」と「reCAPTCHA」を簡単に設置できる点に惹かれ、formrun (フォームラン) を選びました。プラグインなしなので、formrun (フォームラン) も、はてなブログで利用可能だと思います。

設定方法は、公式サイトできめ細かく説明してくれているのですが、あまり知識がない私には、ちょっと手間取ってしまうこともありました。なので、忘却録もかねて「お問い合わせフォーム」を設置するまでの悪戦苦闘を残したいと思います。

設定の仕方

https://form.run/ja

2020年8月3日からプランが変更となりました。トップページには「14日間無料トライアルを始める」と表示されていますので、14日間、有料のプランが使えるようです。トライアル期間が終わった後に無料プランに変更できますが、最初から無料プランを選ぶことができました。

 

step
1
ユーザ登録(無料)

formrunを無料でスタートよりユーザ登録を行い「チーム名」を登録します。チーム名は何でもOKです。

 

step
2
フォームを作成する

formrunで入力フォームを作成する場合、「フォームクリエイター」「HTML・CSS」の2つの作成方法があります。

私は「フォームクリエイター作成」を選びました。フォームクリエイターは、編集画面でパーツを移動させたり質問内容を入力したりすることで、フォームを作成できます。HTMLやCSSの専門知識がなくても手軽にフォームを完成を目指します。

 

step
3
テンプレートの選択

formrunには現在24種類のテンプレートが用意されているのですが、「お問い合わせフォーム」なのでシンプルなものを選びました。“このテンプレートを使用” をクリックすると、編集画面に進みます。

 

step
4
編集をする

タイトルの色を変えることができました。レイアウトは、ヘッダーやサイドなど4種類あります。画像も豊富に用意されていたので、気に入った画像をアップロードしました。PC技術をあまり持たない私でも、簡単に操作できそうです。

質問項目のパーツは、「メールアドレス」「住所」「職業」など、15種類近くの入力項目があり自由に追加できます。フォームの見た目をカスタマイズするためには、左メニューにあるタブを操作して、編集画面に加えていくだけです。

項目の位置を変更したり、必須が任意も選べます。

メッセージを書いてもらう欄は「複数行テキスト」を+追加すれば簡単に作成できました。

最後は、スパム対策の「reCAPTURE」を設定すれば完成です!

 

step
4
フォームを公開する

編集が全て終わったら【保存】ボタンを押し、フォームを公開します。

QRコードや、iframe埋め込み、各SNSでの共有をすることで公開できますが、私は「iframe埋め込み」することにしました。

記載されている手順に沿って、埋め込みたいページ(記事の編集)に指定のコードを貼り付け、公開するだけで設置完了しました。私は、固定ページにコードを貼り付けました。

あとは、他のサービスとインテグレーション (連携) させるだけです。

できあがりました。ブログに表示するには、「外観」>「ウィジェット」にある「02_STINGER 問い合わせボタン」で設置するだけです。

詳細は、操作マニュアル もご確認ください。

完成・感想

作る前は大変そうだなぁ・・・と思っていたのですが、やってみたら簡単でした。formrunは、簡単にオシャレなフォームが作成でき、その後の顧客・営業管理もできるクラウドサービスです。作成したフォームに問い合わせがあれば、問い合わせ対応や顧客のステータス管理まで一元して行うことができます。個人のブログなので、あまり使わない機能なのですが、なんか会社気分です。

最後までご覧いただきありがとうございます。

-blog-customize

© 2020 旅とアロマ Powered by AFFINGER5