Contact Form 7でアンケートフォームを設置

仕事でアンケートフォームを付けることになりそうなので、Contact Form 7での設置方法を整理して文章にしてみました。アンケートとしては小規模なものを想定しています。(回答数100未満くらい)

使ったプラグイン

Contact Form7
執筆時version4.5

導入方法は割愛します。ダッシュボード→プラグインからさくっと入れてください。
日本語対応しているので安心です。

cf701

フォームの設置(基本)

はじめて使う人は、基本となる問合せフォームを設置してみましょう。
ダッシュボードの左メニューお問い合わせからコンタクトフォームを選びます。
コンタクトフォーム 1としてサンプルが初めから入っています。cf702
貼り付け用の固定ページを用意しておきます。(記事でも構いません。)
本文にショートコードを貼ります。cf703
完了です!簡単です。cf704

実際にフォームに入力して送信すると、WordPressの管理者宛にメールが届きます。

アンケートフォームを作る

色々項目を増やしてアンケートフォームを作っていきます。
新規追加でフォーム追加画面を出します。↓最初の状態。
cf705
最初から基本的な部品は入っていますので、これを参考に付け足していきます。
今回はサンプルとして以下のようなアンケートを組み立ててみます。
フォーム下のボタンを押すとダイアログがでますので、必要項目をいれて挿入ボタンを押します。
今回は4つの質問を作ります。以下に記入例を挙げますので参考にしてください。

Q1 WordPressをセットアップしたことがある。
ある ない
→ラジオボタンcf711

Q2 どこにセットアップしましたか?
レンタルサーバー ローカルPC 専用サーバー ローカルサーバー
→チェックボックスcf712

Q3 現在WordPressサイトの管理をされていますか?
している いない
→ラジオボタンcf713

Q4 最もプラグインの多いサイトで何個入ってますか?
0~10 11~20 21~30 30個以上
→ドロップダウンメニューcf714

個人情報
・名前・メール・メッセージ
→デフォルトのまま

例と同じように<label>

個人情報部分は、標準の物をそのまま流用します。アンケートとしては不要なので題名を消しました。必須項目もそのままです。アスタリスクの有無で判別されます。
この段階で保存して固定ページにショートコードを貼り付け、見てみましょう。

cf706

もっともらしい、アンケートフォームができているはずです。
しかし、このままでは新規で追加した項目のデータを受け取ることができません。
受け取るための設定を追加してやります。

受信メールの設定

メールのタブを開いて受信メールの内容を書いていきます。受け取りに使いたいメールアドレスもこちらで設定します。
cf707

題名は消したので、[your-subject]は消します。
そして本文に追加したフォームのメールタグを追加して行きます。
追加出来るタグは上部に表示されているので、見ながら書き込みます。↓例です。
cf709

書いたら忘れずに保存を。

これで設定完了です。
回答者にもメールを送るには、メール(2)にチェックを付けて、同じように本文を書いていきます。回答や個人情報の控え、簡単なお礼、運営の署名などを記載しておくとよいでしょう。

表示メッセージの設定

Contactform7の仕様上、フォームの送信時に確認画面は出ません。
代わりに任意の送信完了のメッセージを出すことができます。
これはメッセージタブで設定します。
また、エラーの時の表示メッセージもこちらで設定可能です。
cf710

これでアンケートフォームは完成です。
実際の運用には、個人情報の取扱いなどもしっかり記載した方がよいでしょう。
より作り込むなら
・メールをWordPressのDBで管理する
・送信前に確認画面を出す。
などを別のプラグインを追加することで対応できます。

また、もっと大規模にアンケートを採るなら、
集計機能のあるアンケート専用のプラグインを使うとよいでしょう。
予算に都合が付くならSSLにも対応したいですね。

※以下に動作サンプルを設置しました。よろしければご回答ください。

続きを読む Contact Form 7でアンケートフォームを設置


IFTTT使って自動でGoogleスプレッドシートに記録していく

blog160809

Googleスプレッドシートを使ってますか?
仕事していると必須なExcelですが、職種によってはあのセルが並んでいる画面を見るのも嫌だっていう人がいるのも事実。
使ってみると、それはそれで便利なものですよ。
そんなExcelをブラウザ上で使うことができるGoolgeスプレッドシートを上手に活用すると、作業の効率アップに繋がるかもしれません。

例えばブログメディアを運用していると、記事のリストを作りたいときってないですか?
上司に急に言われて月間の更新数を出したり、Google Analyticsのレポートを作るときに記事の情報が必要だったり。
必要になってから慌てて作るよりも、ブログを更新したら自動的に記録できたら楽ですよね。
そんなときのIFTTTです。

IFTTTの説明はこちらでご紹介しています。
IFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)

ブログの更新記録を作る。

IFTTTのアカウントやチャンネルの登録は済んでいる前提でお話しします。

手順

チャンネルの登録は全部で7Stepあります。
全部英語の画面ですし、ちょっと多い気がするかもしれませんが、そんなに難しくないのでチャレンジしてみてください。

Step0:トリガー

160809_01

「this」をクリックします。

Step1:チャンネルを選択する

160809_02

トリガーとなるチャンネルを選択します。
今回は記事リストを作りたいので「RSS」を選択しました。チャンネルとなるサービスがたくさんあるので、検索ボックスを使って探すと早いです。

Step2:何をトリガーにするか

160809_03

Step2ではStep1で選択したチャンネルで何が起きたらトリガーになるかを選択します。
チャンネル「RSS」では、「New feed item」「New feed item matches」の2種類を選ぶことができます。今回は「New feed item」を選択しました。

Step3:アクション

160809_04

「that」をクリックします。

Step4:チャンネルを選択する

160809_05

アクションさせるチャンネルを選択します。
Googleスプレッドシートを使いたいので、「Goolge Drive」を選択。

Step5:どんなアクションをするか

160809_07

Step4で選択したチャンネルで何が起きたらトリガーになるかを選択します。
Googleスプレッドシートに行を追加して行くので「Add row to spreadsheet」を選びます。

Step6:何をするのかを選択する

160809_08

Step6で選択したアクションの具体的な中身を決めて行きます。
内容は選んだチャンネルによって変わってきます。

この例では入力できる項目が3つあります。
「Spreadsheet name」はスプレッドシートの名前、「Formatted row」には記録する項目、「Drive folder path」はスプレッドシートまでのパス(フォルダー構成)です。
準備できたら「Create Action」をクリック。

Step7:確認・登録

最後に確認画面です。
ここでこのレシピのタイトルを変更することもできます。
OKだったら「Create Recipe」をクリック。
これでこのレシピがマイチャンネルに登録されました。

手順は多そうに見えますが、ポチポチクリックしていくだけなのであっという間です。

完成イメージ ※画像はイメージです
160809_10

これでブログを更新すると自動的にGoogleスプレッドシートに行が追加されていきます。
日付でソートしていったりエクセルと同じように使えるので、リスト管理が一気に楽になりました。

実はバックアップの代わりにもできる?

これのおもしろいところは、WordPressのRSSをトリガーにしていたりすると、本文がHTMLの文字列で保存されるというとこですね。
なので、簡易的なバックアップのかわりにもできます。
もちろんDBのバックアップや画像ファイルなどはダウンロードできていませんが、あくまで簡易的に。
記事データだけ加工して使いたいとか言う時は便利かもしれません。

方法はStep6で記録するデータの中に「EntryContent」を含めればOKです。
入力エリアをクリックしてアクティブにすると、ボックスの右上に青いフラスコのアイコンが表示されるのでクリック。

160809_08_01

セレクトボックスが表示されるので、使いたい項目をクリックすればOKです。

160809_08_02

他のトリガーでもいろいろできる

今回はトリガーをRSSにしましたが、他のトリガー使ってGoogleスプレッドシートにリストを作っていくことができます。
ここからはアイディア次第です。
TwitterをトリガーにLikeしたツイートだけのリストを作るとか、Feedlyで後で読むにしたものをリストにしておくとかできそうです。

何でもかんでもGoogleスプレッドシートでリスト化するのがいいとは思いませんが、やっぱりリストって何かとあると便利ですし、それを自動でやれるならそちらの方がずっと楽でいいと思います。
リストを作るのって時間を取られたりするし、だったらその時間を別な何かに回すことができますから。

以前にGoogleフォームの結果をGoogleスプレッドシートに記録するっていう記事も書きました。よろしければこちらもどうぞ。
Googleスプレッドシートと連携!Googleフォームを使ってみた。


【Gmailのメールをチャットワークにも投稿!】Zapierを使ってみた

1707zapier

 

社内で使用している連絡ツール、チャットワーク。日本語でのUIが使いやすくて、ちょっとした記録なんかにも活用している今日この頃です。
出社するとまず立ち上げてチェックするツールでもあるのですが、受信した内容が、チャットワークにも投稿される「メール確認ツール」としても使えないだろうかと、ふと思ったのです。
特にGmailでは複数アカウントがあるため、それを都度確認していくのはちょっと面倒…。
たまに来る、でも目は通しておきたいメルマガなんかのチェックができたらいいなと思ったのが始まりでした。

チャットワークとGmail。違うサービスの連携ができるハブツールとして、真っ先に思いついたのがIFTTT。いろいろなサービスを対象としているこのIFTTTですが、残念ながらチャットワークはサポート外。
ほかにチャットワークが使えるハブツールはないかと、探してみたらありました!
その名もZapier

今回は、そのZapierというWebサービスについてご紹介したいと思います。

Zapierって?

以前ブログでもご紹介しているIFTTTmyThingsのように、異なるWebサービスなどを連携させることができるツールです。
何かが起こったとき(トリガー)に何かが起こる(アクション)。このサービスの組み合せを「ZAP」といい、無料プランでは5つまで作成することができます。
対象アプリはなんと500以上!もちろんチャットワークも入っています。

ZapierでGmailとチャットワークをつなげよう

ということで、さっそくZapierでZAPを作ってみました。
今回はGmailで特定のラベルがついたメールがくると、チャットワークのグループチャットにメールの内容が投稿されるという、ZAPを作成してみます。

01 チャットワークでの準備

まずZapierでチャットワークを使用するには、ChatWork APIが必要なのですが、それを発行してもらうのにチャットワークへの事前申請が必要です。

チャットワークにログインした状態でChatWork API申請ページへアクセスし、発行を申し込みます。
※ビジネスプラン、又はKDDI ChatWorkでのご利用の方は、管理者経由でのみ申請が可能です。
※申請からAPIの発行に3~5営業日かかるそうです。

発行完了のメールがきたら、チャットワークの「動作設定」で「API発行」というタブが新たに表示されるので、チャットワークのpassを入力し、APIを確認します。

20160713

 

20160712

Zapierでの操作でこのAPIが必要になりますので、コピーをしておきましょう。

02 Zapierに登録

Zapierからアカウントを登録します。
登録には名前・メールアドレス・パスワードが必要です。

20160700

03 ZAPを作成

ページ上部の「MAKE A ZAP!」をクリックし、トリガーとなるアプリ「Gmail」を選択します。

20160714

 

次に、Gmail上でトリガーにしたいできごとを選択します。
今回は「ラベルがついたメールを受信したとき」をトリガーにしたいので、「New Labeled Email」をチェックします。

20160702

 

「Connect New Account」をクリックし、対象となるメールアカウントを選択します。

20160703

 

対象のラベルを選択。

20160704

 

選んだラベル、トリガーの内容が正しいかの確認が表示されるので、問題なければ「Fetch & Continue」をクリックして次に進みましょう。

20160705

 

Gmail上に該当ラベルがあるかどうかがZapier上でチェックされ、問題なければ、これでトリガーのGmailの設定は完了です。「Continue」でさらに続けます。

20160706

 

次にアクションとなるチャットワークを選択します。

Edit Step Zapier27

 

 

チャットワーク上でアクションにしたいできごとを選択します。
今回は「グループチャットにメッセージを投稿」をアクションにしたいので、「Send Message」をチェックします。

20160707

 

「Connect New Account」をクリックし、次の表示画面でコピーしておいたチャットワークのAPIを入力し、アカウントを設定します。

20160701

 

投稿するグループチャットと、投稿するメッセージの内容を設定。
投稿内容は独自タグを使用して「メールタイトル」「送信先アドレス」なども選べますが、今回は「タイトル(Subject)」と「内容(Raw Payload Body Data)」を選択しました。

20160709

 

設定した内容で、実際にチャットワークへのテスト投稿が行われます。

20160716

 

テストに問題がなければ下記の画面が表示され、「Finish」をクリックするとZAPの完成!名前をつけて、保存しましょう。

20160710

 

もし変更がある場合は、サイドメニューから変更箇所を選択し、再度設定します。

20160717

終わりに

今回はチャットワークと連携できるという点に着目しましたが、他にもZapierでできることはたくさんあるようです。
ZAPのエラーチェックや、2つ以上のサービスをつなげられるマルチステップ(有料プランのみ)、複数のアカウントの切り替えなどなど…
無料プラン内では制限がありますが、シンプルに2つのサービスをつなげるIFTTTなどのハブツールと、良い具合に使い分けができたらと思っています。

参考にさせていただいたサイト


独自ドメインのサイトを広告無し100円以下で立ち上げてみる【2】無料サーバーにサイトを設置編

~前回までのあらすじ~
  • 格安で独自ドメインのサイトを立ち上げてみるとしてスタート。
  • ドメインはお名前.comで格安のxyzドメインを32円で取得。niigata360.xyz
  • サーバーは比較的品質の高そうなxdomainを選択。
  • ドメイン取得後、ネームサーバーの設定を済ませて反映されるのを待つ。
    ここまでやりました。
今回は、実際にHTMLコンテンツをアップし、サイトを公開してみます。
■サイトを設置
テストサイトをHTMLで用意します。内容は特にありませんが、仕掛けとしてスライドショーと、google mapsのiframeによる埋込みくらいは盛り込んでおきます。
今回設置するxdomainの無料サーバーは広告はつきませんが、下記の制限があります。
  • 1ファイルあたり3MB
  • DB無し(別サーバー・広告あり)
  • PHP不可
  • CGI不可
  • 他社で取得したドメインのメール設定は不可
    このあたりの制限が大きな制約になりそうです。こうやって書くと何もできなさそうですが、逆に
  • 独自ドメイン10個OK
  • 容量1GB
  • FTPが使える。(ファイルマネージャーも別途用意されている。)
    と言うように、保存容量が比較的大きかったり、無料でもマルチドメインで設定していけることは大きなメリットです。個人的にはFTPでアップできるのも管理が楽で便利です。
※xdomainの無料サーバーは広告を受け容れることでPHPやMySQLが使えたりWordPressの設置も可能なサーバーも使えます。WordPressでの広告はスマートフォンやタブレットなどモバイル環境のみでの表示と、結構控えめですね。ひとまず今回は広告無しにこだわってみたいと思いますので、WordPressはあきらめ上記制約内で作ってみます。
ということで、シンプルな構成のWEBサイトを用意します。
あとはUPするだけです。FTPの設定だけ載せておきます。図はFileZillaです。
・ホスト ・ユーザー ・パスワード をいれてログオンの種類を通常にしておけば繋がります。
WEBベースのファイルマネージャーも用意されているので、そちらからUPしてもいいでしょう。接続先が直で公開用のルートフォルダになりますので、そのままHTMLファイルをアップすればOKです。
blog_free02
では実際にファイルをアップします。
■実例 テストサイト→http://www.niigata360.xyz/サンプルサイト
 ■結果
ブラウザが対応していればスライドショーなどのコンテンツの表示も特に問題ありません。やはり有料のレンタルサーバーに比べると画像の表示などにもたつきが見られます。値段相応と言った所です。(無料ですが)
■余談
実はここまでは、順調に用意できたのですが、google chromeでは表示できず「無効なURLです。」との表示が続いていました。FirefoxやIE、Edge、さらにMacのsafariでも正しく表示されます。chromeだけドメインの名前解決ができてない印象でした。原因がわからず難儀したのですが、結局は、chromeのDNSキャッシュが原因だったようで、クリアすると表示できるようになりました。chromeのDNSキャッシュクリアは設定からはできないので、アドレスに「chrome://net-internals/#dns」を入れて設定画面を出し、そこから消してください。
blog_free04
■感想
過去に、無料WEBサイト制作サービスが流行って廃れた時期がありましたが、ここに来てふたたび盛り返してきている感があります。無料サーバーも思ったより使えそうですし、選択肢もいくつかあり、組み合わせ次第でランニングコストを極力かけずにWEBサイトを構築できます。テストサイトの構築や個人の学習には十分かと思います。しかし実際に使ってみて無料サーバーと格安であっても有料サーバーには大きな隔たりを感じました。コストに問題なければ、個人のテストであっても有料サーバーを借りた方が面倒が少ないかと思います。(目的によります。)特にドメイン関連の設定に自信の無い方は、ドメインとサーバーは同じ会社から借りましょう。別々の会社から借りた場合、今回のようにトラブルがあると、原因の切り分けと追求に難儀します。
■注意点
ドメインは今回安く取得できましたが、2年目以降は普通に通常料金が掛かります。安くて飛びつくと、維持費が高く付くドメインもありますので、長く使う予定でしたら、一般的な
.comや.net、.jpなどを取得しましょう。今回30円で取得したxyzは2年目以降は1480円です。
また、無料サービスはいつ停止しても文句が言えません。そのあたりのリスクをよく考えてご利用ください。

もう少し続きます。

.net/0.gif?a8mat=2NOT2E+D44RHU+CO4+15THJ5″ alt=”” width=”1″ height=”1″ border=”0″ />